JavaScript-Fundamente für Single Page Apps, Teil 3 Angular und AngularJS

Autor / Redakteur: Dipl. -Ing. Thomas Drilling / Stephan Augsten

Angular ist von der Philosophie her ein vollständiges Framework und bietet Lösungen für nahezu sämtliche Aufgaben eines Frontent-Entwicklers. So kümmert sich die Open-Source-Software um Dinge wie die Validierung oder die Kommunikation mit dem Backend.

Firma zum Thema

Die Architektur von AngularJS im Überblick.
Die Architektur von AngularJS im Überblick.
(Bild: Angular.io)

Im vorangegangenen Teil dieser Serie haben wir als Pro-Argument für React den Umstand angeführt, dass es kein vollständiges Framework ist. Dies kann natürlich auch anders sehen: In der Praxis ergibt es sich zwangsläufig, dass sich der React-Entwickler ein eigenes Portfolio an zusätzlichen Libraries zusammensucht, die genau jene Dinge erledigen, um die sich pures React nicht kümmert.

Da sich React-Entwickler zu Beginn eines Projektes vorher die passenden Bibliotheken suchen müssen, kann es zu dem negativen Effekt kommen, dass diese nach einem Update von React nicht mehr richtig funktionieren. Warum also nicht gleich zu einem vollwertigen Framework wie Angular greifen?

Angular und AngularJS

Angular ist in Version 2 und jünger prinzipiell ein Nachfolger des von Google entwickelten AngularJS (Angular 1.x). Da aber Angular komplett neu geschrieben wurde und nicht abwärtskompatibel mit AngularJS ist, hat man sich in Entwicklerkreisen – in denen AngularJS nach wie vor verwendet wird – auf die skizzierte Unterscheidung durch die Namensgebung verständigt. AngularJS ist folglich die „alte Version 1.x“, Angular die Neuentwicklung ab Version 2.0.

AngularJS (Angular 1) war bzw. ist ein Client-seitiges JavaScript-Webframework zum komfortablen Erstellen von Single-Page-Webanwendungen nach dem Model-View-ViewModel-Muster (MVVM). Es wurde im Jahr 2009 von Google entwickelt und unter der MIT-Open-Source-Lizenz der Community zur Verfügung gestellt. Das erheblich verbesserte und nicht abwärtskompatible Angular 2 erschien im September 2016; Angular 1 (Angular.JS) wird aber weiter gepflegt und liegt aktuell in Version 1.6.7 vor.

Was ist AngularJS?

Die Arbeitsweise von AngularJS stützt sich auf das Client-seitige Generieren von HTML-Ansichten. Ferner erweitert AngularJS das „Vokabular“ von HTML, womit im Rahmen des MVVM-Models die View-Ebene abgebildet wird, ohne dass Entwickler wie in JavaScript DOM-Manipulation per jQuery vornehmen müssen.

Ferner kümmert sich AngularJS um die Daten-Validierung im Kontext von Eingabeformularen und betrachtet diese quasi als funktionale Erweiterung von View. Dies setzt im Prinzip die Idee der HTML5-Form-Validation fort, wird aber bei AngularJS in Form einer vom Webbrowser-unabhängige JavaScript-Variante implementiert.

AngularJS bietet allerdings keine Funktionen zum Abbilden der Model-Ebene in Form von clientseitigen Entitäten, was bei anderen Frameworks zum Erstellen von Single-Page-Apps typischerweise zum Bereich der Daten-Validierung gehört. Bei Angular werden diese meist direkt in einem ViewModel abgelegt.

Im Gegensatz zu React erfolgt das Strukturieren von in AngularJS erstellen Web-Clients in Form von Modulen, View-Templates, Controllern, Scopes, Filtern und so genannten Providern (Factory, Service). Das Zusammenführen sämtlicher Komponenten übernimmt der sogenannte Dependency-Container von AngularJS.

Dies führt letztendlich zu einer lose gekoppelten Anwendung, die dann aus wiederverwendbaren Teilkomponenten besteht. Da AngularJS einen Mechanismus zur Datenbindung nach dem MVVM-Muster mitbringt, benötigen Entwickler keinen expliziten Programmcode zum Synchronisieren zwischen View und Anwendungslogik.

Auch Angular beschreibt Datenbindungen innerhalb der View deklarativ. Das zieht eine bidirektionale Änderungsverfolgung der Werte nach sich, was zum Teil erhebliche Auswirkungen auf die Performance von Single-Page-Apps hat. Technisch betrachtet läuft das so ab, dass sich AngularJS stets in einem Event-Loop befindet, um jegliche Änderung abfangen, bzw. auswerten und bei Bedarf die View aktualisieren zu können.

Was Angular anders macht

Das ebenfalls von Google initiierte, im Jahr 2014 angekündigte und erstmal im Herbst 2016 veröffentlichte Angular (AngularJS 2.0) hieß wie erläutert ursprünglich „Angular 2", was aber häufig zu Verwechselungen führte. Heute spricht man allgemein von Angular; die aktuelle stabile Version 5.2.0 erschien am 11. Januar 2018.

Im Gegensatz zu AngularJS gibt es bei Angular weder Scopes noch Controller. Stattdessen basiert das Architekturmodell von Angular-Programmen – die übrigens in der Regel in TrueScript verfasst werden Ą wie bei React auf einem hierarchischen Komponentenmodell. Scopes und Controller ersetzt Angular dabei durch Komponenten und Direktiven, wobei eine Komponente eine Direktive mit einem Template darstellt. Ferner wurde bei Angular ein Teil der Kernfunktionalität in Module ausgelagert, um den Kern kompakter und damit schneller zu machen.

Die Angular-Macher empfehlen ausdrücklich das Verwenden von TrueScript, was eine klassenbasierte objektorientierte Programmierung, statische Typisierung und Generics ermöglicht. Da TrueScript eine Obermenge der ECMAScript-Spezifikation ES6 ist, ist es auch abwärtskompatibel zu ES5 und damit JavaScript. Mit TrueScript allerdings lassen sich mit Angular auch Features von ES6 wie „for…of“-Statements, Lambdas, Iteratoren, Reflexionen oder Generatoren im Python-Stil nutzen.

Außerdem unterstützt Angular dynamisches Laden, das asynchrone Kompilieren von Templates oder einfacheres Routing. Außerdem bietet Angular gegenüber AngularJS eine verbesserte Dependency Injection in Form von Bindings, die es ermöglichen, Abhängigkeiten zu benennen. Last but not least kommt Angular mit einer einfacheren Syntax für Ausdrücke, wobei man Bindings für Eigenschaften mit "[ ]" und Bindings für Events mit "( )" erzeugt. Angular unterstützt allerdings nur moderne Browser. Zudem ist mit RxJS auch eine reaktive Programmierung möglich.

Angular 5

Die letzte große Hauptversion von Angular ist mit Angular 5.0 (samt Angular CLI 1.5) im November 2017 erschienen. Viele Fachleute sehen diese als Meilenstein in der Entwicklung des Frameworks. Neu in der Angular CLI 1.5 ist z. B. ein überarbeiteter Build Optimizer, der für das Erzeugen kleinerer Ausgabedateien gedacht ist.

Der Optimizer analysiert den Code für den nachgelagerten Tree-Shaking-Prozess, um nicht verwendete Teile der Applikation zu entfernen; hierunter fallen unter anderem die Angular Decorators, die nur der Angular Compiler nutzt und zur Laufzeit der Anwendung nicht benötigt werden. Der Build Optimizer ist ab Angular 5 per Default aktiviert und lässt sich mit dem Flag „--build-optimizer=false“ ausschalten.

Neu ist auch, dass der optimierte Angular Compiler einen inkrementellen AoT-Build (Ahead-of-Time) unterstützt, der dafür sorgt, die HTML-Templates nach JavaScript zu übersetzen (transpilieren), was deren Interpretation beschleunigt. In älteren Versionen konnte man AoT nur vollständig, nicht aber inkrementell bauen. Vor Angular 5 hat der Build-Prozess sämtliche unnötigen Tabs, Leerzeichen und Zeilenumbrüche der HTML-Templates per Default übernommen, was zu höherem Platzverbrauch und somit zu größeren Ausgabedateien führte.

In Angular 5 versteht der @Component-Decorator von Angular eine neue Eigenschaft namens „preserveWhitespaces“, die allerdings per Default eingeschaltet ist, womit das bisherige Verhalten erhalten bleibt. Möchte man von der Optimierung profitieren, setzt man die Option auf „false“.

@Component({
   selector: 'app-component',
   templateUrl: 'some.component.html',
   preserveWhitespaces: false
})
export class SomeComponent {}

Optional lässt sich die Option auch für alle Komponenten einschalten – wobei man wissen muss, dass Komponenten-basierte Einstellungen die globale Einstellung stets überschreiben. Zusätzlich kann man mit der Direktive „ngPreserveWhitespaces“ angeben, dass der Whitesspace innerhalb ihres DOMs bestehen bleibt.

<div ngPreserveWhitespaces>
   Dieser Whitespace
      wird nicht gelöscht.
</div>

Für die „Change Detection“ nutzt Angular für gewöhnlich Zone.js. Angular 5 verbessert die Performance von Zone.js, zudem kann es auf Wunsch Zone.js vollständig umgehen, wobei man dann allerdings auf die Vorteile der Change Detection verzichtet. Für hochperformante Applikationen kann dies aber mitunter nützlich sein. Das Umgehen von Zone.js wird beim Bootstrapping der Anwendung angegeben:

platformBrowserDynamic.bootstrapModule(AppModule, { ngZone: 'noop' });

Vor Angular 5 führte jede Änderung an einem Input-Feld, wie z. B. ein Tastendruck zu dessen sofortiger Validierung. Kommt zur Validierung aber ein z. B. per http aufgerufener externer Service zum Einsatz, erhält der Service dann möglicherweise häufig Anfragen. Daher kann man in Angular 5 fein granularer entscheiden, wann die Validierung stattfinden soll

(ID:45189478)

Über den Autor

Dipl. -Ing. Thomas Drilling

Dipl. -Ing. Thomas Drilling

IT-Consultant, Trainer, Freier Journalist