Blog

Moderne Architekturen mit Angular – Teil 1: Angular kommt häufig für das Frontend großer, unternehmenskritischer Lösungen zum Einsatz. Gerade in diesem Umfeld ist besonders auf eine gut wartbare Architektur zu achten. Gleichzeitig soll aber auch Over-Engineering vermieden werden. Aktuelle Features wie Standalone Components und Standalone APIs helfen dabei.

Software Design Patterns, oder deutsch Entwurfsmuster, finden sich überall und somit auch im Angular-Framework. Arbeitet man mit Angular, kommt man auch bei der Entwicklung täglich mit Design Patterns in Berührung. Wenn wir verstehen, wo diese Muster Verwendung finden, was sie tun und wie sie funktionieren, können wir sie auch besser nutzen. Das wiederum befähigt uns, bessere und robustere Anwendungen zu entwickeln.

Gemeinsam mit Standalone Components hat das Angular-Team die sogenannten Standalone APIs eingeführt. Sie bieten eine geradlinige Lösung zum Einrichten von Bibliotheken und kommen ohne Angular-Module aus. Populäre Beispiele von Bibliotheken, die diese Idee bereits aufgreifen, sind der HttpClient, der Router, aber auch NgRx. Diese Bibliotheken basieren auf einigen Mustern, die auch für eigene Vorhaben nützlich sind. Außerdem bieten sie den Konsument:innen unserer Bibliotheken vertraute Strukturen und Verhaltensweisen. In diesem Artikel stelle ich drei solcher Muster vor, die ich aus den genannten Bibliotheken abgeleitet habe. Der Quellcode mit den dazu verwendeten Beispielen findet sich unter [1].

Authentifizierungs-Gateways übernehmen transparent die Authentifizierung von Benutzern. Das gestaltet die Implementierung einfacher, aber auch sicherer. Dank Tokenaustausch haben sie für jede Domäne das richtige Access-Token parat.

Barrels sind nicht nur ein guter Ersatz für Angular-Module, sondern sie erlauben auch die Unterscheidung zwischen öffentlichen APIs und Implementierungsdetails. Bibliotheken in Nx-basierten Workspaces ermöglichen daneben auch das Einschränken von Zugriffen und somit das Erzwingen der festgelegten Frontend-Architektur.

Nx erkennt geänderte Programmteile und baut auch nur diese erneut. Alle anderen Systembestandteile werden aus einem Cache bezogen. Damit lässt sich der Build-Vorgang enorm beschleunigen.

Manfred Steyer beantwortet Fragen zu den neusten Entwicklungen in der Angular Welt. Welche Highlights gab es in 2020 und was kommt 2021 auf Angular-Begeisterte zu?

Angular 9 bringt Ivy in einer abwärtskompatiblen Variante und somit kleinere Bundles. Außerdem wurde die I18N-Lösung umfangreich überarbeitet und einige Ecken wurden abgerundet. Damit stehen nicht nur dem Entwickler, sondern auch den zukünftigen Versionen von Angular neue Möglichkeiten zur Verfügung.

Die JavaScript-Welt ist stets in Bewegung. Welche Trends haben 2019 Fahrt aufgenommen, wohin geht die Reise 2020? Wir haben Angular-Experte Manfred Steyer um eine Bestandsaufnahme gebeten.