Webcomponents
Webcomponents sind die logische Weiterentwicklung des Internets. Sie ebnen den Weg für wiederverwendbare, modulare Komponenten, die universal einsetzbar sind. Und das Beste: jede:r kann neue Komponenten entwickeln.
Und das Beste: jede:r kann neue Webcomponents entwickeln. Aber fangen wir von vorne an:
Hintergrund
Webseiten und Webapps bestehen aus meist drei Komponenten, die das Aussehen und Verhalten festlegen:
- HTML ist das dem Web zugrunde liegende Markup. Es definiert die Struktur einer Website sowie deren Inhalt und ist der einzige Teil einer Website, der auf alle Fälle benötigt wird. Ein Beispiel für eine Website ohne CSS und JavaScript ist z.B. diese Seite (inklusive Tippfehler) – (als iFrame eingebunden). Im Laufe der Jahre hat es ständig Erweiterungen des HTML-Standards gegeben, es kamen neue Elemente hinzu, die, nachdem sie von Browsern unterstützt wurden, Einzug in die Entwicklung von Webseiten gefunden haben.
- CSS legt das Aussehen einer Seite fest. Es definiert Farben, Schriften, Größen und bestimmt das Layout. Ohne CSS würden alle Webseiten sehr ähnlich aussehen – weißer Hintergrund, schwarze Schrift (und alles, was sonst noch in purem HTML möglich ist) und wenig weitere Merkmale, durch die sich Webseiten untereinander unterscheiden würden.
- JavaScript ist die dritte Komponente, die im Web nicht mehr wegzudenken ist. Zu Anfang belächelt und sogar verhasst, ist JavaScript im letzten Jahrzehnt zu einem unvermeidlichen Bestandteil des Webs geworden. Wenn das HTML die Struktur und das CSS das Aussehen einer Website ist, ist JavaScript die Interaktion. Mit JavaScript kann der Inhalt einer Website dynamisch, ohne neu laden verändert werden, es kann auf das Verhalten des Benutzers reagieren und macht das moderne Web erst möglich. Immer neue Frameworks machen die Entwicklung von noch komplexeren Apps und Webseiten möglich und es vergeht kaum ein Jahr, in dem der JavaScript-Standard nicht um neue Funktionen und Möglichkeiten erweitert wird.
Über Jahre hinweg war im HTML-Standard strikt definiert, welche Elemente zulässig sind, und wie sie miteinander kombiniert werden dürfen.
Navigation? Wird in ein <nav>-Element gepackt. Footer? Klar, es gibt ja ein <footer> Element.
Wichtig hierbei ist, dass dies nur eine semantische Auszeichnung ist, welche die Struktur der Webseite definiert. Wie die Navigation und der Footer aussieht, hängt dabei vollständig vom dazugehörigen Styling (CSS) ab.
Aber wie sieht es mit spezielleren Komponenten aus? Beispielsweise mit einem Switcher zwischen Dark- & Light-Mode einer Website, wie man es immer häufiger sieht? Dafür gibt es (und wird es sicher auch) kein spezielles Markup im HTML-Standard geben.
Webcomponents to the rescue
Genau in diese Kerbe schlagen Webcomponents. Webcomponents sind kleine, gekapselte Kombinationen aus den drei Grundbausteinen des Webs: HTML, CSS und JavaScript.
Webcomponents erlauben es jedem Entwickler, selbst HTML-Tags zu ‘erfinden’, die dann, ergänzt um CSS und Javascript, eine Webcomponent bilden.
Auf Webseiten sowie in allen JavaScript Frameworks können Webcomponents eingesetzt werden. Die Einbindung ist einfach: Meist muss nur ein JavaScript-File eingebunden oder über einen Package-Manager installiert werden und schon steht der Verwendung des spezifischen HTML-Tags nichts mehr im Weg.
Um auf das Beispiel von weiter oben zurück zu kommen: Nach der Einbindung des JavaScripts und dem Hinzufügen des Tags <theme-switch> erscheint dieses Element:
Hier findet ihr ein Beispiel https://mahozad.ir/theme-switch/
Im Hintergrund wird dabei ein knapp 2kB großes Skript geladen, das sich um alles kümmert. Es verändert das Aussehen des Elements und setzt im <html>-Tag der Website ein Attribut, auf das das CSS auf der Website reagieren kann. Dies müsste natürlich von jeder Website selbst implementiert werden.
Wieso Webcomponents den Puls der Zeit treffen
- Das Web basiert immer stärker auf Komponenten. Keine Website besteht heutzutage noch aus starren, vordefinierten Seitentypen, die Inhalt immer in der gleichen Struktur abbilden. Eine Hauptanforderung an moderne Webseiten ist es, ein modulares Baukastensystem von Inhaltselementen anzubieten, das den individuellen Umbau jeder Seite möglich macht. Auch alle aktuellen JavaScript-Frameworks funktionieren auf Komponentenbasis. Umso besser ist es also, dass auch der zugrunde liegende HTML-Standard eine Möglichkeit schafft, Komponenten für das Web zu entwickeln.
- Synergien nutzen. Da Webcomponents nicht auf bestimmte Technologien oder Frameworks beschränkt sind, können sie auch überall eingesetzt werden. Wird eine Komponente für die Firmenwebsite entwickelt, ist es oft einfach, dieselbe Komponente auch im Intranet der Firma einzubinden. Damit hat man gleich zwei Vorteile: Das Corporate Branding zieht sich über alle Kanäle durch und Kosten werden reduziert.
- Sie fördern Kollaboration. Der Sinn von Webcomponents ist es, wiederverwendet zu werden. Da dies natürlich nicht nur auf die firmeninterne Welt beschränkt ist, gibt es immer mehr Entwickler, die ihre Webcomponents zur Verfügung stellen. Eine allgemeine Liste vieler Webcomponents gibt es hier.
Eine kuratierte Liste der besten Komponenten, die nicht Teil eines größeren UI-Frameworks sind, findet ihr hier.
Du willst mit jemanden über das Thema plaudern?
Einen kostenlosen Termin mit CEO Susanne vereinbaren!
UX Snacks Vol.09
That’s a wrap on UX Snacks 2024. Am 7. November hat die vierte und letzte Ausgabe in diesem Jahr stattgefunden und wir nehmen mit diesem Recap ganz viel positive UX-Energie mit ins neue Jahr. Und keine Angst: Schon bald verkünden wir die Daten für 2025.
Jetzt lesen
Folge #62 mit Susanne Liechtenecker
In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.
Jetzt anhören