© Matej Kotula/Shutterstock.com
JavaScript Kompendium
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?

Martina Kraus


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 ein...

JavaScript Kompendium
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?

Martina Kraus


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 ein...

Neugierig geworden?


    
Loading...

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