© Matej Kotula/Shutterstock.com
Die Architektur des neuen Compilers

Angular Ivy im Überblick


Mit Angular können wir viel kleinere Bundles an den Webbrowser übergeben. Auch das Rebuilding wird schneller. Wie hat das Angular-Team das bewerkstelligt?

Möchte man heutzutage eine Single Page Application für den Webbrowser entwickeln, sind Frameworks wie Angular kaum noch wegzudenken. Das Behandeln von Userinteraktionen, wie sie beispielsweise bei einem Formular oder durch das Klicken auf ein Steuerelement vorkommen, wird durch Angular deutlich erleichtert.

Die Entwicklung mit Frameworks stellt Webentwickler vor ganz neue Herausforderungen: Wurden vor zehn Jahren noch viele einzelne HTML-Seiten an den Webbrowser ausgeliefert, wird bei einer Single Page Application nur noch eine einzige sogenannte index.html ausgeliefert und sämtlicher Inhalt mit JavaScript neu gerendert. Die Hauptverantwortlichkeit für das Darstellen der Webseite liegt nun im Webbrowser und das dazu benötigte JavaScript wird vollständig ausgeliefert.

Leider bedeutet das auch, dass die sogenannte initiale Ladedauer einer Anwendung bei einer schwachen Internetverbindung sehr lang sein kann, wenn ein sehr großes JavaScript Bundle heruntergeladen werden muss. Ist JavaScript somit zur kostbarsten Ressource in der Entwicklung von Webanwendungen geworden, möchte man nun natürlich die ausgelieferte Größe des JavaScript Bundles so gering wie möglich halten.

Auch das Angular-Team nahm sich dieser Herausforderung gezielt an und entwickelte einen vollständig neuen Compiler: Ivy.

Während Ivy mit Angular 8 nur als Opt-in-Möglichkeit zur Verfügung stand, entweder durch das Setzen des --enable-ivy flag bei der Erstellung des Projekts oder mit Hilfe der compileroptions in der tsconfig.json, wird der neue Angular-Compiler per Default ab Version 9 ausgeliefert.

Neben der verringerten Bundle-Größe bringt Ivy eine Reihe von weiteren Optimierungen mit:

  • Schnellere Rebuilds durch die separate Kompilierung jeder einzelnen Datei ohne weitere Abhängigkeiten

  • Einfache Gestaltung des Debuggings durch Breakpoints im Template

  • Verbesserte Typprüfung in den Templates

Dieser Artikel soll einige der Optimierungen des neuen Compilers näher beleuchten und Aufschluss über die neuen Möglichkeiten geben, die uns nun als Angular-Entwickler mit Ivy zur Verfügung stehen. Mit Ivy führt das Core-Team nun schon den dritten Angular-Compiler in das Framework ein. In Version 2 wurde die Template-Engine als Compiler eingeführt und ab Version 4 die sogenannte ViewEngine, die nun von Ivy in Version 9 vollständig abgelöst wird.

Was ist ein Compiler?

Doch was genau ist ein Compiler eigentlich und welche Aufgaben verbergen sich hinter der Kompilierung des Angular-Codes?

In Angular schreiben wir einen sogenannten Templatecode, der definiert und deklariert, wie unsere Komponente später im Webbrowser gerendert werden soll. Der Compiler generiert hieraus die gesamte DOM-Struktur und verknüpft sie mit den Daten, die wir programmatisch mit Hilfe des Controller-Codes hineingeben. Im Folgenden sehen wir ein einfaches Beispiel eines Angular-Templatecode und dessen JavaScript-Codes, wie ihn ein Compiler generiert:

//Angular declarative Code <div>{{ title }}</div> //Instruction to create DOM const div = document.createElement('div') div.innerText = ctx.title

Mit Hilfe dieses JavaScript-Codes erhält unser Webbrowser nun genaue Anweisungen, wie er den HTML-Baum unserer Anwendung aufbauen soll. Da nicht jeder Browser bereits die aktuellste ECMAScript-Version ausführen kann, muss man gegebenenfalls die benötigte Version, zu der unser Angular-Code kompiliert werden soll, als sogenannte target-Version in der tsconfig.json setzen. Unter www.caniuse.com findet sich eine gute Übersicht der JavaScript-Features sowie der Webbrowser, die erstere bereits unterstützen.

Neben der Transformierung des Angular-spezifischen Codes in hoch effizienten und performanten JavaScript-Code bietet ein Compiler darüber hinaus noch einige weitere Funktionalitäten. So führt er beispielsweise auch eine statische Codeanalyse durch und stellt neben der Datentypüberprüfung sicher, dass ein Objekt auch tatsächlich die Attribute besitzt, die man dazu aufzurufen versucht. Für einen tieferen Einblick empfehle ich den auf der AngularConnect 2019 gehaltenen Talk „Deep Dive into the Angular Compiler“ von Alex Rickabaugh [1].

Der vom Compiler generierte Code wird zusätzlich komprimiert, minifiziert und unleserlich gemacht und als das bereits erwähnte JavaScript Bundle an den Webbrowser ausgeliefert. Einer der Hauptgründe für die Entwicklung eines neuen Angular-Compilers war die Verringerung der Größe ebendieses Bundles. Um also zu verstehen, warum es mit Angular Ivy gelingt, ein kleineres JavaScript Bundle zu generieren, müssen wir den generierten JavaScript-Code genauer unter die Lupe nehmen.

Angular 8 und 9 im Vergleich

Während man bei Angular 8 noch standardmäßig mit der ViewEngine als Angular-Compiler arbeiten musste und Ivy nur als Opt-in-Möglichkeit zur Verfügung stand, bekommt man nun mit dem ersten Release Candidate Ivy als Standardcompiler mitgeliefert. Wie man sein bestehendes Angular-Projekt auf die neue Release-Candidate-Version upgradet, kann in der offiziellen Angular-Dokumentation [2] nachgelesen werden.

Für einen ersten einfachen Vergleich habe ich ein neues Projekt mit Angular 9 angelegt und es jeweils einmal mit Ivy und einmal mit der ViewEngine...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang