Web Components – bereit für den Produktionseinsatz?

by Andreas Hartmann
Tags: Open Source , Web Components , Polymer

Web Components stellen einen wichtigen Meilenstein in der Entwicklung von Webapplikationen dar. Sie ermöglichen die Entwicklung in sich abgeschlossener, wiederverwendbarer Einheiten von GUI-Elementen und deren Verhalten. Dieser Artikel fasst die aktuelle Situation von Web Components bezüglich der Eignung für den Praxiseinsatz zusammen.

Web Components Machine von Andrew Magill, lizensiert unter CC BY 2.0

TL;DR

Web Components können produktiv eingesetzt werden, wenn man auf IE10 verzichten und mit Polyfills leben kann, welche teilweise mit Kompromissen arbeiten.

Kriterien

Ob sich eine Technologie für den Produktionseinsatz eignet, hängt von den konkreten Anforderungen eines Projektes ab. In diesem Artikel werden die folgenden Kriterien beleuchtet, um Ihnen eine Entscheidungsgrundlage zu geben:

  1. Status der Spezifikation
  2. Browser-Unterstützung
  3. Verfügbarkeit von Polyfills

Status der Web-Components-Spezifikationen

Die Spezifikationen von Custom Elements, Shadow DOM und HTML Imports beim W3C befinden sich im Status Working Draft, lediglich HTML Templates sind bereits offiziell Bestandteil von HTML5. Einige Aspekte sind kontrovers und werden von Entwicklern und Browserherstellern hinterfragt und teilweise – zumindest in der aktuellen Ausprägung – abgelehnt (mehr dazu unten).

Angesichts dieser Problematik ist damit zu rechnen, dass Entwicklern, welche bereits jetzt strategisch auf Web Components setzen, gewisse Anpassungsarbeit bevorstehen wird. Diese Aussage wird jedoch durch den Umstand relativiert, dass auch bei proprietären Frameworks wie Angular, Flight, Ember oder Aurelia, welche als Alternativen zu Web Components gesehen werden können, Updates auf neue Major-Versionen normalerweise mit Anpassungen an der bestehenden Codebasis einher gehen.

Auf der anderen Seite bietet das langsame Voranschreiten des Spezifikationsprozesses beim W3C den Communities der existierenden Web-Components-Bibliotheken die Chance, relativ unlimitiert mit Features und Implementationen zu experimentieren und auf diese Weise praktische Erfahrungen zu sammeln, welche wiederum in die Spezifikation einfliessen können.

Browserunterstützung

Die auf Blink basierenden Browser Chrome und Opera bieten bereits jetzt volle Unterstützung für die aktuelle Spezifikation von Custom Elements, Shadow DOM und HTML Imports. Dies ist nicht verwunderlich, da Google federführend bei der Entwicklung der Spezifikationen war und mit dem Polymer-Projekt starkes Engagement bezüglich der praktischen Anwendung von Web Components zeigt.

Firefox

Die Mozilla Foundation zeigt Zurückhaltung bei der Umsetzung der Spezifikationen; sie nimmt die Entwicklergemeinde in die Pflicht und erhofft sich eine Überarbeitung und Konsolidierung der Spezifikationen im Sinne einer praxisnahen, nachhaltigen Umsetzung basierend auf den Erfahrungen der Nutzer und Entwickler bewährter JavaScript-Frameworks. Aber auch wenn – oder weil? – sich die Mozilla Foundation bei der nativen Unterstützung von Web Components in Firefox Zeit lässt, bietet sie eine Polyfill-Bibliothek (der ursprüngliche Entwickler ist inzwischen zu Microsoft gewechselt und hat das Projekt mitgenommen) sowie eine Sammlung von Komponenten an, um uns die Nutzung von Web Components schon heute zu ermöglichen. Ungeduldige Entwickler können inzwischen die experimentellen Web-Components-Features in Firefox aktivieren.

Webkit (Safari)

Die Community von Webkit, welches in Safari zum Einsatz kommt, äusserte Bedenken bezüglich einiger Spezifikationen und beginnt nur zögerlich mit der Umsetzung. Die ursprüngliche Implementierung von Shadow DOM wurde wieder entfernt, inzwischen wurde jedoch mit einer neuen Implementierung basierend auf Slots begonnen. Einige Stimmen vermuten, dass Apple moderne Web-Technologien wie HTML5 boykottiert, um die Überlegenheit nativer Apps bei der Umsetzung komplexer, interaktiver Applikationen zu sichern. Sobald Web Components jedoch breite Unterstützung in der Entwicklergemeinde finden, wird sich auch Webkit nicht mehr vor einer vollständigen native Implementation drücken können.

Microsoft Edge

Microsoft plant die vollständige Unterstützung von Web Components, möchte jedoch zunächst die Überarbeitung der 20 Jahre alten DOM-Implementation im Edge-Browser weiter vorantreiben, damit die neuen Features performant und kosteneffektiv umgesetzt werden können. Der erste Meilenstein war die Bereitstellung von HTML Templates im November 2015; der Zeithorizont für die Realisierung der anderen Features ist derzeit noch nicht bekannt. Der aktuelle Status der Entwicklung kann auf der Seite Platform Status verfolgt werden.

Polyfills

Auch wenn die Praktikabilität von Polyfills für gewisse Technologien, welche Web Components zugrunde liegen, von einigen bezweifelt wird, gibt es Bestrebungen von verschiedenen Organisationen, entsprechende JavaScript-Bibliotheken zur Verfügung zu stellen.

webcomponents.js bietet Polyfills für alle Teilspezifikationen von Web Components. Alle modernen Browser werden unterstützt, lediglich in IE10 ist beim Einsatz von Custom Elements und HTML Imports mit Problemen zu rechnen.

Skate ist eine weitere JavaScript-Implementation der Custom-Elements-Spezifikation.

Komponenten-Bibliotheken

Die bekannteste Sammlung vorgefertigter Web Components ist Googles Polymer, welche in der stabilen Version 1.0 vorliegt.

Das Bosonic-Projekt bietet verschiedene Komponenten für alltägliche Anwendungen, z.B. Dialoge, Dropdowns, Tabs sowie Unterstützung für Drag&Drop.

Das java-basierte Web-Framework Vaadin beinhaltet eine Sammlung von Komponenten, welche als Web Components basierend auf Polymer umgesetzt wurden.

Auf customelements.io findet sich eine bunte Sammlung von Web Components für diverse Anwendungszwecke.

Die Technologien im Detail

Custom Elements

Bei der Umsetzung von Web Components spielen Custom HTML Elements eine zentrale Rolle. Sie ermöglichen es dem Entwickler, zusätzliche HTML-Elemente mit spezifischen Eigenschaften zu deklarieren und im HTML-Markup zu verwenden. Es gibt mehrere Vorschläge zur Konkretisierung der Spezifikation, die rege diskutiert werden. In näherer Zukunft ist nicht mit einer Konsolidierung zu rechnen.

Bezüglich Browserunterstützung sieht es im Moment nicht rosig aus, lediglich Chrome, Opera und der Android-Browser bieten native Unterstützung für dieses Feature. Die Mozilla Foundation hat noch Zweifel bzgl. der aktuellen Spezifikation, bietet jedoch in Firefox ein experimentelles API an, um Feedback von der Entwicklergemeinde zu sammeln. In Webkit wurden Custom Elements prototypisch umgesetzt. In Microsoft Edge steht die Implementierung noch aus.

Die Verwendung von HTML-Elemente mit Tag-Namen, welche nicht im HTML-Standard enthalten sind, ist schon seit geraumer Zeit möglich. Das spezifische Verhalten dieser Elemente musste bisher nach der Erstellung via JavaScript initialisiert werden. Diesen Ansatz verwendet auch das in webcomponents.js enthaltene Polyfill. Elemente werden nach der Erstellung asynchron initialisiert; das Hinzufügen neuer Custom Elements zum DOM-Tree wird anhand von Mutation-Observern festgestellt.

Shadow DOM

Das Shadow DOM ermöglicht die Definition lokaler DOM-Trees und damit die Kapselung von HTML-Komponenten und deren Isolierung von den dokumentenweit geltenden CSS-Regeln. Die Spezifikation beim W3C wird von den Browserherstellern weitgehend akzeptiert, es ist nicht mehr mit tiefgreifenden Änderungen zu rechnen.

In Chrome wird das Shadow DOM in seiner derzeitigen Spezifikation vollständig unterstützt. Firefox bietet experimentelle Unterstützung; sie kann durch Freischaltung der Web-Component-Features aktiviert werden. In Webkit ist das Shadow DOM bereits Bestandteil der Nightly Builds. Benutzer von Microsoft Edge müssen derzeit noch ohne Shadow DOM auskommen; immerhin geniesst das Feature eine hohe Priorität auf der Roadmap des Edge-Browsers.

Da die Manipulation des Shadow DOM naturgemäss "unter der Haube" des Browsers, d.h. ausserhalb der Reichweite klassischer DOM-Operationen, stattfindet, ist eine umfassende und performante Simulation der Funktionalität via Polyfill praktisch nicht möglich. Das Polymer-Projekt bedient sich eines Kompromisses, welcher als Shady DOM bezeichnet wird und eine sehr gute Performance bei weitgehender Kompatibilität zur Shadow-DOM-Spezifikation bietet.

HTML Imports

Die Spezifikation für HTML Imports ist wahrscheinlich die umstrittenste im Bereich der Web Components. Der zentrale Kritikpunkt ist die Überschneidung mit dem Modulsystem von ECMAScript 6. Beide Mechanismen versuchen, ähnliche Problem zu lösen, z.B. das Auflösen von Abhängigkeiten, Fehlerbehandlung, die Parallelisierung von Requests und die Vermeidung redundanter Modulimporte. Das W3C ist sich dieser Problematiken bewusst und arbeitet an Lösungsvorschlägen.

Chrome unterstützt HTML Imports nativ. Die Mozilla Foundation äussert Bedenken bzgl. der Spezifikation. Es sollen zunächst Erfahrungen mit ECMAScript-Modulen gesammelt werden, ausserdem wird auf den Umstand verwiesen, dass HTML Imports relativ einfach über Polyfills abgebildet werden können. Die Webkit-Community schliesst sich dieser Auffassung an und hat derzeit keine konkreten Pläne bezüglich der Umsetzung von HTML Imports. Microsoft übt sich auch hier in Zurückhaltung, es wird lediglich darüber informiert, dass die Technologie derzeit evaluiert, jedoch mit niedriger Priorität behandelt wird.

HTML Templates

HTML Templates dienen dazu, wiederverwendbare DOM-Fragmente zu deklarieren. Sie sind bereits offizieller Bestandteil von HTML5, dementsprechend überrascht es nicht, dass sie von allen namhaften Browser-Herstellern unterstützt werden.

Fazit

Falls Sie kein Vertrauen in Polyfills und/oder keine Zeit für Workarounds haben und lieber auf die finale Spezifikation und nativen Browser-Support warten möchten, bevor sie in eine Technologie investieren: Lassen Sie bis auf Weiteres die Finger von Web Components.

Für alle anderen: Verwenden Sie Web Components. Implementieren Sie eigene Web Components. Stellen Sie Ihren Code auf github oder eine andere Code-Plattform Ihrer Wahl. Erfassen Sie alle Probleme, auf die Sie stossen, in den Issue-Trackern der jeweiligen Projekte. Teilen Sie Ihre Erfahrungen mit der Community. Auf diese Weise leisten Sie einen wertvollen Beitrag zur Verbesserung und Modernisierung des World Wide Web.

In meinem github-Account finden Sie ein auf dem Polymer Starter Kit basierendes Beispiel-Projekt. Das Backend wurde mit Spray und Slick realisiert.