Web components – Standards vs. proprietäre JavaScript Frameworks
Einzelteile, die wie Zahnräder ineinandergreifen
Wir bei Tojio lieben Web Components. Denn sie haben das Potential, mehrere Probleme der Web-Entwicklung auf einmal zu lösen.
Am Anfang von Projekten stellt sich oft die Frage, welches Frontend-Framework für ein Projekt wohl am besten passen würde? Manchmal wird die Auswahl aber auch einfach ganz pragmatisch anhand der im Team vorhandenen Skills eingegrenzt.
Dabei gibt es mit Web Components die Möglicheit, noch weit vor der konkreten Auswahl eines Framworks einen echten Mehrwert zu schaffen: indem sie auf reinen Web Standards aufsetzen, lassen sich mit ihnen wiederverwendbare Bausteine herstellen, die jeder Web Browser völlig unabhängig von irgendwelchen Frameworks oder weiteren Libraries verstehen und benutzen kann.
Für Organisationen mit vielen Web-Projekten, die evtl. auch noch mit verschiedenen Framworks (wie etwa React, Vue, Angular, Svelte ...) realisiert sind, lassen sich durch das Verwenden von Web Components als kleinstem gemeinsamen Nenner u.U. enorme Einsparungen bei den Design- und Entwicklungskosten erzielen.
Größtmögliche Kapselung – keine Seiteneffekte mehr!
Kapselung bedeutet, dass eine Web Component zwar vom HTML-Dokument zur Anzeige verwendet wird (und auch mit dem Rest des Dokuments kommunizieren kann), sie aber ansonsten ein völlig individuelles Eigenleben führt und nur ihrer inneren Logik und ihren eigenen visuellen Definitionen folgt.
Web Components benutzen dafür eine sogennante shadow root. Die funktioniert intern wie ein Teil eines HTML-Dokuments, ist aber von außerhalb nicht zugänglich. Daher kann es auch nicht passieren, dass eine Web Component durch einen CSS-Stil von außerhalb beinflusst wird. Diese Art von (ärgerlichen, aber nicht unüblichen) Seiteneffekten ist hier ganz ausgeschlossen - und allein das ist schon ein immenser Vorteil.
Die einzelnen Bestandteile und ihre Funktionsweisen sind bei Web Components gekapselt und dadurch vor Seiteneffekten geschützt. (Foto von Supplements On Demand bei Pexels)
Geliefert wie bestellt: Konsistenz und Interoperabilität
Während sich verschiedene Browser bis heute z.T stark unterscheiden im Hinblick auf die Darstellung eingebauter Benutzeroberflächenelemente (Buttons, Select etc.) lassen sich mit Web Components konsistente Darstellungen über alle Browser hinweg realisieren.
Dadurch, dass Web Components nur Web Standards benutzen und keine weiteren Libraries oder Frameworks benötigen, funktionieren sie auch in jedem Browser zuverlässig und liefern die Ansichten, wie man sie erwartet.
Aus vielen verschiedenen Komponenten lassen sich komplexe Produkte bauen. (Foto von Vadim Sherbakov bei Unsplash)
Dauerbrenner: ein Höchstmaß an Wiederverwendbarkeit
Durch Kapselung, konsistentes Erscheinungsbild und Funktion brillieren Web Components in Sachen Wiederverwendbarkeit. So lässt sich ein- und dieselbe Komponente, einmal ausgearbeitet, problemlos in beliebig vielen Drupal-Themes, Wordpress-Themes, statischen HTML-Seiten oder auch in Applikationen mit völlig beliebigen Frameworks (React, Vue, Svelte, ... ) zum Einsatz bringen.
Unabhäng und zukunftssicher durch Web Standards
Dadurch, das alles an Web Components pure Web Standards des World Wide Web Consortium (W3C) sind, sind und bleiben eigens erstellte Web Components komplett unabhängig von allen möglichen sonstigen Entwicklungen in der schnellebigen Welt der Frontend-Frameworks.
Vor allem aber sind sie zukunftssicher "by design" – denn wenn mal wieder ein Framework gegen ein anderes ausgetauscht werden soll, kann die Web Component dieselbe bleiben und alles, was an Arbeit in sie hineingeflossen ist, bleibt erhalten.
Schnellere Entwicklung, einfachere Pflege
Mithilfe von Web Components lassen sich Projekte deutlich schneller realisieren und im Nachhinein auch viel einfacher pflegen.
Mit dem Zurückgreifen auf Web Components lässt sich der Aufwand für Entwicklung und Wartung von Web-Applikationen deutlich verringern. (Foto von Vadim Sherbakov bei Unsplash)
Und selbst wenn eine Komponente gar nicht zur Wiederverwendung beabsichtigt ist, liegt dennoch ein Vorteil in diesem Ansatz: die Web Component kann komplett eigenständig (beispielsweise auch von einem fremden Entwickler, der sonst gar nicht im Projekt involviert ist) entwickelt, getestet und später weiterentwickelt werden, weil sie nur ihrer eigenen, internen Logik folgen muss. Mit einer sauber definierten Schnittstelle sind unerwünschte Seiteneffekte mit dem Rest des Projekts so gut wie ausgeschlossen.
Beispiele für Komponenten wären etwa:
- Select Improved - ein hinsichtlich Usability stark verbessertes, filterbares Select-Element
- Audio Player - eine Mini-Applikation um Audio-Dateien wie Podcasts darzustellen und abzuspielen
Möchten Sie in ihren Projekten von Web Components und all ihren Vorteilen profitieren? Sprechen Sie uns an!