//

Ein Blick auf Web Components

25.10.2018 | 9 Minuten Lesezeit

Wenn es um moderne Web-Anwendungen geht, dann führt momentan (fast) kein Weg an Angular und React vorbei. Natürlich gibt es hier sehr interessante Alternativen wie Vue.js, Ember und Co, in größeren Projekten spielten diese aber 2017 eine wesentlich kleinere Rolle. Natürlich stellt sich die Frage, wie es in einem schnelllebigen Ökosystem rund um JavaScript & Co in den nächsten Jahren weitergeht. Sicherlich werden auch 2018 komponentenbasierte Frameworks den Markt dominieren – am Horizont zeichnet sich aber seit einer Weile eine Alternative ab: Web Components.

Bei Web Components handelt es sich um eine Reihe von Features, die momentan vom W3C den HTML- und DOM-Spezifikationen hinzugefügt werden. Web Components erlauben es, wiederverwendbare Komponenten für Web-Anwendungen zu erstellen. Ein Konzept, das wir von Angular und React schon kennen.

In diesem Beitrag werfen wir einen Blick auf diese Features und welche Möglichkeiten sie bieten.

Beispiel mit React

Nehmen wir als Beispiel eine Liste von Strings, die wir darstellen möchten. In React sieht das dann so aus:

Das fühlt sich schon sehr nach “eigenem” HTML an. Während React aber nur erlaubt, die eigenen Komponenten zu verwenden, ermöglichen es Web Components, eigene HTML-Elemente zu definieren, die dann auch wie normales HTML in eine Seite integriert werden können. Sie lassen sich also auch serverseitig einfach einsetzen. Ein weiterer Vorteil: Sie verhalten sich wie HTML und können daher auch mit jeder JavaScript-Bibliothek und jedem Framework verwendet werden, das mit HTML umgehen kann (z.B. für Events).

Außerdem basieren Web Components auf Web-Standards und haben daher eine höhere Zukunftssicherheit. Bei der Bewertung müssen wir aber auch einen Nachteil berücksichtigen, den Web Components momentan leider mitbringen: Noch sind Web Components nicht in jedem Browser ohne Weiteres verfügbar. Man kann diese Funktionalität aber über Polyfills nachrüsten.

Polyfills

Polyfills erlauben es, Funktionen, die im Browser momentan nicht unterstützt werden, nachzurüsten. Dies kann bedeuten, dass die Performance nicht der nativen Implementierung entspricht und ist zusätzlicher Ballast für den Nutzer, da das jeweilige Skript geladen und ausgeführt werden muss.

Überblick

Wenn wir von Web Components sprechen, meinen wir vier Features, die wir uns im Folgenden genauer ansehen werden:

  • HTML Templates: Eine Möglichkeit mit Hilfe des

Beitrag teilen

Gefällt mir

0

//

Weitere Artikel in diesem Themenbereich

Entdecke spannende weiterführende Themen und lass dich von der codecentric Welt inspirieren.

//

Gemeinsam bessere Projekte umsetzen

Wir helfen Deinem Unternehmen

Du stehst vor einer großen IT-Herausforderung? Wir sorgen für eine maßgeschneiderte Unterstützung. Informiere dich jetzt.

Hilf uns, noch besser zu werden.

Wir sind immer auf der Suche nach neuen Talenten. Auch für dich ist die passende Stelle dabei.