© Excellent backgrounds/Shutterstock.com
Kolumne: EnterpriseTales

Web Components API: Machs dir nicht so schwer!


Die Enterprise-Welt ist geprägt von webbasierten Formularanwendungen. Wenn man sich dann überlegt, mehrfach in unterschiedlichen Anwendungen die gleichen UI-Komponenten zu verwenden, ist der Einsatz von Framework-agnostischen Web Components als technische Grundlage naheliegend. Web Components ermöglichen eine einfache Wiederverwendung und Integration, doch es lauern auch ein paar Stolpersteine, die es zu vermeiden gilt.

Warum und wofür Web Components?

Web Components umfassen eine Menge von Webstandards, die es ermöglichen, eigene HTML-Elemente zu definieren. Der große Vorteil von Web Components ist die Verwendung standardisierter Schnittstellen, um mit dem Rest der Webseite zu kommunizieren. Entsprechend lassen sie sich leicht in unterschiedliche Technologien integrieren. Komponenten aus Frameworks wie Angular oder React sind hingegen zunächst einmal in ihrem eigenen Kosmos gefangen.

Man kann die Standards, die Web Components umfassen, also als Integrations- und Isolationstechnologie betrachten. Primär gibt es zwei große Use Cases für den Einsatz von Web Components: zum einen für mehrfach wiederverwendbare Designelemente und Widgets, zum anderen zur Integration und Isolation von Teilbereichen innerhalb der Seite, z. B. zur Umsetzung von Micro Frontends

Der Einsatz von Web Components ist also dann sinnvoll, wenn man die gleichen Komponenten in verschiedenen Kontexten wiederverwenden möchte und sich diese eventuell sogar technologisch unterscheiden. Dabei kann es sich sowohl um unterschiedliche SPAs handeln als auch um serverseitig generiertes HTML oder auch Content aus einem CMS.

Da das Web Components API nach außen aus HTML und DOM-Strukturen besteht, trifft es genau den kleinsten gemeinsamen Nenner, mit dem eigentlich jedes Framework umgehen kann. Man spricht auch von Framework-agnostisch.

Das klingt doch super, dann kann man ja eigentlich alles mit Web Components bauen? Man kann das sicherlich tun, aber Web Components sind anders als Angular, React oder Vue kein umfassendes Framework, sondern erst einmal nur ein Standard zum Spezifizieren eigener HTML-Elemente. Web Components sind sehr low-Level, ein Compile Target, wenn man so will. Es gibt Frameworks wie LitElement [1] oder Stencil [2], die es einem sehr leichtmachen, Web Components umzusetzen. Aber auch diese Frameworks haben eher einen Fokus auf einzelne Komponenten als auf Applikationen im Ganzen. Web Components spielen ihre große Stärke wirklich dann aus, wenn sie in unterschiedlichen Kontexten ve...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang