© KoDi Art/Shutterstock.com
Performanceoptimierung mit „OnPush“

Angular anschieben


Mit der Strategie „OnPush“ kann Angular zielgerichtet herausfinden, welche Datenbindungen zu aktualisieren sind. Damit dieser äußerst performante Modus funktioniert, muss die Anwendung Immutables und Observables einsetzen.

Die Datenbindung in Angular ist sehr schnell. Der Angular-Compiler erzeugt beispielsweise für Datenbindungen Code, der sich von der für JavaScript verantwortlichen VM im Browser besonders gut optimieren lässt. Solche sogenannten monomorphen Codestrecken erreichen ungefähr die Geschwindigkeit von nativem C-Code.

Damit sich alle JavaScript-Objekte ohne Weiteres binden lassen, nutzt Angular jedoch standardmäßig Dirty Checking. Das bedeutet, dass jeweils nach dem Ausführen von Event Handlern alle Datenbindungen auf Änderungen geprüft werden. Genau hier setzt die Datenbindungsstrategie OnPush an. In diesem Modus findet Angular zielgerichtet heraus, welche Bindungen zu aktualisieren sind. Damit diese Strategie funktioniert, muss die Anwendung besondere Datenstrukturen verwenden, nämlich Immutables und Observables. In diesem Artikel gehe ich auf OnPush ein und zeige, wie sich Immutables und Observables einsetzen lassen.

Immutables

Der Name lässt es schon vermuten: Immutables sind Datenstrukturen, die nicht veränderbar sind. Ändern sich die damit beschriebenen Objekte, ersetzt die Anwendung das gesamte Immutable durch ein neues. Das bedeutet im Umkehrschluss aber auch, dass Angular nur noch Objektreferenzen und nicht alle einzelnen Properties auf Änderungen prüfen muss.

Die Methode delay in Listing 1 veranschaulicht den Umgang mit Immutables. Ihre Aufgabe ist es, für den ersten Flug eines Arrays eine Verspätung von 15 Minuten zu vermerken. Zuerst definiert das Beispiel Variablen, die auf das gesamte Array, auf den betroffenen Flug sowie auf dessen Datum verweisen. Sie nennen sich oldFlights, oldFlight und oldFlightDate.

Die danach eingerichteten Variablen repräsentieren den neuen Zustand. Das Objekt newFlightDate verweist auf das geänderte Datum. Dieses Datum übernimmt newFlight gemeinsam mit den restlichen Werten von oldFlight. Zusätzlich verweist newFlights auf ein neues Array, das sich aus dem neuen Flug und den restlichen nicht geänderten Flügen zusammensetzt.

Um an diese Flüge zu kommen, nutzt delay die Arraymethode slice. Da slice ein Array mit den ausgewählten Einträgen zurückliefert, nutzt das Beispiel an dieser Stelle den aus drei Punkten bestehenden Spread-Operator von ECMAScript 2015. Er fügt an dieser Stelle die Einträge aus dem vo...

Neugierig geworden?

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