© StonePictures/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 verwendet werden sollen, oder wenn man eine gewisse Isolation benötigt. Wenn keines von beidem zutrifft, sind Web Components wahrscheinlich nicht die Lösung für das Problem, das man hat.

Daraus, dass Web Components besonders nützlich sind, wenn man sie wiederverwenden kann, ergibt sich auch, dass sie meist eher keine fachliche Schnittstelle haben. Denn fachliche Komponenten sind oftmals nicht in verschiedenen Kontexten sinnvoll. Aber wenn doch, wie es zum Beispiel bei einem Log-in der Fall ist, dann haben sie kein API nach außen.

Anforderungen an eine Web Component

Von jetzt an gehen wir bei Web Components von relativ „dummen“ Designelementen, insbesondere Formularelementen, aus. Für diese lassen sich generell drei Anforderungen ausmachen, die eigentlich immer für eine Komponente gelten:

  • Design: Optik ist ein wichtiger Teil einer Web Component. Denn sie haben eigentlich immer etwas mit Visualisierung im Browser zu tun.

  • UX: Web Components, insbesondere Formularelemente, dienen oftmals der Interaktion mit dem Benutzer. Entsprechend sollten Dinge wie Tab-Navigation oder kluges Autocomplete bei Eingaben bedacht werden.

  • Wartbarkeit: Wie für jedes Stück Software gilt insbesondere für eine mehrfach verwendete Komponente, dass sie gut wartbar sein soll. Das bedeutet: einfaches und kompaktes Public API, sinnvolles Schneiden von Funktionalität und Vermeidung unnötiger Komplexität.

Kompetenzen im Team

Die Anforderungen Design, UX und...

Neugierig geworden? Wir haben diese Angebote für dich:

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