){kind=small}
Webkomponenten-Tools: Ein Vergleich
Lesedauer: 10 Minuten
In der letzten Beitraghaben wir die Grundlagen von Webkomponenten kennengelernt. Wir schlossen mit dem Code, der für die Erstellung eines einfachen Beispiels benötigt wird. Bei der Entwicklung sind die Dinge selten "einfach". Die Erstellung von Webkomponenten kann eine Menge von Standardcode beinhalten. Wenn Sie vorhaben, mehrere Komponenten zu erstellen, kann das ziemlich mühsam werden.
Webkomponententools sind eine perfekte Lösung für dieses Problem. Sie können dabei helfen, einen Teil der Textbausteine in saubereren Code zu abstrahieren und einen effizienteren Arbeitsablauf zu ermöglichen. Wie bei der Entwicklung gibt es auch hier viele Tools zur Auswahl, die alle auf unterschiedlichen Meinungen über den besten Weg zur Erstellung von Webkomponenten basieren.
In diesem Beitrag werden wir einige dieser Tools durchgehen und vergleichen. Es wird die gleiche Komponente gebaut, damit die Unterschiede im Code hervorgehoben werden können. Neben dem Code werden wir auch folgende Kriterien vergleichen:
Merkmale: Was bekommen wir aus dem Karton?
Dokumentation: Beispiele? Klare Anweisungen? Erste Projekte?
Einfaches Einrichten: Gibt es viele Schritte, um eine Webkomponente in Betrieb zu nehmen?
Unterstützung: Foren, Discord, Slack, Gemeinschaft, Blogs/Artikel, YouTube, GitHub
Absicherung: Wer pflegt das Tool? Wer benutzt es?
Bei meinen Recherchen bin ich auf eine Website gestoßen, die eine Spielwiese für Entwickler von Webkomponenten ist, https://WebComponents.dev. Die Seite listet alle ihre vielen Möglichkeiten auf, aber die, die wir nutzen werden, ist die Erstellung der gleichen Start-Webkomponente, eines Zählers, mit einem einzigen Klick. Die Website bietet eine breite Palette von Tools.
Wenn Sie mit der Erstellung von WebComponents.dev beginnen oder bei Ihren Recherchen, werden Sie bei der Beschreibung eines Werkzeugs die Begriffe "Bibliothek" oder "Compiler" sehen. Der Unterschied liegt darin, wann die Webkomponente verwendet wird. Bei Bibliotheken ist die Komponente auf das Tool angewiesen, das für das Rendering und die Aktualisierung verwendet wird. Im Gegensatz dazu gibt es bei Compilern einen Build-Schritt bei der Erstellung einer Komponente, der den Code generiert, der für die Arbeit notwendig ist, ohne dass das Tool später benötigt wird.
Jetzt können wir vergleichen!
Sehen wir uns zunächst an, wie die Komponente Zähler mit Vanilla JavaScript erstellt wird.
Zunächst erweitern wir die Basisklasse HTMLElement als Ausgangspunkt für unsere Webkomponente.
Der Zählwert wird auf 0 gesetzt.
Die Vorlage der Komponente wird dann wie folgt festgelegt html und ihr Styling als style.
Die Vorlage und das Styling werden dann an das Schatten-DOM angehängt, damit wir sie auf der Seite sehen können.
Einmal gerendert, können wir Verweise auf die verschiedenen Teile erhalten und die Aktionen der Komponente verbinden.
Als nächstes definieren wir die Funktionen der Komponente inc(),dec(), und update(). Beachten Sie, dass immer dann, wenn inc() und dec() aufgerufen werden, update() ebenfalls aktiviert wird. Andernfalls würde sich der Zählerstand nie ändern.
Dann haben wir die Komponenten connectedCallback() und disconnectedCallback() Lebenszyklus-Methoden. Diese werden aufgerufen, wenn die Komponente der Seite hinzugefügt oder von ihr entfernt wird. Hier fügen wir Ereignis-Listener zu den Schaltflächen hinzu und entfernen sie wieder. Dies ist sehr wichtig, vor allem bei Dingen wie Timern, um Speicherlecks zu vermeiden. Weitere Informationen über Lifecycle Callbacks finden Sie in den MDN-Webdokumenten.
Schließlich wird die neue Klasse mit dem Namen des benutzerdefinierten Elements verbunden, indem customElements.define.
Wenn die Komponenten, die Sie erstellen, nicht viel komplexer sind als dieses Beispiel, ist die Option Vanilla JavaScript vielleicht das Richtige für Sie. Auf diese Weise müssen Sie sich keine Sorgen über "Bibliotheksbindung" machen.
Wenn Ihnen das zu viel ist und/oder Sie viele Komponenten mit mehr Funktionen erstellen möchten, ist ein Tool vielleicht das Richtige für Sie.
Hier sind einige der vielen Möglichkeiten.
Bei einem ersten Blick auf den Code für die Zählerkomponente fällt auf, dass keine Klasse vorhanden ist.
Die erste Zeile auf ihrer Website erklärt dies: "Hybrids ist eine UI-Bibliothek zur Erstellung von Webkomponenten mit einem stark deklarativen und funktionalen Ansatz, der auf einfachen Objekten und reinen Funktionen basiert."
Wenn Sie sich also für funktionale Programmierung interessieren, könnte Hybrids die richtige Webkomponenten-Bibliothek für Sie sein.
Ich schätze es sehr, wenn die Dokumentation eines Tools eine Aufzählung aller Funktionen enthält. Hier ist sie direkt von ihrer Website:
Die einfachste Definition - nur einfache Objekte und reine Funktionen - keine Klasse und diese Syntax
Kein globaler Lebenszyklus - unabhängige Eigenschaften mit eigenen, vereinfachten Lebenszyklusmethoden
Komposition statt Vererbung - einfache Wiederverwendung, Zusammenführung oder Aufteilung von Eigenschaftsdefinitionen
Superschnelle Neuberechnung - eingebauter intelligenter Zwischenspeicher und Mechanismen zur Erkennung von Änderungen
Schablonen ohne externe Werkzeuge - Schablonen-Engine basierend auf getaggten Schablonen-Literalen
Inklusive Entwickler-Tools - Hot Module Replacement Support für eine schnelle und angenehme Entwicklung
Die Dokumentation wird von Gitbook unterstützt, das ein sehr sauberes und organisiertes Layout bietet. Da hybrids einen so neuartigen Ansatz zur Erstellung von Webkomponenten durch die Verwendung reiner Funktionen verfolgt, müssen einige Kernkonzepte und andere Aspekte erklärt werden. Die Dokumentation tut dies wirklich gut mit zahlreichen Codeschnipseln (mit Schaltflächen zum Kopieren in die Zwischenablage) und Links zum Experimentieren mit Beispielen auf StackBlitz.
Sie verwenden Hybride wie jede andere Bibliothek. Installieren Sie sie in Ihr Projekt npm i hybrids
und importieren und in Ihrer Datei verwenden import { html, define } from 'hybrids';
Es sind auch Optionen zur Verwendung von ES-Modulen oder ein Link zu einer unpkg-Datei verfügbar.
Die wichtigsten Möglichkeiten, die ich gefunden habe, um die Entwicklung von Hybriden zu verfolgen, sind GitHub und Gitter. Zum Zeitpunkt der Erstellung dieses Artikels wird die Bibliothek aktiv weiterentwickelt.
Der Twitter Account @hybridsjs scheint nicht aktiv zu sein.
Abgesehen von einigen Präsentationen, die sich mit Hybriden befassen, gibt es nicht viel über die Erstellung von Webkomponenten.
Die Dokumentation verweist auf einige Artikel auf dev.to
Es scheint, als ob der Schöpfer von Hybriden, Dominik Lubański, auch der einzige Betreuer der Bibliothek ist. Ich konnte keine Liste von Unternehmen/Organisationen finden, die Hybride in der Produktion einsetzen.
Vergleicht man den Code, der zur Erstellung von Schaltern mit Lightning Web Components (LWC) verwendet wird, mit dem von Vanilla JavaScript, kann man sehen, dass vieles abstrahiert wurde. Beachten Sie, dass die LWC ein LightningElement erweitert, anstatt ein HTMLElement.
Lightning-Webkomponenten wird von Salesforce entwickelt. Zugegeben, ich habe keine Erfahrung mit Salesforce. Daher habe ich mich bei der Recherche mit all den verschiedenen Möglichkeiten der Integration in die Salesforce-Plattform etwas verirrt. In diesem Beitrag geht es nur um die Erstellung von Webkomponenten mit Lightning Web Components. Aber wenn Sie ein Salesforce-Entwickler sind und Webkomponenten für das Ökosystem erstellen möchten, können Sie mit LWC nichts falsch machen. Mehr Informationen dazu finden Sie hier.
Wie auf ihrer Website aufgeführt, sind Lightning Web Components (Anmerkung: Lightning Web Components ist das Framework, Lightning Web Components sind die erstellten Komponenten. Die Großschreibung ist wichtig.) sind:
Blitzschnell - Schlanke, auf Leistung optimierte 7kb-Laufzeit, mit minimalem Boilerplate-Code.
Standardbasiert - Lightning Web Components verwendet Standard-HTML, modernes JavaScript (ES6+) und das Beste der nativen Webkomponenten.
Einfach zu erlernen - Lassen Sie Abstraktionen hinter sich und erstellen Sie benutzerdefinierte Elemente mit HTML, JavaScript und CSS.
Dies scheint der Standardanspruch vieler Webkomponenten-Tools zu sein.
Es gibt eine Dokumentation zu LWC, die an verschiedenen Stellen in Salesforce zu finden ist. Dort ist lwc.dev die einen Leitfaden mit interaktiven Codeschnipseln enthält. Dort finden Sie einige Informationen und kleine Herausforderungen, die Sie in einen Code-Editor eingeben und die Ergebnisse sofort sehen können.
Eine weitere Dokumentation befindet sich auf der developer.salesforce.com Domain. Diese wurde möglicherweise vor der Website lwc.dev verwendet. Die Informationen über LWC sind umfangreicher, aber weniger interaktiv.
Weitere Informationsquellen sind Komponenten Rezepte, Beispiel-App-Galerieund eine Code-Spielplatz.
Lightning Web Components verfügt über ein Gerüstwerkzeug, mit dem sich eine Anwendung mit wenigen Befehlen zum Laufen bringen lässt:
npx create-lwc-app my-app
cd my-app
npm run watch
Eine Progressive Web App (PWA) kann auch durch Verwendung des -t pwa Flagge.
Auf dieser Seitewerden Möglichkeiten aufgelistet, mehr über LWC zu erfahren. Es gibt Links zu einem Salesforce Stack Exchange-Forum, in dem Sie Fragen stellen können. Sie können Kurse auf Pluralsight und Salesforce Trailhead besuchen. Wenn Sie auf YouTube nach Lightning Web Components suchen, erhalten Sie viele Ergebnisse von Personen, die zeigen, wie man Komponenten erstellt.
Wie bereits erwähnt, handelt es sich um ein Salesforce-Projekt, und es sieht so aus, als würde ein Team von Ingenieuren daran arbeiten.
Lightning Web Components ist so kompatibel mit der Plattform, dass es von vielen Salesforce-Entwicklern verwendet wird.
(Hinweis: TypeScript kann auch zur Erstellung von Webkomponenten mit LitElement verwendet werden.) Ein schneller Überblick über den Code mag den Anschein erwecken, als gäbe es kaum einen Unterschied zwischen Komponenten, die mit Vanilla JavaScript und LitElement erstellt wurden. Ein kleiner, aber signifikanter Unterschied ist die Art und Weise, wie die Vorlage der Komponente aktualisiert wird.
Wie auf der Website"LitElement verwendet lit-html, um HTML-Vorlagen zu definieren und zu rendern. DOM-Updates sind blitzschnell, weil lit-html nur die dynamischen Teile der Benutzeroberfläche neu rendert - kein Diffing erforderlich."
Dies ist zum Teil zurückzuführen auf getaggte Vorlagenliterale.
Auf die Frage "Warum LitElement?" lautet die Antwort:
"Herrlich deklarativ" - Verwenden Sie JavaScript in Ihrer Vorlage.
"Schnell und leicht" - Wie bereits erwähnt, werden aufgrund der Aktualisierungsmethode, bei der nur die Teile, die sich ändern, neu gerendert werden, die Aktualisierungen viel schneller durchgeführt.
"Nahtlos interoperabel" - Da LitElement die von Web Components festgelegten Standards einhält, können seine Komponenten für sich alleine stehen oder mit jedem Frontend-Framework oder jeder Bibliothek kompatibel sein.
Auch dies ist eine Behauptung, die von vielen Webkomponenten-Tools aufgestellt wird.
Die Dokumentation ist ziemlich minimalistisch. Nur drei Abschnitte.
Probieren Sie es aus: eine schrittweise Anleitung zum Erstellen einer Webkomponente mit einem eingebetteten StackBlitz-Code-Editor.
Leitfaden: ein vertiefter Einblick in LitElement, auch mit einem Inline-Code-Editor
API: ein API-Explorer
Im Abschnitt "Erste Schritte" des Leitfadens heißt es, dass Sie eine eigenständige Komponente oder eine Komponente, die für eine bestimmte Anwendung bestimmt ist, erstellen können.
Der erste Schritt zur Erstellung einer eigenständigen Komponente ist der Download eines Starterprojekts (entweder JavaScript oder TypeScript).
Installieren Sie die Abhängigkeiten.
Wenn Sie die TypeScript-Version verwenden: npm run build oder npm run build:watch.
Dann npm run serve.
Das Verfahren zum Hinzufügen von LitElement zu einem bestehenden Projekt ist standardmäßig.
Installieren Sie die Bibliothek: npm i lit-element
Erstellen Sie eine Komponente.
Importieren Sie die Komponente.
Verwenden Sie die Komponente.
Eine andere Möglichkeit der Einrichtung wäre die Verwendung der Open Web Components Generatoren. Dabei handelt es sich um ein interaktives CLI, das eine einzelne Webkomponente oder eine Startanwendung erstellt.
Im Community-Bereich der LitElement-Website gibt es eine Liste mit einigen Ressourcen. Dazu gehören ein Slack-Arbeitsbereich, ein ziemlich aktiver Twitter Account, eine Mailingliste und natürlich StackOverflow.
LitElement ist ein Teil des Polymer-Projekts, das von Google entwickelt wird.
Es gibt ein Wiki auf Polymers GitHub, das auflistet, wer Polymer / LitElement verwendet hat. Dazu gehören natürlich verschiedene Google-Eigentümer, aber auch Coca-Cola, McDonald's, Electronic Arts und viele mehr.
Wenn man sich den Code ansieht, den Stencil zur Erstellung der Zählerkomponente verwendet, findet man einige "@" im Code. Dies sind Decorators, die aus TypeScript stammen. Stencil verwendet sie, um einen Teil des Boilerplate-Codes zu abstrahieren.
Auf ihrer gesamten Websitemöchte Stencil deutlich machen, dass ein Ziel des Tools darin besteht, die Erstellung von Webkomponenten so einfach wie möglich zu gestalten.
"Im Vergleich zur direkten Verwendung von Custom Elements bietet Stencil zusätzliche APIs, die das Schreiben von schnellen Komponenten vereinfachen."
Auf der Startseite der Website und in der Einleitung weist Stencil darauf hin, dass es sich um einen Compiler handelt. Sobald die Webkomponente generiert ist, ist sie nicht mehr auf Stencil angewiesen.
Stencil stellt sicher, dass seine Funktionen klar angegeben sind:
Web-Komponenten-basiert
Asynchrone Rendering-Pipeline
TypeScript-Unterstützung
Einseitige Datenbindung
Vorberechnung von Komponenten
Einfaches "Lazy-Loading" von Komponenten
JSX-Unterstützung
Abhängigkeitsfreie Komponenten
Virtuelles DOM
Statische Standortgenerierung (SSG)
Ein Wort, um die Stencil-Dokumentation zu beschreiben, wäre vollständig. Man merkt, dass viel Zeit und Mühe in die Zusammenstellung geflossen sind.
Der erste Abschnitt, Einführung, beginnt mit der Frage, warum es Stencil gibt.
Danach folgen die Unterabschnitte:
Ziele und Zielsetzungen - Stencils Ziele und Nutzenversprechen
Meine erste Komponente - eine Aufschlüsselung einer Beispielkomponente von Stencil
FAQ - eine recht lange und gut organisierte Liste von Antworten
Was ist ein Entwurfssystem? - Die Dokumentation nimmt sich die Zeit, zu definieren, was ein Entwurfssystem ist!
Stencil for Design Systems - Im vorigen Abschnitt werden Sie darüber informiert, wie Stencil sie für Sie erstellen kann.
Und das ist nur der erste Abschnitt! Die Dokumentation geht auf alle Aspekte der Komponenten ein, wie man die generierten Komponenten in gängige FrontEnd Frameworks integriert, Konfigurationsoptionen, Anleitungen, Tests und vieles mehr. Ich habe noch nie eine Frage gehabt, die nicht in der Dokumentation beantwortet wurde.
Im Einführungsteil der Dokumentation gibt es einen Abschnitt "Erste Schritte". Stencil verfügt über ein interaktives CLI-Tool.
Die Ausführung von npm init stencil ermöglicht die Erstellung einer Webkomponente, einer Stencil-Anwendung oder einer produktionsreifen Progressive Web App.
Unter dem Abschnitt Community finden Sie Links zu Twitter, Slack und GitHub. Außerdem gibt es viele YouTube-Videos und Artikel/Blogbeiträge zu Stencil.
Stencil wird vom Ionic-Kernteam zusammen mit Beiträgen aus der Community gepflegt.
Auf der Titelseite sind die Logos der Unternehmen, die Stencil verwenden, deutlich sichtbar. Aufgeführt sind Apple, Amazon, Porsche, Arm, Panera und Microsoft.
Dies sind nur einige der ständig wachsenden Liste von Tools zur Erstellung von Webkomponenten. Wenn keines dieser Tools auf Ihrer Checkliste für Entwickler steht, würde ich mir ansehen, was sonst noch verfügbar ist auf https://WebComponents.dev. Was uns bei Vonage betrifft, haben wir uns für die Verwendung von Stencil entschieden. Mit der TypeScript-Unterstützung, der hervorragenden Dokumentation und der Möglichkeit, Designsysteme zu erstellen, sind wir auf dem besten Weg, unser Webkomponenten-Projekt abzuschließen.
Im nächsten Beitrag werden wir eine Webkomponente mit Stencil von Anfang bis Ende erstellen.
Haben Sie eine Webkomponente mit einem der aufgeführten Tools erstellt? Vielleicht eines, das wir nicht erwähnt haben? Welche Erfahrungen haben Sie gemacht? Lassen Sie es uns im Kommentarbereich wissen.