AngularJS, als Vorgängerversion von Angular, ist ein JavaScript Framework für Web- und Softwareentwicklung, entwickelt von Goole. Anfangs für die Entwicklung von Single-Page-Apps gedacht und im Nachgang millionenfach für die Web-Anwendungsentwicklung genutzt. Google entwickelte damit das erste geeignete Framework für große Enterprise-Anwendungen. Durch Methoden wie Dependency Injection (Ein Entwurfsmuster, bei dem ein Objekt oder eine Funktion andere Objekte oder Funktionen empfängt, von denen es/sie abhängt) und ein ausgereiftes Tooling, ermöglichen eine effiziente und wartbare Softwareentwicklung auf Basis von JavaScript.

Seit 2009 ist es ein Open-Source-Projekt, dass auf gute Testbarkeit ausgelegt ist (An dieser Stelle möchte ich auf den Test Driven Development Beitrag verweisen 😉 ). Dies bietet ein MVC/MVVM-Framework, welches bidirektionales Databinding unterstützt.

MVC/MVVM?

MVVM teilt die verschiedenen Komponenten des Entwicklungsprozesses in drei Kategorien auf. Model, View und ViewModel. In der Regel handelt es sich dabei um Code-Markup oder grafische Benutzeroberflächen (GUI). MVC (Model-View-Control) ist eine Methode, mit der Entwickler Programme in diese drei Komponenten aufteilen. Auf diese Weise lassen sich geschäftliche Anforderungen und Regeln von der Art und Weise unterscheiden, wie Benutzer mit der Anwendung arbeiten. Gerne gehe ich in einem zukünftigen Beitrag näher darauf ein.

Unterschiede zwischen Angular und AngularJS

Angular ist wie bereits erwähnt der Nachfolger von AngularJS. Von Grund auf neu geschrieben, unterscheiden die beiden sich grundsätzlich und in vielerlei Hinsicht.

• Angular kennt keine „scopes“ oder Controller, sondern verwendet eine Hierarchie von Komponenten als zentrales Architekturkonzept.
• Angular hat eine einfachere Syntax für Ausdrücke: Mit „[ ]“ werden Bindings für Eigenschaften und mit „( )“ werden Bindings für Events erzeugt.
• Mobile-First-Ansatz: Die Anforderungen von mobilen Plattformen haben besondere Priorität.
• Modularität: Module können Funktionalitäten auslagern, sodass Code leichtgewichtiger und schneller sein kann.
• Es liegt lediglich die Unterstützung moderner Browser vor, wodurch man weniger Workarounds wegen Browser-Kompatibilitätsproblemen benötigt.
• Angular empfiehlt die Verwendung von TypeScript. Es bietet Klassenbasierte objektorientierte Programmierung, Statische Typisierung und Generics.
• TypeScript ist eine Obermenge von ECMAScript 6 (ES6) und ist rückwärts kompatibel mit ECMAScript 5, damit JavaScript. Angular bietet somit auch die Vorzüge von ES6: (Lambdas, Iteratoren, for…of-Schleifen, Generatoren im Stil von Python, Reflexion)
• Verbesserte Dependency Injection: Bindings ermöglichen die Benennung von Abhängigkeiten.
• Directives dienen dem Zweck, dass Aussehen und Verhalten eines Tags dynamisch zu verändern.
• Dynamisches Laden ist möglich
• Asynchrone Kompilierung von Templates
• Einfacheres Routing
• Kontroller und $scope sind durch Komponenten und Directives ersetzt. Eine Komponente ist eine Directive mit einem Template.
• Reaktive Programmierung mit RxJS

Angular für konventionelle Websites?

Angular ist ideal für Websites mit dynamischem Inhalt, jedoch nicht für kleine Seiten mit statischem Inhalt geeignet. Die Implementierung von Angular erhöht in diesem Fall lediglich die Gesamtgröße des Projekts und folglich auch die Ladezeiten. Dies ist eines der Hauptgründe, warum man Angular nicht für Landing Pages und Websites mit statischem Inhalt verwenden sollte. Davon abgesehen ist Angular weit davon entfernt, SEO-freundlich zu sein. Und im Zeitalter von Search-Engine-Optimization gibt es weitaus bessere Alternativen, um dieses Ziel zu erreichen. Auch ist Angular keine gute Lösung für kurzfristige Projekte oder Start-ups mit begrenzten Ressourcen. Die Komplexität des Front-Ends kann in relativ kurzer Zeit immense Ausmaße annehmen und später schwer zu bändigen sein.

Das Hauptanwendungsgebiet von Angular bestand darin, Einzelseiten-Webanwendungen zu erstellen. Aus diesem Grund verfügt es über eine breite Palette von Werkzeugen für die SPA-Entwicklung. Darüber hinaus ist es eine ideale Technologie für Websites, bei denen sich der Inhalt auf der Grundlage des Nutzerverhaltens und der Präferenzen der Benutzer dynamisch anpasst. Dependency Injections stellen sicher, dass im Falle der Änderung einer Komponente andere Komponenten, die mit ihr in Zusammenhang stehen, automatisch mitgeändert werden.

Die 3 verschiedenen Ladetechniken

Bei der Arbeit mit Angular bieten sich 3 verschiedene Ladetechniken an. Diese sind das Eager Loading, Lazy Loading und Preloading, auf die ich nachfolgend eingehe.

Eager Loading (Eifriges Laden)

Der Abruf aller benötigten Daten möglichst wirksam und umgehend bzw. sofort. Hierzu gibt es im Grunde genommen nicht viel anzumerken. Die Technik ist zwar effizient, doch die Tatsache, dass man eventuell nur einen bestimmten Teil der Daten benötigt aber dennoch alle Daten lädt, kann sich schnell zu einem Nachteil entwickeln, wenn es sich um große Datenmengen handelt.

Lazy Loading (Langsames Laden)

Die am wenigsten eifrige bzw. nicht eifrige Ladetechnik. Wenn man faul ist, tut man so lange nichts, bis man es wirklich muss oder dazu gezwungen wird. Man stelle sich vor, dass die Anwendung drei Bereiche hat. Home, Admin und das Dashboard. Auf den Home-Bereich wird ständig zugegriffen, auf den Dashboard-Bereich die meiste Zeit. Der Admin-Bereich wird jedoch nur von einigen wenigen Nutzern verwendet. Folglich kann man die Admin-Route nach und nach laden. So lange niemand auf die Idee kommt, auf den Verwaltungsbereich der Anwendung zu klicken, wird der damit verbundene Code auch nicht ausgeführt bzw. nicht geladen.

Die Mehrheit der Nutzer lädt den Code für den Verwaltungsbereich schlichtweg nie. Wenn man also Lazy Loading verwendet, kann man grundsätzlich schneller auf die Anwendung zugreifen, da man nicht so viel Code vom Server laden muss. Dies hängt damit zusammen, dass das ORM-Werkzeug (Objekt-Relationales Mapping-Werkzeug) jeglichen Zugriff auf alle Objektreferenzen »abfangen« muss, um hier bei Bedarf die verbundenen Objekte nachladen zu können. Dieses Abfangen erfolgt durch die Verwendung bestimmter Klassen für Einzelreferenzen und Mengenklassen. Der Unterschied zwischen den ORM-Werkzeugen liegt darin, ob der Entwickler diese Klassen explizit im Code verwenden muss oder ob das ORM-Werkzeug diese beim Kompilieren oder zur Laufzeit austauscht.

Preloading (Vorladen)

Die „somewhere-in-between“ (Irgendwie Zwischendrin) Ladetechnik. Beim Preloading macht man im Grunde genommen dasselbe wie beim Lazy Loading, nur ein bisschen anders.

Anhand des Home, Dashboard und Admin Beispiels lässt sich dies folgendermaßen darstellen. Die Startseite braucht man immer. Also lädt man diese schnell bzw. eifrig. Der Admin-Bereich wird nur selten und nur von wenigen Benutzern benötigt, also kann man diesen erst einmal etwas vernachlässigen bzw. „lazy“ laden. Aber das Dashboard ist nicht das Erste, was ein Benutzer sieht, also kann es grundsätzlich erst einmal warten. Doch das Dashboard ist gleichzeitig etwas, dass die meisten der Benutzer irgendwann sehen möchten. Also sollte es zumindest dann zur Verfügung stehen, wenn das Laden des Home-Bereichs fertiggestellt ist. Nach jeder erfolgreichen Navigation sucht der Router in seiner Konfiguration nach einem nicht geladenen Modul, das er vorladen kann.

Der Home-Bereich wird erfolgreich geladen und unmittelbar danach wird der Dashboard-Bereich im Hintergrund geladen.

Welche Ladetechnik kann/soll ich nun verwenden?

Wie bei vielen Angelegenheiten in der IT kommt es hier auf den spezifischen Anwendungsfall und den zur Verfügung stehenden Ressourcen an. Wenn man nicht genau weiß, ob man die zusätzlichen Daten benötigt oder nicht, dann kann es ungünstig sein, sie direkt zu laden. Es kann aber auch ungünstig sein, sie später nachladen zu müssen. Entscheidend bei der Entscheidung ist die Wahrscheinlichkeit, ob und wann man die jeweiligen Daten für wen benötigt, um welche Datenmenge es sich handelt und ob man die Daten später einfach nachladen kann. Zu beachten ist, dass man ein automatisches Nachladen, nach einer Serialisierung, in der Regel nicht mehr initiieren kann.

Release-Frequenz

Angular Releases folgen dem Konzept des Semantic Versionings. Man unterscheidet zwischen Major-, Minor- und Bugfix-Releases. Alle 6 Monate gibt es eine neue Major Release. Major Releases enthalten signifikante neue Features, sind aber nicht abwärtskompatibel. Der Umstieg auf eine neuere Major Release benötigt daher oft Update-Scripts, Refactorings des bestehenden Codes, weitere Tests und das Erlernen neuer APIs. Zu jeder Major Release gibt es ein bis drei Minor Releases. Patch Releases und Pre-Releases gibt es fast jede Woche.

Support

Der Support von Major Releases beträgt typischerweise 18 Monate lang nach Release. Davon 6 Monate aktiv. Aus diesem Grund gibt es in regelmäßigen Abständen Minor Releases und Patch Releases. Es folgt ein 12-monatiger Long Term Support (LTS) in Form von Patch-Releases, ausschließlich zur Behebung kritischer und sicherheitsrelevanter Fehler.

Fazit

Bei der Verwendung von Angular sollte von vornherein klar sein, dass die Realisierung eines Projekts mit der Abnahme vieler Entscheidungen über Architektur und des Renderings verbunden ist. Dies hat den Vorteil, dass sich das Projektteam zu 100% auf die Umsetzung von Features konzentrieren kann und nicht die grundlegende Architektur eigenständig aufbauen muss.

Durch die sehr einheitliche Struktur von Angular Anwendungen lassen sich gute Entwickler sehr schnell in das Projekt integrieren, da Angular Anwendungen stets einer gewissen Struktur folgen. Dies vereinfacht die Skalierbarkeit des Teams als auch des Projektes selbst als vergleichsweise bei Individuallösungen der Architektur in anderen Frameworks.

Generell ist es für Enterprise Projekte sicherlich eine gute Wahl. Dennoch sollte man andere Frameworks wie React und VueJS nicht außer Acht lassen, über die ich in den kommenden Tagen schreibe.