iX 5/2021
S. 96
Wissen
JavaScript

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

Schnell gezeichnet

Jeldrik Hanschke

Entscheidend für die Performance komplexer Webanwendungen ist die Geschwindigkeit, mit der die grafische Oberfläche dar­gestellt wird. React, Angular und Ember nutzen hier unterschied­liche Ansätze.

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 impera­tiven 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.

Kommentieren