Web Components: Die Zukunft des Webs ist modular

Christoph Müller

von Christoph Müller am 07.02.2019

4 Minuten Lesezeit

Einer Webseite eine neue Funktion (eines Drittanbieters) beizubringen, erfordert heute eine Anzahl verschiedenster Schritte. Das Problem: es existiert kein einheitliches Plugin-System. Handelt es sich beispielsweise um ein jQuery-Plugin, benötigt der Entwickler jQuery. Wird die Funktion als AMD-Module geliefert, wird eine entsprechende Library verlangt. Reine JavaScript-Implementierungen beeinflussen den globalen Namespace und haben somit Auswirkungen auf die gesamte Anwendung. Darüberhinaus müssen in der Regel aufwendige Konfigurationen vorgenommen werden oder Details beachten werden, wie das Laden der JavaScript-Dateien an der richtigen Stelle. Wird eine Basistechnologie wie ein Single-Page-Framework wie etwa Angular, React oder Vue.js eingesetzt, ist es nahezu unmöglich, die einzelnen Technologien zu kombinieren. 

Das beschriebene Problem wird deutlich am Beispiel der Integration von Google Maps. Zu Beginn ist die Integration des entsprechenden Google Maps Scripts notwendig. Natürlich an der richtigen Stelle. Anschließend muss das Script über ein entsprechendes Code-Snippet initialisiert und konfiguriert werden. Die Map selbst muss anschließend in das HTML-Dokument eingefügt und mit CSS formatiert werden. Zugegeben, die beschriebenen Schritte sind überschaubar und mit einer entsprechend guten Dokumentation schnell umgesetzt. Dennoch handelt es sich um einen individuellen Vorgang, der von Plugin zu Plugin abweicht. Und, nicht jede Erweiterung ist so ausführlich dokumentiert und bequem integrierbar, wie Funktionen von Google.

Google Maps Integration: Klassisch

Das Equivalent der Google Maps Integration, umgesetzt mit Web Components sieht wie folgt aus.

Google Maps Integration: Web Components

Web Components basieren auf der Idee, wiederverwendbare Komponenten zu erzeugen und diese anschließend einheitlich in Webseiten und Webanwendungen zu integrieren. Sie sind Framework-agnostisch und können unabhängig vom eingesetzten Framework oder Library immer eingebunden werden ohne dabei Einfluss auf restliche Anwendungsbereiche auszuüben.

Vorteile

  • Wiederverwendbarkeit
  • Einheitliche Integration in Webseiten und Webanwendungen (Plugin-System)
  • Einfache Integration (z.B. durch CMS-Autoren)
  • Konfliktfreiheit (Isolierung von restlichen Anwendungsteilen)
  • Unabhängigkeit (Anwendungen können mit verschiedenen Basistechnologen entwickelt werden) 

Der Begriff Web Components

Genau genommen handelt es sich bei dem Begriff Web Components um einen Dachbegriff von verschiedenen Spezifikationen und Technologien - wie bei HTML 5. So existiert zwar keine direkte „Web-Component-API“, aber verschiedene Browser APIs erlauben das Erstellen von Web Components. Die wichtigsten Basistechnologien sollen nachfolgend kurz erläutert werden.

Custom Elements

Custom Elements legen die Grundlage und erlauben Entwicklern, eigene HTML-Elemente mit zugehörigem Verhalten zu erstellen oder bestehende Elemente zu erweitern. Für das Erzeugen von eigenen HTML-Elementen wird eine entsprechende Browser-Schnittstelle benötigt, die von der Custom Element Spezifikation beschrieben wird. Eigene HTML-Elemente können über den DOM mit der Funktion document.registerElement() einfach registriert werden. 

HTML-Templates 

Webanwendungen erfordern das dynamische Erstellen und Ändern von HTML-Elementen während des Anwendungsbetriebs. Um eine saubere Trennung zwischen Markup und Anwendungslogik zu erreichen, kommt üblicherweise eine sogenannte Template-Engine zum Einsatz. HTML-Templates bieten, wie der Name bereits vermuten lässt: Templates. Inhalte, die sich innerhalb eines <templates>-Elements befinden werden vom Browser zwar verarbeitet, jedoch nicht angezeigt. Über eine JavaScript-API werden diese Inhalte dennoch zugänglich und können dynamisch manipuliert, ergänzt oder entfernt werden.

Shadow DOM

Der Shadow DOM verpasst HTML-Elementen einen eigenen DOM-Baum, der losgelöst vom eigentlichen HTML-Dokument ist. Er isoliert Teile des HTML-Markups, wodurch unerwünschte Nebenwirkungen von CSS oder JavaScript begrenzt werden bzw. nicht zugänglich sind.

HTML Imports

Das Konzept des HTML Imports ermöglicht das Laden weiterer HTML-Elemente und Dokumente in den eigentlichen DOM.

Eigene Web Components erstellen

Um eigene Web Components zu erstellen, stehen Entwicklern heute diverse Frameworks zur Verfügung, die das Erstellen eigener Komponenten vereinfachen. Eins des bekanntesten Projekte ist Polymer aus dem Hause Google. Es unterstützt Entwickler nicht nur bei der Erstellung eigener Elemente, sondern liefert zusätzlich Polyfills für Browser, die Web Components nicht nativ unterstützen. Web Components lassen sich heute auch mit Single Page Frameworks wie Angular relativ leicht erzeugen. Angular Elements ist hier als Stichwort zu nennen.

Meine Einschätzung 

Das Konzept der komponentenbasierten Entwicklung feiert nicht ohne Grund in den letzten Jahren einen hohen Zuspruch - besonders im Bereich der bekanntesten Single-Page-Frameworks. Softwarefunktionen zu entwickeln, die unkompliziert eingebunden werden können, keinen Einfluss auf andere Anwendungsbereiche ausüben, problemlos wiederverwendet werden können, ist attraktiv. Vor allem auf der Konsumentenseite. Die starke Unterstützung von Web Components Technologien durch die wichtigsten Browserhersteller unterstreicht zusätzlich eine hohe Zukunftssicherheit und zeigt, dass Web Components bereits heute problemlos in der Praxis eingesetzt werden können. Web Components müssen sich dabei keineswegs nur auf kleine Anwendungsfunktionen beschränken: Möchte man sich technisch nicht an ein Framework binden, können auch größere Anwendungsteile mit verschiedenen Technologien entwickelt und anschließend über Web Components „zusammengeführt“ werden. Ich bin davon überzeugt, dass Web Components in Zukunft einen entscheidenen Baustein zum Modularen Web beitragen und das verstaubte Konzept der iFrames nach und nach ersetzten werden. 


Christoph Müller
Christoph Müller

Frontend Ninja

Veröffentlicht am 07.02.2019 um 23:00 Uhr