Seit geraumer Zeit wird für Angular der Ivy-Renderer entwickelt, der kleinere Bundles bei verbesserter Geschwindigkeit verspricht.
Mit Angular 9 wird der Ivy-Renderer der neue Default-Renderer und für den produktiven Einsatz empfohlen. Wir beschäftigen uns in diesem Beitrag damit, was Ivy in Angular 9 für die Entwicklung bedeutet.

Ivy ist der neue Renderer für Angular und somit die dritte Generation. Dank Ivy sind noch stärkere Optimierungen möglich, um z.B. auf Basis von Angular Elements WebComponents zu erzeugen, die autark lauffähig sind und somit keine Angular Framework-Abhängigkeit mehr mitbringen.
Damit skaliert Angular als Framework nun auch besser „nach unten“, wenn es um die Entwicklung einzelner Komponenten und Funktionalitäten statt umfangreicher und komplexer Anwendungen geht. In Angular Version 9 ist Ivy nun auch der Standard und der seit Angular Version 4 als „deprecated“ gekennzeichnete Renderer der ersten Generation wurde entfernt.
Angular Anwendungen bestehen in der Regel nicht nur aus selbst geschriebenem Code, für viele Aufgaben werden Third-Party-Bibliotheken genutzt. Um ein vorgefertigtes Set an UI- und Layout-Komponenten zu erhalten, können wir beispielsweise Angular-Material einbinden.
Damit Bibliotheken, selbst wenn sie noch nicht mit dem Ivy-Renderer erzeugt wurden, trotzdem von diesem Ivy-Renderer verarbeitet werden können, gibt es den Angular-Compatibility-Compiler “ngcc”. Wird ein Angular-CLI Projekt mit Angular 9 angelegt oder auf Angular 9 geupdatet, so wird zunächst ein NPM-Postinstall-Script in der package.json angelegt, wie im folgenden Listing zu sehen.

Dieses wird dann beim Update - oder späteren Install-Vorgängen - auch direkt ausgeführt, um alle Abhängigkeiten, die Angular-Logik enthalten, auf Ivy anzupassen. Wichtig ist dabei im Kontext von Ivy, dass Anbieter von Libraries auf den Einsatz von Ivy vorläufig verzichten sollten, um hier abwärtskompatibel zu bleiben. Denn nicht jede Anwendung wird von heute auf morgen zu Angular 9 migriert werden.

Ivy enthält auch schon einen Vorgeschmack auf weitere Entwicklungen im Angular-Framework: In Angular 9 ist das Bootstrapping um einen Parameter erweitert worden, mit dem das Verhalten der Change-Detection auf ein asynchrones Verfahren umgestellt werden kann. Das hat den Vorteil, dass durch eine Interaktion oder einen Event mehrfach ausgelöstes Change-Detection nur noch zu einem einzelnen Change-Detection Durchlauf während des nächsten animationFrame-Callbacks durchgeführt wird, wodurch sich entsprechend die Performance der Anwendung verbessert. Typische Ursache für solche redundanten Change-Detection Aufrufe sind Events, die im DOM „bubblen“ und dabei an mehreren Komponenten einen entsprechenden Handler aufrufen.
Die Konfiguration erfolgt durch das Bootstrap-Property ngZoneEventCoalescing das im Default auf false ist.

Benötigen Sie Unterstützung in Ihrem Angular Projekt - von Schulung über Code-Review bis konkreter Unterstützung bei Architektur, Umsetzung oder Migrationen stehen wir für Sie bereit. Sprechen Sie uns unverbindlich an!

Unsere Angular Schulungen: