Web components

Web Components für mehr Durchblick im Web

Wiederverwendbarer Code ist in der Software-Entwicklung theoretisch eine gute Idee. In der Praxis jedoch scheitert die Umsetzung häufig an der plattform- und projektübergreifenden Einbindung des Codes im Web. Welches Framework ist ideal? Wie verhalten sich CSS-Klassen in Kombination mit den anderen Komponenten? In React, Vue oder Angular können zwar schon wiederverwendbare Code-Elemente erstellt werden, aufgrund der unterschiedlichen Standards ist deren Nutzung aber nur im jeweiligen Framework möglich.

Was sind Web Components?

Klassischerweise werden die Spezifikationen der einzelnen Web-Komponenten vom jeweiligen Framework definiert. Heutzutage werden allerdings häufig unterschiedliche Frameworks parallel eingesetzt – genau hier schaffen Web Components Abhilfe. Web Components ermöglichen es, wiederverwendbare Code-Blöcke für das Web zu bauen. Am Wichtigsten hierbei ist die Kapselung der Komponenten, bei denen der innere Aufbau dem von HTML-Elementen inklusive CSS und JavaScript gleicht. Durch die Kapselung kann der Code an beliebigen Stellen einer Website oder einer Web-App genutzt werden, auch wenn hier sonst nur native HTML-Elemente zum Einsatz kommen. Mittlerweile werden Web Components von jedem gängigen Browser unterstützt.

Die vier Spezifikationen von Web Components

Für die Erstellung der HTML-Komponenten gibt es vier Features: Custom Elements, HTML Templates, HTML Import und Shadow DOM. Alle werden über Java Script angesprochen und können unabhängig von einander eingesetzt werden. Zu empfehlen ist dies allerdings nicht, denn das volle Potenzial wird meist erst dann ausgeschöpft, wenn alle Spezifikationen verwendet werden.

1. Custom Elements
   Bei den Custom Elements handelt es sich um APIs, die es ermöglichen, eigene benutzerdefinierte Elemente und deren Verhalten zu definieren. Sie bestehen aus HTML-Tags, die CSS und Skripte kapseln.
2. HTML Templates
   HTML Templates dienen vorwiegend dazu, Custom Elements effizient zu rendern und haben so einen positiven Einfluss auf die Ladezeit. Sie werden erst bei Aktivierung des Templates geladen und können außerdem als Vorlage für Custom Elements wiederverwendet werden.
3. HTML Import
   Mit Hilfe des HTML Imports können HTML Tags oder HTML Elemente in andere Dokumente importiert und auf den Seiten geladen werden.
4. Shadow DOM
   Innerhalb eines HTML-Elementes wird ein unabhängiges DOM erzeugt, das zum einen dafür sorgt, dass zwischen den einzelnen Komponenten keine Konflikte entstehen. Zum anderen können im jeweiligen Shadow DOM neue Komponenten erstellt und gestylt werden.

Warum sollte man Web Components einsetzen?

Web Components dienen insbesondere dazu, UI-Komponenten zu erzeugen, die unabhängig von unterschiedlichen Framework funktionieren. Außerdem sollen sie dabei helfen, die Herausforderungen bei der Entwicklung webbasierter Applikationen zu meistern. Da die meisten Browser den Standard unterstützen, ist die Wiederverwendbarkeit des Codes auch heute schon sehr gut möglich. Dies gilt allerdings nur, wenn Web Components in reinem Javascript entwickelt werden. Wird zum Beispiel Polymer als Framework verwendet, greifen ältere Browser auf Polyfills zurück. Grundsätzlich passen Web Components perfekt in Umgebungen, in denen verstärkt auf Microservices gesetzt wird. Sie ermöglichen dadurch eine unabhängige und stetige Weiterentwicklung des bestehenden Technologiestacks. Auch die Wiederverwendbarkeit und der Verzicht auf externe Librarys sind große Vorteile. Da insbesondere Google mit Google Chrome, dem am häufigsten genutzten Browser, Web Components vorantreibt, lohnt sich ein näherer Blick.