Ein Einblick in die Welt der Web Components

Willkommen in der Welt der Web Components. Web Components basieren auf bestehenden Webstandards und sind nichts anderes als eine Sammlung von Technologien, die kombiniert werden, um es Entwicklern zu ermöglichen, wiederverwendbare Komponenten (Bündel von HTML, CSS, JavaScript) zu erstellen. Sie ermöglichen es uns, die Implementierung von HTML-Elementen, die bereits für das Web existieren, effektiv zu beschreiben. Die Technologien werden als Shadow DOM, <template>-Tag und benutzerdefinierte Elemente bezeichnet. Ähnlich wie die komponentenbasierten Frameworks wie Vue und React, führen uns Web Components dazu, komponentenbasierte Anwendungen nativ im Browser zu erstellen. Webentwickler können HTML für neue Elemente von Web Components mit gekapseltem Styling und benutzerdefiniertem Verhalten einfach erweitern.

Nachdem wir diese Grundlagen geklärt haben, werden wir in diesem Blog den Prozess durchgehen, wie Web Components den Prozess mit geeigneten Beispielen vereinfachen können. Wir werden auch Techniken zur Integration von Web Components mit Drupal vorstellen und den Vergleich zwischen Drupal-Modulen und Web Components in der modernen Webentwicklung diskutieren. 

Warum Web Components?

Seit der Einführung des Webs haben ständige Veränderungen im Kontext seiner Anwendung und Dokumentation stattgefunden. Im Browserbereich hat man jedoch nicht viel von diesem Übergang mitbekommen. Dies zwingt Entwickler, Lösungen zu finden, die das Web eher zu einer Anwendungsplattform machen können. Die durch Web Components erreichte Standardisierung macht die Erstellung und Verwaltung von Schnittstellen zu einem viel reibungsloseren Prozess.

Wenn sich ein Design in der Entwicklungsphase befindet, besteht der erste Schritt des Frontend-Prozesses darin, das Design in Komponenten zu zerlegen. Auf einer bestimmten Seite gibt es beispielsweise Abschnitte wie Header, Footer, Bilder usw. Sogar innerhalb des Headers können wir kleine Elemente des Site-Brandings wie das Logo, den Firmennamen, ein Suchfeld, Social-Media-Symbole und mehr identifizieren. Es ist sehr gut möglich, dass der Stil eines Artikels eine der Komponenten ist, die auf mehreren Seiten vorkommen. Somit kann eine Web Component für das Styling verwendet werden, um einen Standardstil auf allen Seiten zu erhalten. Wenn in diesem Prozess ähnliche Anforderungen gebündelt werden, führt dies zu einer schnelleren Anwendung und reduziert die Arbeitsduplizierung.

Vor dem Eintauchen in die Sphäre der Bibliotheken und der Beschaffung derselben war das Schreiben von DOM-interaktivem JavaScript über Browser hinweg von keinem Vorteil. Bibliotheken wie jQuery und UI-Widgets wurden entwickelt, um die Webentwicklung so weit wie möglich zu normalisieren und die Lücken in der begrenzten Anzahl von UI-Komponenten zu füllen, die im Web verfügbar sind. Heute sind diese Bibliotheken für Entwickler nützlich, um eine Seite zusammenzustellen und später kleinere Änderungen gemäß den Anforderungen vorzunehmen. Sie können wiederverwendbare Elemente mit einem Standardlebenszyklus erstellen, die von jeder Anwendung importiert werden können. 

Beispiele

Die Best Practices für das Schreiben robuster Web Components umfassen Funktionen wie Barrierefreiheit, Leistungsfähigkeit, einfache Wartung und Styling. Jede Komponente hat die Fähigkeit, als Referenzimplementierung zu dienen und in sich vollständig abgeschlossen zu sein. Es gibt viele bestehende Bibliotheken, die Ihnen den Aufbau von Web Components erleichtern können. Hier sind einige Beispiele aus dem Bibliothekenbereich der Website: 

• Für die Erstellung benutzerdefinierter Elemente kann Polymer eine Reihe von Funktionen bereitstellen.
• Slim.js, eine Open-Source-Lightweight-Web-Component-Bibliothek, bietet Datenbindung und erweiterte Funktionen für Komponenten.
• Stencil, ein Open-Source-Compiler, kann standardkonforme Web Components generieren.
• Hybrids, eine UI-Bibliothek, kann Web Components mit einer einfachen und funktionalen API erstellen.
• LitElement fügt eine API hinzu, um die Verwaltung von Elementeigenschaften und -attributen zu erleichtern.

Jede Komponente verfügt über einen Ausführungslink, der unabhängig von Reaktionsregeln oder anderen Modulen ist und zur Verwendung betrieben werden kann. 

Module vs. Web Components

Allzu oft werden Komponenten und Module miteinander verwechselt. Die Implikationen des einen gelten jedoch nicht für das andere. So wie ein Haus aus vielen Räumen besteht, sind Module autonome Einheiten, die aus Komponenten wie Header, Footer, Artikeln und Abschnitten bestehen. Jedes hat einen besonderen Stil und eine besondere Funktion, um ein unabhängiges Ganzes zu schaffen. 

Auf der anderen Seite fungieren Komponenten als eine Gruppe von wiederverwendbaren Codes, die mehr als ein Element enthalten, wie z. B. ungeordnete Listen, Zitate, Karten, Tabellen usw. Sie können auf verschiedene Weise mit anderen Komponenten assimiliert werden, um ein anderes Programm zu erstellen. Es ermöglicht, dass eine Webplattform nativ erweiterbar ist, wobei jedes Element erweitert und neue Elemente definiert werden können, um auf einfache Weise opulente Benutzeroberflächen zu erstellen. 

Drupal Connect

„Als aufstrebende Webbranche ersetzen Web Components die Layoutsysteme, Template-Engines und endlosen Twig-Dateien.“

Für Drupal entspricht der Begriff Modul dem, was in WordPress als Plugin bezeichnet wird, und der Begriff repräsentiert die gleiche Idee wie ein Widget. Drupal.org bietet etwa 17.000 Module zum Herunterladen für Drupal-basierte Websites. 

Da Drupal-Vorlagen eng mit Datenstrukturen verbunden sind, müssen Sie mehrere Vorlagendateien für jede Komponente erstellen. Es ist jedoch eine Aufgabe, alle Markups in derselben Vorlagendatei zu erhalten, während Sie alle Stile für eine Komponente in einer einzelnen Sass-Datei anwenden. Somit ermöglicht Drupal auch das Einrichten von komponentenähnlichen Strukturen. Beispielsweise ermöglicht Display Suite, eine vordefinierte Liste von Layouts, die vollständige Kontrolle darüber, wie Ihre Inhalte mithilfe einer Drag-and-Drop-Oberfläche angezeigt werden. 

Mit der Abnahme des Bedarfs auf der Modulseite skalieren Unternehmen auf Drupal 8, um die Komplexität der Websites zu verringern und gleichzeitig Wege zu einer unterhaltsameren und progressiveren Programmierung zu eröffnen. Gleichzeitig verbessert sich der Workflow und verlässt die Hülle von Drupal 6/7. Darüber hinaus ist die Komplexität der Drupal-Sites im Backend über Hybrid- und Headless-Sites ebenfalls rückläufig, was einen einfachen Übergang zu Drupal 8 ermöglicht. 

Wie verwende ich Web Components in Drupal?

Als aufstrebende Webbranche ersetzen Web Components die Layoutsysteme, Template-Engines und endlosen Twig-Dateien. In diesem zukunftsorientierten Ansatz unterstützt Drupal Polymer, eine leistungsstarke JavaScript-Bibliothek, zum Erstellen mehrerer Component-Engines und zum Erstellen einfach wiederverwendbarer und dokumentierter Vorlagen. Es verwendet auch den Web Component-Entitätstyp, sodass er nach dem Parsen von HTML-Dateien, die er findet, gespeichert werden kann, wodurch Drupal alle Polymer-Komponenten erkennt, die er findet.

Sie können auch Vanilla-JavaScript, HTML und CSS verwenden, um Web Components zu schreiben. Web Components können jedoch nur mit HTML-Kenntnissen und in Backend-Templating-Sprachen wie Twig verwendet werden. 

Wenn wir Web Components im Einklang mit Drupals Prinzip zur Unterstützung etablierter und aufkommender Standards übernehmen, lautet der vorgeschlagene Beschluss:

• Erstellen Sie ein Proof-of-Concept-Projekt mit Web Components unter Verwendung von Vanilla-JavaScript. Dies kann als Grundlage für verwandte Probleme und Entscheidungen verwendet werden.
• Entscheiden Sie, ob Sie sich für Web Components einsetzen und diese übernehmen möchten

Fazit

Mit mehreren offenen Problemen im Zusammenhang mit komponentenbasiertem Theming und Frontend-Frameworks sind Web Components in Drupal eine sehr gut mögliche Lösung. 

Da Drupal 9 vor der Tür steht, erwarten Drupaler den großen Sprung nach vorn für UX mit besserem JavaScript und komponentenbasiertem Theming. Bis dahin können Drupal 8 und seine Funktionen alle Ihre Website-Anforderungen erfüllen. Wir von OpenSense Labs können Sie mit individueller Beratung unterstützen und die Best Practices für Ihr Unternehmen aufzeigen. Senden Sie eine Nachricht an [email protected].