© 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 von slice gelieferten Array direkt in das übergeordnete Array ein und vermeidet somit ein Array im Array. Diese Vorgehensweise veranschaulicht auch, dass Routinen nicht geänderte Teilbäume aus alten Immutables unverändert übernehmen können.

Danach verstauen wir das neue Array in der Ausgangsvariable this.flights und ändern somit seine Objektreferenz. Die Debug-Ausgaben am Ende veranschaulichen, dass eine Anwendung nun Änderungen am Array oder an den einzelnen Flügen sehr einfach entdecken kann, ein einziger Vergleich ...

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