Webkomponenten bei der I/O 2019
Veröffentlicht: 18. Juni 2019
Auf der Google I/O 2019 sprachen Kevin Schaaf vom Polymer-Projekt und Caridy Patiño von Salesforce über den aktuellen Stand von Webkomponenten.
Wie beliebt sind Webkomponenten?
Wenn Sie das Web heute genutzt haben, haben Sie wahrscheinlich Webkomponenten verwendet. Nach unseren Berechnungen werden heute bei etwa 5% bis 8% aller Seitenaufrufe eine oder mehrere Webkomponenten verwendet. Das macht Webkomponenten zu einer der erfolgreichsten neuen Webplattformfunktionen, die in den letzten fünf Jahren eingeführt wurden.
Webkomponenten werden auf Websites verwendet, die Sie wahrscheinlich täglich nutzen, z. B. YouTube und GitHub. Sie werden auch auf vielen Nachrichten- und Verlagswebsites verwendet, die mit AMP erstellt wurden. AMP-Komponenten sind auch Webkomponenten. Viele Unternehmen setzen ebenfalls auf Webkomponenten.
Was sind Webkomponenten?
Was sind Webkomponenten? Die Webkomponenten-Spezifikationen 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 (mit Standard-DOM-APIs).
- Eine gängige Methode zum Empfangen und Senden von Daten (mit Properties/Ereignissen).
Außerhalb dieser Standardschnittstelle wird in den Standards nichts darüber gesagt, wie eine Komponente tatsächlich implementiert wird:
- Welche Rendering-Engine zum Erstellen des DOM verwendet wird.
- Wie es sich basierend auf Änderungen an seinen Eigenschaften oder Attributen aktualisiert.
Mit anderen Worten: Webkomponenten teilen dem Browser mit, wann und wo eine Komponente erstellt werden soll, aber nicht, wie sie erstellt werden soll.
Autoren können funktionale Renderingmuster wie React verwenden, um ihre Webkomponenten zu erstellen, oder deklarative Vorlagen wie in Angular oder Vue. Als Autor haben Sie die volle Freiheit, die Technologie zu wählen, die Sie in der Komponente verwenden möchten, und können gleichzeitig die Interoperabilität aufrechterhalten.
Wozu sind Webkomponenten gut?
Der Hauptunterschied zwischen Webkomponenten und proprietären Komponentensystemen ist die Interoperabilität. Aufgrund ihrer Standardschnittstelle 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 einer größeren Vielfalt von Anwendungen verwendet werden, ohne dass Nutzer an ein bestimmtes Framework gebunden sind.
Da die Komponentenschnittstelle 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 einen großen Schritt zwischen einem Framework und einem anderen zu machen, 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 waren besonders beliebt: Content-Websites, Designsysteme und Unternehmensanwendungen.
Websites im Display-Netzwerk
Webkomponenten sind die perfekte Technologie für die progressive Optimierung 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 wurden.
Designsysteme
Immer mehr Unternehmen vereinheitlichen die Art und Weise, wie sie sich präsentieren, indem sie ein Designsystem verwenden. Ein Designsystem ist eine Reihe von Komponenten und Richtlinien, die das gemeinsame Erscheinungsbild der Websites und Anwendungen einer Organisation definieren. Auch hier sind Webkomponenten eine gute Lösung.
Häufig müssen sich Designer mit vielen Teams auseinandersetzen, die ihre eigenen Versionen der Designsystemkomponenten auf React, Angular und allen anderen Frameworks erstellen, anstatt einen einzigen Satz kanonischer Komponenten zu haben.
Webkomponenten sind die Lösung – ein Komponenten-System, das nur einmal geschrieben werden muss und überall ausgeführt werden kann, aber App-Teams trotzdem die Freiheit lässt, 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 und zukunftssichere Technologie für die Standardisierung darstellen. Caridy Patiño, Architekt für die UI-Plattform von Salesforce, erläuterte, warum sie ihre UI-Plattform mit Webkomponenten erstellt haben.
Salesforce ist eine Sammlung von Anwendungen, von denen viele aus Akquisitionen stammen. Jede dieser Funktionen kann auf einem eigenen Technologie-Stack ausgeführt werden. Da sie auf unterschiedlichen Stacks basieren, ist es schwierig, ihnen allen das gleiche Erscheinungsbild zu geben. Außerdem können Kunden mit 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 von Kunden seiner Plattform ermittelt:
- Standardlösungen statt proprietärer Lösungen – so lassen sich erfahrene Entwickler leichter finden und neue Entwickler schneller einarbeiten.
- Ein gemeinsames Komponentenmodell, sodass die Anpassung jeder Salesforce-Anwendung auf dieselbe Weise erfolgt.
Außerdem haben sie einige Dinge identifiziert, 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.
- Sie sind in einem ummauerten Garten gefangen.
Die Verwendung von Webkomponenten als Grundlage für die neue UI-Plattform erfüllte alle diese Anforderungen. Das Ergebnis sind die neuen Lightning-Webkomponenten.
Erste Schritte mit Webkomponenten
Es gibt viele gute Möglichkeiten, mit Webkomponenten zu beginnen.
Wenn Sie eine Web-App entwickeln, sollten Sie einige der vielen verfügbaren Standard-Webkomponenten verwenden. Dies sind nur einige Beispiele:
- Google bietet sein eigenes Material Design-System als Webkomponenten an: Material Web Components.
- Wired Elements sind eine Reihe von Webkomponenten mit einem skizzenhaften, handgezeichneten Look.
- Es gibt spezielle Web-Komponenten 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 als Webkomponenten erstellen. Sie können die integrierten Webkomponenten-APIs verwenden. Da diese jedoch auf einer sehr niedrigen Ebene angesiedelt sind, gibt es eine Reihe von Bibliotheken, die den Prozess vereinfachen.
Wenn Sie mit der Entwicklung eigener Komponenten beginnen möchten, können Sie sich LitElement ansehen. Das ist eine von Google entwickelte Webkomponenten-Basisklasse, die ein hervorragendes funktionales Rendering bietet, das dem von React ähnelt.
Weitere Tools und Bibliotheken:
- Stencil ist ein Framework, das auf Webkomponenten basiert. Es enthält mehrere beliebte Framework-Funktionen wie JSX und TypeScript.
- Mit Angular Elements können Angular-Komponenten als Webkomponenten umschlossen werden.
- Der Webkomponenten-Wrapper von Vue.js bietet eine Möglichkeit, Vue-Komponenten als Webkomponenten zu verpacken.
Weitere Ressourcen:
- Auf open-wc.org finden Sie hilfreiche Informationen für den Einstieg sowie Tipps und Standardkonfigurationen für Build- und Entwicklungstools.
- Web Fundamentals bietet Einführungen in die grundlegenden Webkomponenten-APIs und Best Practices für das Design von Webkomponenten.
- MDN bietet Referenzdokumente für die Webkomponenten-APIs sowie einige Tutorials.