© Spirit Boom Cat/Shutterstock.com
Kolumne: Die Angular-Abenteuer

Kolumne: Die Angular-Abenteuer


Zustandslos und schlank – das sind die Tugenden des wartbaren Weblayers. Wenngleich diese Faustregel für klassische serverseitige Webanwendungen stimmen mag, gilt sie nicht mehr für moderne Single Page Applications. Die sind nämlich in den Ring gestiegen, um die Benutzerfreundlichkeit klassischer Desktopanwendungen ins Web zu bringen. In puncto Benutzerfreundlichkeit ist es nicht gerade von Vorteil, wenn die Anwendung ständig Daten vom Server nachlädt. Das bedeutet, dass plötzlich eine ganze Menge Daten lokal vorliegt und der Client doch nicht mehr ganz so schlank ausfällt.

Damit das nicht im Chaos mündet, entwickelte man in den letzten Jahren einige Ansätze zur lokalen Zustandsverwaltung. Der populärste ist wohl Redux, der aus der Welt von React stammt. Mit @ngrx/store liegt auch eine Implementierung für Angular vor. Da sie unter anderem von einem Angular Core Team Member entwickelt wurde und auf die in Angular weit verbreiteten Observables setzt, kommt ihr der Stellenwert eines De-facto-Standards zu.

In dieser Ausgabe zeige ich anhand eines Beispiels, warum Redux bzw. @ngrx/store sinnvoll sind und wie sie funktionieren. Den hier besprochenen Quellcode stelle ich wie immer über mein GitHub-Konto zur Verfügung [1].

Zustandsverwaltung mit Services

Zur Verwaltung von Zuständen gibt uns Angular Services an die Hand. Da sie in ihrem Wertebereich Singletons sind, können sie Daten zentral vorhalten und als Drehscheibe für einzelne Komponenten dienen. Solange die Interaktion mit ihnen wie in Abbildung 1 aussieht, ist alles wunderbar.

steyer_aa_1.tif_fmt1.jpgAbb. 1: Komponenten und Services

Die Erfahrung hat jedoch gezeigt, dass selbst bei kleineren Anwendungen die Daten eines Service an vielen Stellen der Anwendung benötigt werden. Somit ergibt sich eine verworrene Struktur mit schwer nachvollziehbaren Datenflüssen (Abb. 2).

steyer_aa_2.tif_fmt1.jpgAbb. 2: Verworrene Struktur

Besonders undurchsichtig wird es, wenn Services und Komponenten sich gegenseitig benachrichtigen, um Daten weiterzugeben. Schnell ergeben sich Zyklen, die die Performance negativ beeinflussen und im schlimmsten Fall die Anwendung einfrieren. Da jeder Service seinen eigenen Ausschnitt des Anwendungszustands hat, kommt es auch zu Redundanzen, die auseinanderlaufen und zu Inkonsistenzen führen. Im Fehlerfall kann sich dann auch niemand erklären, wie es der Benutzer geschafft hat, den jeweiligen Anwendungszustand herbeizuführen. Genau deswegen ist in den letzten Jahren in der React-Community das Redux-Muster entstanden.

Redux

Das Muster Redu...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang