Komponentenarchitekturen im Vergleich
React oder Web Components?
Dass Webanwendungen sinnvoll in Komponenten aufgeteilt werden können, ist allseits bekannt. Das zeigen verbreitete Frontend-Frameworks und Bibliotheken wie React, Angular und Vue. Doch für die Komponentenaufteilung allein benötigt man nicht unbedingt ein Framework. Mit den Web-Component-Standards können auch nativ Komponenten im Browser umgesetzt werden.
Die Frontend-Frameworks und Bibliotheken Angular, Vue und React bieten alle ihre eigene Variante des gleichen Konzepts: Eine Anwendung in wiederverwendbare, anpassbare Komponenten aufzuteilen. Zusätzlich liefern sie weitere Funktionen, die sich von Framework zu Framework unterscheiden. Der Kern jeder Anwendung bleiben jedoch die Einzelteile, aus denen sie sich komponieren lässt. Diese Komponenten sind eigenständig, das heißt ihre Struktur, Styling und Logik ist separat von der Anwendung selbst. Dadurch lassen sie sich deutlich einfacher als in klassischen HTML-Elementen einer Webseite neu platzieren und wiederverwenden. Außerdem machen eindeutig benannte Komponenten eine Anwendung lesbarer und verständlicher.
Diese angestrebte Aufteilung lässt sich aber nicht nur durch Frameworks realisieren. Der native Ansatz dafür nennt sich Web Components. Web Components setzen sich aus mehreren Standards zusammen, denen lange der weitläufige Browsersupport fehlte. Doch seit 2020 unterstützen alle aktuellen Browser von Google, Mozilla, Apple und Microsoft die Web-Component-Standards, die bereits in einschlägigen Artikeln näher beschrieben wurden [3], [4]. Kann damit ein neues Zeitalter der nativen Komponenten eingeleitet werden? Werden beliebte Frontend-Bibliotheken und Frameworks damit etwa obsolet? Um dieser Frage auf den Grund zu gehen, soll in diesem Artikel ein vertiefender Blick auf die Komponentenmodelle von React und Web Components geworfen werden, indem sie aus Sicht zweier Nutzergruppen analysiert werden. Drei Komponenten wurden dafür entwickelt, die anhand einer Reihe von Kriterien näher unter die Lupe genommen werden. Die Wahl fiel dabei auf React, da die weit verbreitete Frontend-Bibliothek – im Vergleich zu den Frameworks Vue und Angular – einen geringeren Funktionsumfang aufweist. Web Components bieten wenige Komfortfunktionen, deshalb wäre ein Vergleich mit einem großen Framework von vornherein ein Kampf David gegen Goliath. Ziel dieses Vergleichs ist es primär, zu einem besseren Verständnis der Ansätze beizutragen.
Web Components
Die Verwendung von Web Components ist noch immer nicht übermäßig verbreitet. Daher soll zu Beginn kurz erklärt sein, aus welchen Standards sie sich überhaupt zusammensetzen:
Custom Elements, um eigene HTML-Tags mit vorgefertigtem Verhalten zu definieren (Listing 1)
Shadow DOM, um die Inhalte und das Styling einer Komponente vom Rest der Anwendung abzukapseln (Listing 2)
HTML-Templates, um wiederverwendbare Templates für die Komponenten bereitzustellen (Listing 3)
Listing 1
<head>
<script>
//Registrieren eines Custom Elements
window.customElements.define(
"my-component", // Tag-Name
class extends HTMLElement{…}); //Komponentenklasse
</script>
</head>
<body>
<!-- Einsetzen einer Komponente -->
<my-component></my-component>
</body>Listing 2
<script>
window.customElements.define('my-component', class extends HTMLElement {
constructor() {
super();
//Erstellen eines Shadow DOM
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = "<div>{…}</div>";
}
})
</script>Listing 3
<template>
//Benutzerdefinierte Inhalte sind mit Slots möglich
<slot>Platzhalter Content</slot>
</template>React
React bietet demgegenüber zwei verschiedene Möglichkeiten, um Komponenten darzustellen:
Als Funktion, die einen Parameter props erhält und ein React-Element zurückgibt (Listing 4)
Als Klasse, die von React.Component erbt und eine Render-Methode implementiert, die ein React-Element zurückgibt (Listing 5)
Listing 4
function Component(props){
return <div>This is a function component</div>
}Listing 5
class Component extends React.Component{
render(){
return <div>This is a Class Component</div>
}
}In den Codebeispielen in Listing 4 und 5 zeigt sich gleich eine Besonderheit von React: Die React-Elemente werden direkt in HTML-ähnlichem Code geschrieben. Ermöglicht wird das durch die Erweiterung JSX (Java-Script Syntax Extension / JavaScript XML). Die daraus resultierende Vermischung von Markup und Logik kann einerseits als Erleichterung angesehen werden, Architekturpuristen sind davon jedoch nicht immer überzeugt. Weiteren Komfort bietet React mit dem sogenannten Virtual DOM Pattern. Dieses stellt sicher, dass das Document Object Model (DOM) mit dem gewünschten Zustand der Anwendung übereinstimmt. Der Entwickler muss DOM-Änderungen so nicht immer selbst anstoßen.
Komponenten für den Vergleich
Um die Komponentenmodelle an realen Beispielen miteinander vergleichen zu können, wurden drei Komponenten für eine fiktive Webseite eines Urlaubsziels entwickelt. Die erste Komponente stellt eine Karte dar, die die Anfahrt zu einem festgelegten Ziel von einem frei wählbaren Startpunkt darstellt. Eine weitere Komponente zeigt Termine in einem Kalender an. Die letzte Komponente wiederum stellt Wetterinformationen an einer kleinen Auswahl von Tagen dar. Der Quellcode der Komponenten sowie der Link zu einer Webseite, die die Komponenten real einbindet, sind auf GitHub zu finden [7], [8].
Abb. 1: Entwickelte Komponenten für den VergleichIm Folgenden werden die Ansätze auf Basis verschiedener Kriterien verglichen, die als relevant für die Nutzergruppen der Komponentenentwickler und Komponentennutzer eingeschätzt werden. Diese sind in aller...