JavaScript: Die Rendering-Engines von React, Angular und Ember im Vergleich
React, Angular und Ember nutzen unterschiedliche Ansätze zur Darstellung grafischer Oberflächen in Webanwendungen. Wir erklären, was die drei unterscheidet.
- Jeldrik Hanschke
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.
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Proxmox VE: Was es kann und was man dafür braucht
Smart-Home-Zentralen im Vergleich: Amazons Echo Hub gegen Home Assistant
Prepaid, Debit, Credit: Wie Sie die passende Kreditkarte finden
DNS-Leck: Browser ignorieren Windows-Konfiguration
High-End-Smartphones im Kameravergleich: Wettkampf um die beste Bildqualität
Karrierewechsel: Warum sich ein Informatikstudium auch für Quereinsteiger lohnt
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Proxmox VE: Was es kann und was man dafür braucht
Smart-Home-Zentralen im Vergleich: Amazons Echo Hub gegen Home Assistant
Prepaid, Debit, Credit: Wie Sie die passende Kreditkarte finden
DNS-Leck: Browser ignorieren Windows-Konfiguration
High-End-Smartphones im Kameravergleich: Wettkampf um die beste Bildqualität