Visuelle Repräsentation von Angular-Applikationen: eine Notwendigkeit?
Kommentare

Eine visuelle Repräsentation von komplexen Teilen einer Applikation kann dabei helfen, leichter zu erkennen, welche Elemente voneinander abhängen und wie die Applikation aufgebaut ist. Insbesondere bei Angular-Applikationen kann es schwierig sein, das nachzuverfolgen.

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 Angular-Applikationen

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

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -