Gerade, wenn man neu mit der Arbeit an einer Angular-App beginnt, kann es Entwickler vor eine große Herausforderung stellen, zu verstehen, wie von anderen Entwicklern geschriebene nested Direktiven voneinander abhängen. David Aden hat daher versucht, Angular-Applikationen mit einem Diagramm visuell darzustellen und erklärt, wie solche Diagramme bei der Arbeit helfen können.

Angular-Applikationen bildhaft dargestellen

Die visuelle Repräsentation von Softwarekonzepten ist nichts Neues und hilft dabei, Klassen, Konzepte, Beziehungen und Funktionalitäten bildhaft darzustellen. Doch während es in anderen Bereichen verschiedene Diagramm-Techniken dafür gibt, fehlt solch eine vollwertige, visuelle Sprache in der Angular-Welt, um Applikationen zu beschreiben, dokumentieren oder spezifizieren.

Wie kann Front-End-JavaScript-Entwicklung also in einem Diagramm dargestellt werden, sodass Module, Kontroller und Ansichten sowie die Interaktion zwischen DOM und JavaScript-Code bildhaft wiedergegeben werden? Eine eindeutige Antwort gibt es darauf nicht. David Aden hat daher mit einigen Diagrammen, die Teile einer Angular-Applikation darstellen, herumexperimentiert.

Dafür hat er sich zunächst mit einer einzigen Datei beschäftigt und deren Abhängigkeiten identifiziert. Beginnt man dabei zum Beispiel mit einer Direktive, werden anschließend die damit verbundenen Ansichten und Kontroller identifiziert und dem Diagramm hinzugefügt. Von dort aus werden weitere Teile der Applikation und ihre Beziehung untereinander hinzugefügt, bis das Diagramm möglichst detaillierten Aufschluss über die einzelnen Abhängigkeiten der Elemente gibt. Am Ende kann ein solches Diagramm dann zum Beispiel folgendermaßen aussehen:

Screenshot: Visuelle Repräsentation einer Angular-App in einem Diagramm

Eine solche visuelle Repräsentation hilft also einerseits dabei, alle Teile der Applikationsstruktur zu verstehen, andererseits kann sie anderen als visuelle Hilfe zur Verfügung gestellt werden. David Adens Selbstversuch zeigt zudem, dass eine visuelle DSL für Angular-Applikationen nötig ist – einen ersten Ansatz, diese umzusetzen, hat er dafür bereits geliefert.

Aufmacherbild: Soccer Play on Chalk Board with Hand Drawing Soccer Field and Plan. von Shutterstock / Urheberrecht: Mega Pixel