Zum Inhalt springen

Web-Components: Das Ende der Front-End Odyssee?

Veränderung ist die einzige Konstante

Heraclitus

Während dieser Leitsatz in allen Bereichen des Lebens gilt, so ist er besonders für langjährige Web-Entwickler ein großer Teil des Berufslebens. Front-End-Entwickler sind hiervon besonders betroffen. So mancher kennt folgendes Szenario:

7 Uhr morgens
Ein milder Morgen, die Sonne scheint durch die Jalousien, der angenehme Geruch von Kaffee steigt durch die Nase. In gewohnter Morgenroutine öffnet der Entwickler den Browser und informiert sich über Neues in seinem Fachbereich und..

nicht schon wieder!
Neues Major-Update im vor einem Monat gelernten MVC-Framework, eine Ankündigung eines neuen UI-Systems, Breaking Changes in einer neuen Version von Angular, am besten sofort updaten, neue Subframeworks zu React, Svelte wird beliebter, benutze am besten diesen Package-Bundler, etc..

Die Freude zu Neu-Entwicklungen hält sich oft in Grenzen

Während Updates das Web als technisches Ökosystem eigentlich vorantreiben sollen, macht es viele Entwickler eher unsicher. Schließlich hält das andauernde hinterher laufen bei Entwicklungstrends in großen Frameworks davon ab, sich mit relevanten Themen auseinanderzusetzen.

In den letzten Jahren ist die Standardisierung des Webs jedoch deutlich vorangegangen. ES5 ist hier mit vielen Features ein einschneidender Faktor. Bibliotheken wie jQuery werden in neuen Web Projekten kaum noch benötigt. Das wäre vor ein paar Jahren noch kaum vorstellbar gewesen!

Inzwischen implementieren auch Browser Web-Standards um die zentralen Elemente aller Front-End Frameworks zu standardisieren: Komponenten – im Browser die sog. Web-Components.

Was sind Web-Components?

Web-Components setzen sich aus verschiedenen Web-Standards zusammen.

Besonders wichtig hierbei:

  • CustomElements – die API, um HTML um eigene Tags zu erweitern
  • Shadow-DOM – die API um eigene HTML-Komponenten in einem „isolierten“ DOM zu kapseln
  • HTML-Templates – Ermöglichen statischen und variablen Content innerhalb der Komponente
Abb. 1: CustomElements und Shadow-DOM im Einsatz

Diese Elemente werden fortan behandelt wie native HTML-Elemente, haben also auch Properties und Attribute. Sie können übrigens ebenfalls mit Custom Events vom DOM heraus kommunizieren.

Web-Standards stärken die Applikation der Zukunft

Mit Web-Components können Entwickler die Zukunft ihrer App sichern. Standards sind definitiver, genormt und vor allem universal einsetzbar. Als operativer Manager ist es sicherlich deutlich leichter ein Investment zu machen, wenn sicher ist, dass die zu Grunde liegende Technologie auch noch in einem Jahr existiert und dessen Entwicklung nicht an ein anderes Unternehmen gekoppelt ist.

Ist das ganze in Konkurrenz zu bestehenden Web-Technologien? Im Gegenteil!

Im Sinne von „View-Logik und Business-Logik trennen“ , kann in Web-Components die UI-Logik umgesetzt werden. Die Business-Logik wird dementsprechend separat mit der Technologie der Wahl implementiert. Dadurch werden Komponenten automatisch zur Pattern Library!

Neue Technologien und Standards lassen sich vereinen!

Natürlich ist der Einsatz von Bibliotheken nicht immer schlecht, sollte aber zum UseCase passen. Ganz gegenteilig verhalten sich Compiler wie Stencil.Js oder Polymer. Diese machen das Arbeiten mit dem Web-Components Standard leichter. So bieten diese daher alle Vorteile eines Standards und gleichzeitig auch alle Vorteile eines OpenSource-Frameworks!

Zusammengefasst können Standards und darauf aufbauende Technologien also für alle Parteien Mehrwert generieren. Für den Entwickler, dank der Standardisierung von Technologien; für das Produkt, dank steigender Planbarkeit und Aufgabentrennung; und für den Kunden, dank steigender Device-Kompatibilität und Performance!

Weiterführende Links

Habe ich Ihr Interesse geweckt?
Kontaktieren Sie mich!

Gerne liefere ich Ihnen ein unverbindliches Angebot zu Ihrer Idee!

info@slezak-it.de