Web Components - Bausteine des Internets

Was sind Web Components?

Web Components bauen auf der Idee auf, wiederverwendbare Kleinstkomponenten in Webseiten und Apps einzusetzen, das Rad somit nicht bei jedem Projekt neu erfinden zu müssen und gemeinsam an der Weiterentwicklung dieser Komponenten zu arbeiten.

Das Konzept von Web Components gibt es in der ein oder anderen Form schon sehr lange: Angefangen hat alles mit den proprietären Lösungen von Microsoft (1998) und Mozilla (2001), die beide aber kein besonders erfolgreiches Dasein fristeten.

Ein ähnliches Konzept stellen natürlich auch die diversen Plugins für jQuery dar – allen voran natürlich jQuery UI seit 2007 –, welche es ermöglichten vordefinierten HTML-Syntax mit JavaScript aufzuwerten um so eine bessere User Experience zu schaffen oder auf einfachem Weg oft benutzte Komponenten wie Slider und Galerien zu bauen.

Während sich jQuery-Plugins oft nur um den Javascript-Stil der Komponenten kümmerten, ist spätestens seit Aufkommen der beliebten Javascript Frameworks Angular von Google und React von Facebook der Sprung zu standardisierten Webkomponenten nicht mehr weit:

Beide Frameworks bauen auf dem Konzept der wiederverwendbaren Komponenten auf, die sich aus einer Mischung aus JavaScript (oder TypeScript), HTML für das Markup und CSS (bzw. SASS) für das Styling zusammensetzen. Dabei können Komponenten beliebig oft in einer Applikation durch die Einbindung eines “Custom Elements”, also z.B. <app-datepicker></app-datepicker> für eine Datumsauswahl, verwendet werden.

Web Components selbst entwickeln sich seit 2012 als Draft des W3C, Browserhersteller implementieren den Standard mit unterschiedlichen Prioritäten: Während Google mit Chrome und Mozilla mit Firefox gut dabei sind, unterstützt Safari nur einen Teil der Features. Microsoft arbeitet an einer Implementierung in IE Edge. Ohne Polyfills wird der Internet Explorer aber gar nicht unterstützt.

Was bieten Web Components?

Web Components gehen weiter als reine Javascript-Lösungen: sie sind Framework-agnostisch. D.h. egal welches oder ob überhaupt ein gängiges Javascript Framework eingebunden ist, Web Components können immer benutzt werden.

Auch wenn Web Components theoretisch ohne die Hilfe eines Frameworks eingesetzt werden können, wird in der Praxis dennoch sehr oft zu einem Framework von Google gegriffen: Polymer.

Polymer kümmert sich um die Einbindung der Webkomponenten (seit Version 3 über npm), kümmert sich um nötige Polyfills, damit die Komponenten auch garantiert in allen modernen Browsern laufen und hilft bei der effizienten Erstellung der Komponenten.

Im Grunde versprechen Web Component eines: Wiederverwendbarkeit. Egal ob in der Website des großen Autohauses oder dem Intranetprojekt einer Bank, oft werden Einzelteile mit identischer oder ähnlicher Funktionsweise öfter in einem Projekt oder in verschiedenen Projekten benötigt.

Da bringt es natürlichen einen immensen Vorteil, wenn mann schnell, einfach und kostensparend auf Komponenten zurückgreifen zu kann, die von einer großen Anzahl an Entwicklern benutzt werden.

Über Marktplätze wie z.B. Web Components.org kann nach beliebten Komponenten gesucht werden.

Bild

Eingebunden werden die Komponenten dann meist per Paketmanager wie npm, was den weiteren Vorteil hat, dass Patches für Probleme oder neue Features mit einem einfachen Terminal-Kommando in die eigene App eingespielt werden können.

Die Probleme

Während sich die Weiterverwendung von Web Components (oder generell Komponenten in anderen Javascript-Frameworks) zunächst vielversprechend anhört, muss sich das Konzept oft der harten Realität des Alltags geschlagen geben:

Nicht selten führen sehr spezifische Anforderungen für jedes einzelne Projekt dazu, dass sehr individuelle Komponenten geschaffen werden, die nicht oder nur sehr schwer in anderen Projekten weiterverwendet werden können. Auch der Vorteil, dass bestehende Web Components aus Dritthänden weiterentwickelt werden, versiegt schnell, wenn für das Projekt relevante Änderungen an der Komponente durchgeführt werden müssen, die ein späteres Update nicht mehr möglich machen.

Die Zukunft

Trotz aller Alltagsprobleme, die Web Components daran hindern, ihr primäres Ziel – die Wiederverwendbarkeit – zu erreichen, ist das dahinterliegende Konzept zu verlockend, um um nicht auch in Zukunft Triebfeder für effiziente Arbeitsweisen so sein.

Die großen Javascript Frameworks implementieren zwar alle eine leicht unterschiedliche Art des Komponenten-Konzepts, dennoch profitieren alle von der grundlegenden Idee, die Komponenten bieten.