Webkomponenten: die geheime Zutat für das Web

Web Components bei der I/O 2019

Arthur Evans

Auf der Google I/O 2019 sprachen Kevin Schaaf vom Polymer Project und Caridy Patiño von Salesforce über den Status von Webkomponenten.

Wie beliebt sind Webkomponenten?

Wenn Sie heute das Web genutzt haben, haben Sie wahrscheinlich Webkomponenten verwendet. Laut unseren Schätzungen werden heutzutage etwa 5 bis 8 % aller Seitenladevorgänge mit einer oder mehreren Webkomponenten erzielt. Das macht Webkomponenten zu einer der erfolgreichsten neuen Webplattformfunktionen der letzten fünf Jahre.

Sie finden Webkomponenten auf Websites, die Sie wahrscheinlich täglich nutzen, z. B. YouTube und GitHub. Sie werden auch auf vielen Nachrichten- und Publisher-Websites verwendet, die mit AMP erstellt wurden. AMP-Komponenten sind auch Webkomponenten. Und viele Unternehmen setzen auch auf Webkomponenten.

Was sind Webkomponenten?

Was sind Webkomponenten? Die Spezifikationen für Webkomponenten umfassen eine Reihe von APIs auf niedriger Ebene, mit denen Sie die im Browser integrierten HTML-Tags erweitern können. Webkomponenten bieten Folgendes:

• Eine gängige Methode zum Erstellen einer Komponente (mithilfe von standardmäßigen DOM APIs)
• Eine gängige Methode, Daten zu empfangen und zu senden (mithilfe von Properties/Ereignissen).

Abgesehen von dieser Standardoberfläche sagen die Standards nichts darüber aus, wie eine Komponente tatsächlich implementiert wird:

• Das Rendering-Modul, mit dem das DOM erstellt wird
• Wie sie sich bei Änderungen an Eigenschaften oder Attributen automatisch aktualisiert.

Mit anderen Worten: Webkomponenten teilen dem Browser mit, wann und wo eine Komponente erstellt werden soll, aber nicht wie.

Autoren können wie in React funktionale Renderingmuster auswählen, um ihre Webkomponenten zu erstellen, oder deklarative Vorlagen wie in Angular oder Vue verwenden. Als Autor haben Sie völlige Freiheit, die Technologie auszuwählen, die Sie in der Komponente verwenden, und gleichzeitig die Interoperabilität aufrechterhalten.

Wozu sind Webkomponenten gut?

Der Hauptunterschied zwischen Webkomponenten und proprietären Komponentensystemen ist die Interoperabilität. Aufgrund ihrer Standardoberfläche können Sie Webkomponenten überall dort verwenden, wo Sie ein integriertes Element wie <input> oder <video> verwenden würden.

Da sie als echtes HTML ausgedrückt werden können, können sie von allen gängigen Frameworks gerendert werden. So können Ihre Komponenten auf breiterer Ebene und in vielfältigeren Anwendungen genutzt werden, ohne die Nutzer an ein einziges Framework binden zu müssen.

Da es sich bei der Komponentenoberfläche um eine Standardoberfläche handelt, können Webkomponenten, die mit verschiedenen Bibliotheken implementiert wurden, auf derselben Seite gemischt werden. Das trägt dazu bei, Ihre Anwendungen zukunftssicher zu machen, wenn Sie Ihren Technologie-Stack aktualisieren. Anstelle eines riesigen Schrittwechsels zwischen einem Framework, bei dem Sie alle Ihre Komponenten ersetzen, können Sie Ihre Komponenten nacheinander aktualisieren.

Wer nutzt Webkomponenten?

Aus all diesen Gründen sind Webkomponenten in vielen verschiedenen Anwendungsfällen sehr erfolgreich. Drei Anwendungsfälle sind besonders beliebt: Content-Websites, Designsysteme und Unternehmensanwendungen.

Websites im Display-Netzwerk

Webkomponenten sind die perfekte Technologie zur schrittweisen Verbesserung von Inhalten, da sie bereits von unzähligen CMS-Systemen als Standard-HTML ausgegeben werden können.

AMP ist ein gutes Beispiel dafür, wie schnell und einfach Webkomponenten zur Bereitstellung von Inhalten in die Infrastruktur der Publisher-Branche integriert werden können.

Designsysteme

Immer mehr Unternehmen vereinheitlichen ihre Präsentation mithilfe eines Designsystems. Dabei handelt es sich um eine Reihe von Komponenten und Richtlinien, die das gemeinsame Erscheinungsbild der Websites und Anwendungen eines Unternehmens definieren. Auch Webkomponenten sind hier sehr gut geeignet.

Oft müssen Designschaffende mit vielen Teams konfrontiert werden, die ihre eigenen Versionen der Designsystemkomponenten auf der Grundlage von React, Angular und allen anderen Frameworks erstellen, anstatt einen einzigen Satz kanonischer Komponenten zu haben.

Webkomponenten sind die Antwort – ein wirklich einmal geschriebenes, überall ausgeführtes Komponentensystem, das App-Teams dennoch die Freiheit gibt, das Framework ihrer Wahl zu verwenden.

Unternehmen wie ING, EA und Google implementieren die Designsprache ihres Unternehmens in Webkomponenten.

Enterprise: Webkomponenten bei Salesforce

Als sichere, zukunftssichere Technologie für Webkomponenten, die in Unternehmen standardisiert werden sollten, werden ebenfalls große Fortschritte gemacht. Caridy Patiño, Architektin für die UI-Plattform von Salesforce, erklärte, warum sie ihre UI-Plattform mithilfe von Webkomponenten entwickelten.

Salesforce umfasst eine Reihe von Anwendungen, von denen viele auf Akquisitionen zurückzuführen sind. Jedes davon kann auf einem eigenen Technology Stack laufen. Da sie auf verschiedenen Stacks aufgebaut sind, ist es schwer, ihnen das gleiche Erscheinungsbild zu verleihen. Darüber hinaus können Kunden mithilfe von Salesforce mithilfe der Salesforce-Plattform eigene benutzerdefinierte Anwendungen erstellen. Idealerweise sollten die Komponenten also auch von externen Entwicklern verwendet werden können.

Salesforce hat eine Reihe von Anforderungen der Kunden identifiziert:

• Standardlösungen statt proprietärer Lösungen. So ist es einfacher, erfahrene Entwickler zu finden und neue Entwickler schneller anzuziehen.
• Gängiges Komponentenmodell. Die Anpassung jeder Salesforce-Anwendung funktioniert also auf die gleiche Weise.

Außerdem wurde festgestellt, was Kunden nicht wollten:

• Wichtige Änderungen an Komponenten und Anwendungen Mit anderen Worten: Abwärtskompatibilität war ein Muss.
• Alte Technologie nutzen und sich nicht weiterentwickeln
• In einem ummauerten Garten feststecken.

Die Verwendung von Webkomponenten als Grundlage für die neue UI-Plattform erfüllt all diese Anforderungen. Das Ergebnis sind die neuen Lightning Web Components.

Erste Schritte mit Webkomponenten

Es gibt viele tolle Möglichkeiten für den Einstieg in Webkomponenten.

Wenn Sie eine Webanwendung erstellen, sollten Sie erwägen, einige der vielen handelsüblichen Webkomponenten zu verwenden. Dies sind nur einige Beispiele:

• Google bietet ein eigenes Material-Design-System als Webkomponenten an: Material Web Components.
• Wired Elements bestehen aus einer Reihe cooler Webkomponenten mit einem skizzenhaften, handgezeichneten Design.
• Es gibt großartige spezielle Webkomponenten wie <model-viewer>, die Sie in jede App einbinden können, um 3D-Inhalte hinzuzufügen.

Wenn Sie ein Designsystem für Ihr Unternehmen entwickeln oder eine einzelne Komponente oder Bibliothek verkaufen, die in jeder Umgebung verwendet werden soll, ziehen Sie in Betracht, Ihre Komponenten mithilfe von Webkomponenten zu entwickeln. Sie können die integrierten Webkomponenten-APIs verwenden. Da diese sich jedoch auf einer sehr niedrigen Ebene befinden, gibt es eine Reihe von Bibliotheken, die den Prozess vereinfachen.

Wenn Sie eigene Komponenten erstellen möchten, können Sie sich LitElement ansehen, eine von Google entwickelte Basisklasse für Webkomponenten, die ähnlich wie React ein praktisches Rendering ermöglicht.

Weitere mögliche Tools und Bibliotheken:

• Stencil ist ein Framework, das vor allem auf Webkomponenten basiert. Es enthält einige beliebte Framework-Funktionen wie JSX und TypeScript.
• Mit Angular-Elementen können Sie Angular-Komponenten als Webkomponenten umschließen.
• Mit dem Web Component-Wrapper von Vue.js können Vue-Komponenten als Webkomponenten verpackt werden.

Weiteres Infomaterial:

• open-wc.org bietet hilfreiche Informationen zu den ersten Schritten sowie Tipps und Standardkonfigurationen für Build- und Entwicklungstools.
• Web Fundamentals bietet Einführungen zu den grundlegenden APIs für Webkomponenten und Best Practices für das Entwerfen von Webkomponenten.
• MDN bietet Referenzdokumente für die Webkomponenten-APIs sowie einige Anleitungen. \

Hero-Image von Jason Tuinstra bei Unsplash

Hinweis des Bearbeiters: Das Nutzungsdiagramm für benutzerdefinierte Elemente wurde aktualisiert und zeigt nun die vollständigen monatlichen Nutzungsdaten aus chromestatus.com an. In einer früheren Version dieses Beitrags war ein Diagramm mit einer Übersicht über die letzten sechs Monate zu sehen. Die V0- und V1-Reihen im ursprünglichen Diagramm wurden gestapelt. Sie werden jetzt als nicht gestapelt mit einer Gesamtlinie angezeigt, um Unklarheiten zu beseitigen. Der abrupte Sprung Ende 2017 ist auf eine Änderung im Datenerfassungssystem für chromestatus.com zurückzuführen. Diese Änderung wirkte sich auf die Statistiken für alle Funktionen der Webplattform aus und führte zu genaueren Messungen.