JavaScript: Die Rendering-Engines von React, Angular und Ember im Vergleich

Inhaltsverzeichnis

Moderne JavaScript-Frameworks erlauben Entwicklern, die grafische Oberfläche einer Anwendung abhängig von ihrem Zustand zu beschreiben. Ändert sich der Anwendungszustand, genügt es, dem Framework mitzuteilen, wie die Oberfläche für diesen neuen Zustand aussehen soll. Für das Überführen der Anzeige von einem in den nächsten Zustand ist das Framework zuständig. Eine solche deklarative Programmierung reduziert den Arbeitsaufwand für Entwickler im Vergleich zu einem imperativen Vorgehen deutlich. Sie stellt die Frameworks jedoch vor die Herausforderung, das Aktualisieren der Oberfläche ausreichend performant auszuführen.

Mit dem Aufstieg von React wurde das Konzept Virtual DOM als Lösung dieses Problems populär, das auch andere Frameworks wie Angular, Ember und Vue schnell adaptierten. Lange Zeit galt es als Stand der Technik. In den letzten Jahren gab es jedoch Fortschritte: Mit der Glimmer VM führte Ember eine virtuelle Maschine ein, die zu Opcodes kompilierte Templates ausführt. Angular hat mit Ivy den Overhead der Rendering-Engine insbesondere für kleine Anwendungen deutlich reduziert. Und React überholte mit Fiber grundlegend das Konzept des Virtual DOM.

Zum Veranschaulichen des Performanceproblems dient eine einfache Rendering-Engine, die eine Funktion render und einen Anfangszustand bei der Initialisierung erwartet. Diese Funktion erlaubt Entwicklern, die grafische Oberfläche abhängig vom Anwendungszustand zu beschreiben. Sie bekommt den aktuellen Zustand als Argument übergeben und gibt HTML als String zurück. Entwickler können über die Methode setState die Rendering-Engine über eine Änderung des Anwendungszustands informieren. Diese Methode ruft anschließend erneut die Funktion render mit dem neuen Zustand auf und aktualisiert das DOM basierend auf deren Rückgabe.

Das war die Leseprobe unseres heise-Plus-Artikels "JavaScript: Die Rendering-Engines von React, Angular und Ember im Vergleich". Mit einem heise-Plus-Abo können sie den ganzen Artikel lesen und anhören.