Webkomponenten bei der I/O 2019
Auf der Google I/O 2019 haben Kevin Schaaf vom Polymer-Projekt und Caridy Patiño von Salesforce über den Stand der Webkomponenten gesprochen.
Wie beliebt sind Webkomponenten?
Wenn Sie das Internet heute genutzt haben, haben Sie wahrscheinlich auch Webkomponenten verwendet. Unseren Schätzungen zufolge werden bei etwa 5 bis 8 % aller Seitenladevorgänge heute eine oder mehrere Webkomponenten verwendet. Webkomponenten sind damit eine der erfolgreichsten neuen Funktionen der Webplattform, die in den letzten fünf Jahren eingeführt wurden.
Webkomponenten finden Sie auf Websites, die Sie wahrscheinlich täglich verwenden, z. B. YouTube und GitHub. Sie werden auch auf vielen Nachrichten- und Verlagswebsites verwendet, die mit AMP erstellt wurden. AMP-Komponenten sind auch Webkomponenten. Auch viele Unternehmen setzen Webkomponenten ein.
Was sind Webkomponenten?
Was sind also Webkomponenten? Die Webkomponentenspezifikationen bieten eine Reihe von APIs auf niedriger Ebene, mit denen Sie die integrierten HTML-Tags des Browsers erweitern können. Webkomponenten bieten folgende Vorteile:
- Eine gängige Methode zum Erstellen einer Komponente (mithilfe von Standard-DOM-APIs).
- Eine gängige Methode zum Empfangen und Senden von Daten (mithilfe von Properties/Ereignissen).
Abgesehen von dieser Standardschnittstelle sagen die Standards nichts darüber aus, wie eine Komponente tatsächlich implementiert wird:
- Welches Rendering-Engine zum Erstellen des DOM verwendet wird.
- Wie es sich aufgrund von Änderungen an seinen Eigenschaften oder Attributen selbst aktualisiert.
Mit anderen Worten: Webkomponenten geben dem Browser an, wann und wo eine Komponente erstellt werden soll, aber nicht wie.
Entwickler können funktionale Rendering-Muster wie React verwenden, um ihre Webkomponenten zu erstellen, oder deklarative Vorlagen wie in Angular oder Vue. Als Autor haben Sie die freie Wahl der Technologie, die Sie in der Komponente verwenden, und können gleichzeitig die Interoperabilität beibehalten.
Wozu eignen sich Webkomponenten?
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 in einem breiteren Anwendungsbereich und in einer größeren Vielfalt von Anwendungen verwendet werden, ohne dass Nutzer an ein bestimmtes Framework gebunden sind.
Da die Komponentenoberfläche standardisiert ist, können Webkomponenten, die mit verschiedenen Bibliotheken implementiert wurden, auf derselben Seite kombiniert werden. So können Sie Ihre Anwendungen zukunftssicher machen, wenn Sie Ihren Tech-Stack aktualisieren. Anstatt ein großes Update zwischen einem Framework und einem anderen durchzuführen, bei dem Sie alle Komponenten ersetzen, können Sie Ihre Komponenten einzeln aktualisieren.
Wer verwendet Webkomponenten?
Aus all diesen Gründen sind Webkomponenten in einer Vielzahl von Anwendungsfällen sehr erfolgreich. Drei Anwendungsfälle sind besonders beliebt: Inhaltswebsites, Designsysteme und Unternehmensanwendungen.
Websites im Display-Netzwerk
Webkomponenten sind die perfekte Technologie für die progressive 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 in die Infrastruktur der Verlagsbranche für die Bereitstellung von Inhalten integriert werden können.
Designsysteme
Immer mehr Unternehmen vereinheitlichen ihre Präsentation mithilfe eines Designsystems – einer Reihe von Komponenten und Richtlinien, die das gemeinsame Erscheinungsbild der Websites und Anwendungen einer Organisation definieren. Auch Webkomponenten eignen sich hier hervorragend.
Häufig müssen Designer mit vielen Teams zurechtkommen, die ihre eigenen Versionen der Designsystemkomponenten auf React, Angular und allen anderen Frameworks erstellen, anstatt eine einzige Reihe kanonischer Komponenten zu haben.
Webkomponenten sind die Lösung: Ein Komponentensystem, das wirklich einmal geschrieben und überall ausgeführt werden kann und 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
Webkomponenten sind auch in Unternehmen auf dem Vormarsch, da sie eine sichere, zukunftssichere Technologie sind, die standardisiert werden kann. Caridy Patiño, Architektin der UI-Plattform von Salesforce, erklärte, warum sie ihre UI-Plattform mit Webkomponenten erstellt hat.
Salesforce ist eine Sammlung von Anwendungen, von denen viele durch Akquisitionen erworben wurden. Jedes davon kann auf einem eigenen Technologie-Stack ausgeführt werden. Da sie auf verschiedenen Stacks basieren, ist es schwierig, ihnen allen dasselbe Erscheinungsbild zu verleihen. Außerdem können Kunden mit Salesforce eigene benutzerdefinierte Anwendungen auf der Salesforce-Plattform erstellen. Idealerweise sollten die Komponenten also auch von externen Entwicklern verwendet werden können.
Salesforce hat eine Reihe von Anforderungen der Kunden an die Plattform identifiziert:
- Standardlösungen statt proprietäre Lösungen, damit es einfacher ist, erfahrene Entwickler zu finden und neue Entwickler schneller einzuarbeiten.
- Ein gemeinsames Komponentenmodell – die Anpassung jeder Salesforce-Anwendung funktioniert also auf die gleiche Weise.
Außerdem identifizierte er einige Dinge, die Kunden nicht wollten:
- Breaking Changes an ihren Komponenten und Apps. Mit anderen Worten: Abwärtskompatibilität war ein Muss.
- Sie sind an alte Technologien gebunden und können sich nicht weiterentwickeln.
- In einem ummauerten Garten gefangen sein.
Die Verwendung von Webkomponenten als Grundlage für die neue UI-Plattform erfüllte all diese Anforderungen. Das Ergebnis sind die neuen Lightning Web Components.
Erste Schritte mit Webkomponenten
Es gibt viele gute Möglichkeiten, mit Webkomponenten zu beginnen.
Wenn Sie eine Webanwendung entwickeln, sollten Sie einige der vielen verfügbaren Webkomponenten verwenden. Dies sind nur einige Beispiele:
- Google bietet sein eigenes Material Design-System als Webkomponenten an: Material Web Components.
- Die Wired Elements sind eine coole Sammlung von Webkomponenten mit einem skizzenhaften, handgezeichneten Look.
- Es gibt großartige Webkomponenten für spezielle Zwecke wie
<model-viewer>, die Sie in jede App einfügen können, um 3D-Inhalte hinzuzufügen.
Wenn Sie ein Designsystem für Ihr Unternehmen entwickeln oder eine einzelne Komponente oder Bibliothek anbieten, die in jeder Umgebung verwendet werden soll, sollten Sie Ihre Komponenten mit Webkomponenten erstellen. Sie können die integrierten Webkomponenten-APIs verwenden, die jedoch ziemlich niedrig sind. Es gibt jedoch eine Reihe von Bibliotheken, die den Prozess vereinfachen.
Wenn Sie mit dem Erstellen eigener Komponenten beginnen möchten, können Sie sich LitElement ansehen, eine von Google entwickelte Basisklasse für Webkomponenten, die ein ähnliches funktionales Rendering wie React bietet.
Weitere Tools und Bibliotheken:
- Stencil ist ein Framework, das auf Webkomponenten basiert. Es enthält mehrere beliebte Framework-Funktionen wie JSX und TypeScript.
- Angular Elements bietet eine Möglichkeit, Angular-Komponenten als Webkomponenten zu verpacken.
- Der Webkomponenten-Wrapper von Vue.js bietet eine Möglichkeit, Vue-Komponenten als Webkomponenten zu verpacken.
Weitere Ressourcen:
- open-wc.org bietet gute Informationen für den Einstieg sowie Tipps und Standardkonfigurationen für Build- und Entwicklungstools.
- Web Fundamentals bietet Einführungen in die grundlegenden APIs für Webkomponenten und Best Practices für das Entwerfen von Webkomponenten.
- MDN bietet Referenzdokumente für die Webkomponenten-APIs sowie einige Tutorials. \
Hero-Image von Jason Tuinstra auf Unsplash.
Hinweis der Redaktion: Das Diagramm zur Nutzung benutzerdefinierter Elemente wurde aktualisiert, um die vollständigen monatlichen Nutzungsdaten zu zeigen, die auf chromestatus.com veröffentlicht wurden. Eine frühere Version dieses Beitrags enthielt ein Diagramm mit einer Auflösung von 6 Monaten, ohne die letzten Monate. Die Reihen „V0“ und „V1“ im ursprünglichen Diagramm waren gestapelt. Sie werden jetzt ohne Stapelung mit einer Gesamtlinie angezeigt, um Unklarheiten zu vermeiden. Der abrupte Anstieg Ende 2017 ist auf eine Änderung des Datenerhebungssystems 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 in Zukunft.