Ursprung und Vorteile reaktiver JavaScript Frameworks für moderne Benutzeroberflächen

Reaktive JavaScript Frameworks – Trend in der Entwicklung von Benutzeroberflächen

Reaktives Verhalten, Virtual DOM und Komponenten sind die wesentlichen Bestandteile von reaktiven JavaScript Frameworks und entscheidende Stichworte für den modernen Softwareentwickler bei der Erstellung von Benutzeroberflächen. Richtungsweisend für die Etablierung dieses Trends können die zahlreichen Entwicklungen der letzten Jahre sein, welche auf eben diesen Frameworks basieren, darunter große Projekte wie Netflix, Facebook, Instagram, WhatsApp oder AirBnB.

Wieso man diesem Trend folgen sollte und welche Vorteile er mit sich bringt, möchten wir in diesem Blogartikel aufzeigen.

Ein eindeutiger Trend, doch wo liegt der Ursprung?

In den vergangenen Jahren dominierten Libraries beziehungsweise Frameworks, wie jQuery oder Mootools, den Bereich der Benutzeroberflächenentwicklung. Nun lässt sich jedoch ein eindeutiger Wechsel in Richtung reaktiver JavaScript Frameworks erkennen.

Bei der Entwicklung von großen Webanwendungen kommt es zunehmend darauf an, eine vernünftige Codestruktur zu erzeugen. Vergleicht man hier als Beispiel jQuery mit Vue oder React als Vertreter der reaktiven Frameworks, so stellt man fest, dass jQuery keine Komponenten bietet.

Mittels Komponenten ist ein Entwickler in der Lage, Struktursprachen wie HTML und CSS mit der JavaScript-Logik innerhalb einer Datei zu bündeln. Diese kann dann an beliebiger Stelle innerhalb der Anwendung mehrfach verwendet werden. Zusätzlich besteht die Möglichkeit, diese Komponenten problemlos innerhalb einer anderen Anwendung zu nutzen. Die variabel einsetzbaren Codestrukturen werden dann in übersichtlicher Art und Weise miteinander verknüpft, sodass am Ende die Darstellung über eine Baumstruktur möglich ist.

Der zentrale Vorteil von reaktiven JS-Frameworks ist somit die Reduktion der Komplexität der Codestruktur. Sekundäre Ziele sind dabei die bessere Verständlichkeit und somit auch leichtere Wartung von komplexen Codestrukturen.

Was ist eigentlich dieses reaktive Verhalten?

Innerhalb einer Komponente kann der Entwickler zum Beispiel Formulardaten definieren, welche automatisch über das Model Binding der Logik zugänglich gemacht werden können. Bei jQuery muss an dieser Stelle mit Events gearbeitet werden, bei Vue und Co. ist dies praktisch nicht notwendig.

Zusätzlich gibt es neue Libraries, wie zum Beispiel Elements für Vue. Durch Elements kann ein Entwickler vorgefertigte Komponenten in seine Anwendung implementieren. Diese verfügen damit schon über eine gewisse Logik und sind auch komplett grafisch aufgearbeitet.

In Puncto Geschwindigkeit können reaktive JavaScript Frameworks natürlich auch bestehen, da mindestens ein virtuelles Strukturabbild des HTML-Dokuments im Speicher vorgehalten wird. Dadurch muss nicht das komplette HTML-Dokument neu geladen werden, wenn sich ein Teil dieser Struktur ändert. Der virtuelle DOM prüft selbstständig, welche Bereiche im Dokument neu gerendert werden müssen und imitiert genau dies automatisch. Damit ist die clientseitige Manipulation deutlich effizienter geworden.

Viele Vorteile rechtfertigen die höhere Entwicklungszeit

Fassen wir die zahlreichen Vorteile von reaktiven JavaScript Frameworks zusammen:

  • Wiederverwendbarer Code durch Komponenten

  • Bessere Wartbarkeit der Anwendung

  • Schnellerer Zugriff auf Daten dank Model Binding und reaktiven Verhaltens

  • Effizientere Manipulation von HTML-Strukturen

  • Höhere Geschwindigkeit

Natürlich besitzt jede neue Technologie auch ein oder zwei Schattenseiten. Im Fall von Vue ist dies der doch spürbar höhere Anspruch für die clientseitige Entwicklung. Das führt letztlich zu einer längeren Entwicklungszeit für eine Anwendung.

Zusammenfassend kann man jedoch sagen, dass der Trend eindeutig in Richtung reaktiver JavaScript Frameworks zeigt, da selbst das World Wide Web Consortium W3C an einer sehr analogen Technologie namens „Shadow DOM“ arbeitet.