){kind=small}
Erste Schritte mit Webkomponenten
Lesedauer: 9 Minuten
JavaScript-Frameworks und -Bibliotheken, da sind wir uns alle einig, gibt es eine Menge. Angular, React, Vue, Svelte - die Liste scheint jedes Jahr zu wachsen. Aber was haben sie alle gemeinsam? Die Antwort ist, dass sie zum Erstellen von Applications im Web verwendet werden und die Möglichkeit bieten, wiederverwendbare Komponenten zu erstellen.
Wie wäre es, wenn Sie Komponenten auf der Grundlage bestehender Webstandards erstellen könnten, Komponenten, die nicht von einem Framework oder einer Bibliothek abhängen, mit denen alles zu einer Anwendung zusammengefügt wird? Genau hier kommen die Webkomponenten ins Spiel.
Hier sind einige Unternehmen, von denen Sie vielleicht schon gehört haben, die Webkomponenten einsetzen:
Logos of companies using Web Components. Google, Salesforce, Electronic Arts, Twitter, YouTube and GitHub
Google: viele Eigenschaften, darunter das AMP-Webkomponenten-Framework (Quelle)
Salesforce: Lightning-Webkomponenten (Quelle)
Twitter: Eingebettete Tweets (Quelle)
GitHub: Der "Aktualisiert vor" (Quelle)
YouTube: Die Website wurde mit Web Components (Quelle)
Sehen wir uns genauer an, wie Electronic Arts (EA) Webkomponenten verwendet. (Quelle)
EA ist eines der größten Spieleunternehmen mit über 22 Studios und 10.000 Mitarbeitern an 30 Standorten auf der ganzen Welt. Unnötig zu sagen, dass sie eine Menge Spiele herausbringen (NBA Live, Star Wars, The Sims, Battlefield usw.).
Anfangs verfolgte das Webteam den Ansatz, die Websites der einzelnen Spiele unabhängig voneinander zu gestalten und zu entwickeln, eine Website nach der anderen. Wie Sie sich vorstellen können, führte dies zu einem uneinheitlichen Erlebnis für die Benutzer, die alle von EA angebotenen Spiele durchsuchen. Auch für die Designer und Entwickler, die an den Websites arbeiten, war es schwierig. Sie verbrachten 80 % ihrer Zeit mit dem "Commodity Web" (d. h. mit Navigation, Fußzeilen und Mediengalerien), anstatt für jedes Spiel ein individuelles Erlebnis zu schaffen.
Um dieses Verhältnis umzukehren, wurde das Network Design System (NDS) geschaffen. Mit dem NDS konnten sie die Komponenten des Commodity Web nehmen und hinzufügen:
Theming-Fähigkeiten
Fähigkeit zur Integration mit jeder Sprache und jedem Framework
Unterstützung für ihre Microsite-Architektur
Bereitstellung als Benutzeroberfläche als Service (UIaaS)
Und wissen Sie, wer sonst noch Webkomponenten verwendet hat?
Sie. Haben Sie sich jemals gefragt, wie es möglich ist, dass Sie einfach das Attribut 'src' auf einer <video> oder <audio> setzen und einen voll funktionsfähigen Player mit Schaltflächen, Lautstärkeregler, Fortschrittsbalken, Timer und anderen Optionen haben? Web-Komponenten.
Schauen wir uns ein Beispiel an, das genauso einfach zu benutzen ist, bei dem aber hinter den Kulissen viel mehr passiert - der Modell-Betrachter Webkomponente, die von Google entwickelt wurde.
Hier ist der Code, der benötigt wird, um ein 3D-Modell anzuzeigen:
<!-- Import the component -->
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">https://unpkg.com/@google/model-viewer/dist/model-viewer.js</a>
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js</a>
<!-- Use it like any other HTML element -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>Mit einem einfachen HTML-Tag können Sie ein 3D-Modell einbetten, ohne dass Sie WebGL und die WebXR Device API kennen müssen.
Hier ist die Model-Viewer-Webkomponente innerhalb und ohne ein Framework / eine Bibliothek implementiert:
Wenn Sie sehen, wer Webkomponenten verwendet und was damit alles erstellt werden kann, werden Sie hoffentlich wissen wollen, wie Sie Ihre eigenen erstellen können.
Wie bereits erwähnt, beruhen Webkomponenten auf Webstandards. Diese Low-Level-APIs bestehen aus:
Benutzerdefinierte Elemente
Schatten-DOM
HTML-Vorlagen
Benutzerdefinierte Elemente API: Ermöglicht es Ihnen, ein benutzerdefiniertes Element auf der Seite zu registrieren.
Muss einen Bindestrich enthalten, z. B. my-custom-element. Keine Elemente mit nur einem Wort, um Namenskonflikte zu vermeiden.
Es handelt sich um ein Klassenobjekt, das sein Verhalten definiert.
Bestimmt auch, ob und welche eingebauten Elemente die benutzerdefinierten Elemente erweitern, d.h. Eingabe (HTMLInputElement), Schaltfläche (HTMLButtonElement), usw.
Schatten-DOM-API: Ermöglicht eine Methode zum Anhängen eines separaten DOM an ein Element
Es bietet eine Kapselung, um den Stil, die Struktur und das Verhalten vom äußeren Code zu trennen. Es hilft, "...das Grobe einzudämmen" - Paul Lewis (Quelle)
Ermöglicht die Neuzuordnung von Ereignissen, d. h. die Umwandlung eines Klickereignisses in etwas Sinnvolleres.
HTML-Vorlagen-API: Erzeugt eine flexible Vorlage, die in das Schatten-DOM der benutzerdefinierten Elemente eingefügt wird.
wird der Inhalt des
<template>wird der Inhalt des Elements nicht sofort gerendert. Wir definieren die HTML-Struktur im Voraus und klonen bei Bedarf über JavaScript.Wird verwendet, um HTML effizient zu rendern und zu aktualisieren, wenn der Benutzer mit unserer Webkomponente interagiert.
Für komplexere Vorlagen kann es einfacher sein, eine Bibliothek, ein Framework oder ein Tool zu verwenden.
Hier ist eine Beispiel-Webkomponente, die ich mit Kommentaren geschrieben habe, um zu erklären, was vor sich geht.
Falls Sie sich über die Browserunterstützung wundern: Webkomponenten werden in modernen Browsern unterstützt.
Table showing browser support for Web Components.
Bei älteren Browsern können Sie Polyfills verwenden: https://www.webcomponents.org/polyfills
Bei Vonage entwickeln wir Webkomponenten, um ein Designsystem zu schaffen, wie es Electronic Arts bereits erwähnt hat. Unser Ziel ist es, dass die Benutzer die Komponenten einfach zusammenstellen können, um z. B. Chat-Anwendungen zu erstellen, ohne sich Gedanken darüber machen zu müssen, was hinter den Kulissen passiert.
Hier finden Sie einige Ressourcen für weitere Informationen über Webkomponenten:
Das von mir erstellte Beispiel für eine Webkomponente war ein einfaches Beispiel. Wenn die Komplexität einer Komponente zunimmt, kann die Verwendung eines Tools die Entwicklung erleichtern. Im nächsten Blogbeitrag werden wir verschiedene Frameworks und Tools zur Erstellung von Webkomponenten vergleichen.