React oder Web Components? Komponentenmodelle im Vergleich

Bausteine des modernen Web

Komponenten sind die Bausteine des modernen World Wide Web. Sie enthalten mit HTML, CSS und JavaScript alles, was benötigt wird, um Teile einer Webseite wiederverwendbar zu machen und vom Rest einer Webanwendung zu isolieren. Nun ist das Web seit jeher heterogen was die verwendeten Bibliotheken, Frameworks und Technologien angeht. Und so wundert es auch nicht, dass es zahlreiche verschiedene Komponentenmodelle gibt, die unterschiedlich stark verbreitet sind.

Simone Ritscher hat sich in ihrer Abschlussarbeit zwei bedeutende Komponentenmodelle im Detail angesehen und verglichen. Es handelt sich dabei um das Komponentenmodell von React, der weit verbreiteten Frontend-Bibliothek, und das Modell des nativen Browserstandards namens Web Components.

Forschungsfragen

Im Kern ihrer Arbeit stehen folgende Fragestellungen:

Bieten Web Components ähnliche Vorteile wie Frontend-Bibliotheken oder Frameworks?
In welchen Use Cases ist es besser auf etablierte Frameworks zu setzen und in welchen Situationen bieten Web Components Vorteile?
Welche Funktionen könnte der Standard in der Zukunft erfüllen?

Für den Vergleich wurden drei Komponenten mit React und Web Components entwickelt [1, 2]. Danach wurden sie anhand von Kriterien dreier Nutzergruppen analysiert: aus Sicht von Komponentenentwicklern, Komponentennutzern und Webseitenbesuchern. So wurden die Gemeinsamkeiten und Unterschiede sowie Vor- und Nachteile der beiden Ansätze untersucht.

Ergebnisse

Aus dem Vergleich ergibt sich, dass die größten Vorteile von Web Components in ihrer Wiederverwendbarkeit in anderen Anwendungen liegen. Sie sind plattformübergreifend nutzbar und bieten eine Trennung von Styling und Inhalten. Für den Entwickler können sie jedoch keine zu einem Frontend-Framework vergleichbaren Mehrwerte wie Komfortfunktionen bieten.

Der Vergleich zeigt dadurch, dass sich die verschiedenen Stärken von React und Web Components ergänzen können. Eine Kombination aus beiden ermöglicht es, Komponenten deklarativ zu entwickeln und in vielen Anwendungen wiederzuverwenden. Dies gilt nicht nur für die Kombination mit React, sondern auch für Vue, Angular und spezielle Web Component-Frameworks wie LitElement oder Stencil.

Veröffentlicht im Entwickler-Magazin

Da die Erkenntnisse der Arbeit für die Webentwickler-Community als Ganzes spannend sind, wurden die wesentlichen Ergebnisse der Arbeit in einem Fachartikel zusammengefasst und publiziert. Der Artikel findet sich in Ausgabe 5.2021 des Entwickler-Magazins im S&S-Verlag.