6. Juli 2016 von & gespeichert unter Coding, Programmierung.

Web Components sind unter Frontendlern gerade ziemlich im Trend – doch warum eigentlich? Florian hat zum Entwicklerstammtisch geladen und gezeigt, wie Web Components das Entwickler-Leben leichter machen – und auch, wie Kunden davon profitieren könnten. Wir geben euch einen kleinen Einstieg ins Thema:

Wie funktioniert Web Entwicklung momentan?

Um einer Website neue Funktionen einzuhauchen, müssen die unterschiedlichsten Plugins und Frameworks installiert werden – was technisch ziemlich umständlich und dadurch auch extrem zeitaufwändig sein kann: Denn Plugin A braucht das Framework X in der Version Y, um zu funktionieren, während Plugin B nur mit Framework X in Version Z zum Laufen zu bringen ist. Das Zusammenspiel dieser unterschiedlichen Komponenten verursacht dabei oft Probleme.

Ein Beispiel:

Wird ein neues Widget auf der Seite hinzugefügt, kann dieses das Styling der anderen Elemente und Anwendungen auf der Seite verändern. Die Website soll in ihrem Design und in ihrer Funktionsweise aber natürlich genau so bleiben, wie sie bereits ist und eben nur um eine Funktion erweitert werden. Momentan lässt sich dies nur mithilfe von iFrames sicherstellen. Diese bilden – wie der Name schon sagt – einen Rahmen um die Elemente und kapseln sie ab, sodass sie sich nicht gegenseitig beeinflussen können. Soweit, so gut – doch es gibt einen Haken an der Sache: iFrames sind nicht besonders SEO-freundlich.

Wie machen Web Components die Entwicklung leichter?

Die komponentenbasierte Entwicklung von Web-Anwendungen macht es wesentlich einfacher, neue Funktionen einzubinden, da sie allgemeingültige und einheitliche Standards für alle Komponenten definiert.

Schauen wir uns das einmal am Beispiel einer Website an: Diese wird in verschiedene Komponenten unterteilt, die an unterschiedlichen Stellen immer wieder verwendet werden können – dazu gehören z. B. das Seitenlayout, Slider für Bilder, Textfelder oder Kontaktformulare. Die Web-Anwendung kann dann einfach aus den verschiedenen Komponenten zusammengesetzt werden.

Jede Komponente muss dafür nur einmal programmiert werden. Zwar muss in die Entwicklung der ersten Komponente dann etwas mehr Aufwand hineingesteckt werden, diese kann anschließend jedoch ohne größeren Entwicklungsaufwand weiterbenutzt und für viele, beliebige Projekte verwendet werden. Das erhöht auch die Qualität der Komponenten: Werden sie von vielen Usern genutzt, werden sie auf Herz und Nieren getestet.

Welche Technologien stecken dahinter?

  • HTML Templates: Im HTML-Template wird der eigentliche HTML-Code der Komponente geschrieben.
  • Shadow DOM: Damit die Komponenten nicht die einbindende Seite beeinflussen und umgekehrt, werden diese im Shadow DOM gekapselt. Somit ist sichergestellt, dass sich die Komponente in jeder Anwendung gleich verhält bzw. gleich aussieht.
  • HTML Imports: Mithilfe der  HTML Imports können die Komponenten in eine Anwendung eingebunden werden.
  • Custom Elements: Hiermit lassen sich Elemente mit eigenen Namen und damit auch einer eindeutigen Beschreibung erstellen. Neben Standard-HTML-Elementen wie beispielsweise „p“ für Paragraph oder „div“ für Container, können eigene Elementnamen für die Komponente deklariert werden. Das macht die Programmierung strukturierter und die Elemente sind besser abzukapseln.

Wofür werden Web Components eingesetzt?

Im Prinzip lassen sich in einer Komponente die gleichen Dinge realisieren wie auf einer „normalen“ Seite auch. Der Vorteil ist allerdings, dass sich die Komponente viel leichter benutzen und einbinden lässt, da sie alle benötigten Abhängigkeiten (wie Styling und Skripte) bereits selbst mitbringt.

Das zeigt sich z. B. bei der Einbindung eines Sliders:

Momentan braucht ein Entwickler vier Schritte, um einen Slider in eine Website einzufügen:

  • Einbinden des Slider-Skripts
  • Einbinden des Slider-Stylings
  • Im HTML einen Container deklarieren und darin die Slider-Elemente einfügen
  • Diesen Container in einem eigenen Skript referenzieren und den Slider initialisieren

Mit einer Komponente sind nur noch zwei Schritte nötig:

  • Einbinden der Slider-Komponente (bringt alle Stylings, Skripte, etc. selber mit)
  • Im HTML eine Slider-Komponente deklarieren und darin die Slider-Elemente einfügen

Auch uns könnte eine agentureigene Komponentensammlung die Arbeit noch erleichtern: Diese wäre dann bereits erprobt und könnte ganz einfach in jedem Projekt wieder eingesetzt werden. Das hilft, die anfangs erwähnten Probleme bei der Einbindung von mehreren Komponenten und Widgets zu vermeiden. So sparen wir Zeit – und der Kunden natürlich auch Geld. Anhand der bereits vorhandenen Komponenten könnten Kunden außerdem noch besser abschätzen, wie die gewünschte Website aufgebaut ist und wie sie funktioniert.

Auf dem Papier sind Web-Components eine tolle Sache und würden helfen, Komponenten einfach per Plug-and-play zusammen zu bauen, leider unterstützen (noch) zu wenige Browser diesen Standard. Nur die auf der Blink-Engine basierenden Browser Chrome und Opera unterstützen alle Features. Und dass, obwohl bereits gute drei Jahre vergangen sind, seit diese „Revolution der Web-Entwicklung“ mit großen Hoffnungen erstmals angekündigt wurde. Zwar ist es möglich, einen Teil der fehlenden Unterstützung durch Skripte (Polyfills[1]) nachzurüsten – für den performanten Einsatz in realen und vor allem größeren Projekten ist diese Lösung allerdings nicht ideal.

Momentan hilft wohl nur: abwarten und weiter testen. Falls ihr euch in der Zwischenzeit selbst etwas mehr in die Thematik einlesen wollt, haben wir hier ein paar Linktipps für euch gesammelt:

Interessante Artikel:

http://webcomponents.org/articles/

https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/

https://css-tricks.com/modular-future-web-components/

Sammlung bisher vorhandener Web Components:

https://customelements.io/

Browserunterstützung testen:

http://caniuse.com/#search=HTML

Tech Talks und Videos:

A Future Called Web Components – Tech Talk von Zeno Rocha: https://www.youtube.com/watch?v=XYlgxre_AF4

Practical lessons from a year of building web components – Google I/O 2016: https://www.youtube.com/watch?v=zfQoleQEa4w

 

Titelbild: Designed by Freepik

[1] Polyfills sind Skripte, mit welchen neuere, fehlende Funktionen in einer älteren Browserversion  nachgerüstet werden können.




Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.