Können Web Components die Web-Welt revolutionieren?

Bevor wir diese Frage beantworten können, müssen wir im ersten Schritt analysieren, was man unter dem Begriff Web Components versteht.
Nach dem World Wide Web Consortium (W3C) soll die Web Components Spezifikation einen Weg bereitstellen, mit dem man Web-Anwendungen in der näheren Zukunft besser entwickeln kann. Aktuell gibt es verschiedene Probleme, auf die ein Web Entwickler bei der Entwicklung stößt.

Eines der Probleme ist, dass viele unterschiedliche Seiten einer Web-Anwendung redundanten Code aufweisen. Dadurch steigt die Schwierigkeit, den Code zu pflegen. Des Weiteren gibt es zu wenige Elemente in HTML, sodass die Entwickler mit fremden Bibliotheken, IDs, Klassen und Attributen vorhandene Elemente auf ihre Anforderungen anpassen. Aus diesem Grund wird die Lesbarkeit der Code-Stücke vernachlässigt. Um genau diese Probleme zu verbessern, stellen Web Components aktuell vier verschiedene Funktionen bereit: Custom Elements, HTML Imports, Templates und Shadow DOM.

1. Custom Elements

Das Konzept hinter Custom Elements ist, dass man eigene HTML Elemente zu den vorhandenen hinzufügen kann. Bevor man Custom Elements verwenden konnte, gab es schon Möglichkeiten, eigene HTML Elemente zu erzeugen.

<head>
   <style>
       oio {
           color: blue;
           font-size: large;
       }
   </style>

</head>
<body>
   <oio>Orientation in Objects</oio>
</body>

Der Nachteil solcher Elemente ist, dass sie keine Funktionalität bieten und nur zur Darstellung dienen. Genau diesen Schwachpunkt möchte man mit Custom Elements angehen. Diese Arten von Elemente kennen Sie schon zur Genüge, zum Beispiel der video Tag zum Darstellen von Videos oder das Select Element zur Darstellung einer Auswahlbox. Es sind funktionale Elemente, die wir nun selber erzeugen können.

Um ein Custom Element zu erstellen, muss die Funktion registerElement aus dem document-Objekt aufgerufen werden.

document.registerElement('oio-component')

...

<body>
   <oio-component></oio-component>
</body>

Die registerElement-Methode erwartet mindestens einen String-Wert. Dieser Wert wird für die Bezeichnung des Elements verwendet. Bei der Bezeichnung muss darauf geachtet werden, dass mindestens ein Bindestrich im String vorhanden ist. Sollte dies nicht der Fall sein, dann wird beim Erstellen des Custom Elements ein SyntaxError geworfen.

Damit dieses Element Funktionalität bereitstellen kann, wird der Methode registerElement ein zweiter Parameter übergeben. Das ist ein Objekt, welches das Attribut prototype beinhaltet. Der Inhalt des Attributs prototype muss dem Typ HTMLElement.prototype entsprechen. An dieses Objekt können die selbst definierten Methoden angehängt werden. Zusätzlich kann man die vom HTMLElement.prototype bereitgestellten Methoden auf die eigenen Wünsche anpassen. Dabei sind 4 Callback-Funktionen für Custom Elements relevant.

  1. createCallback()
  2. attachedCallback()
  3. detachedCallback()
  4. attributeChangedCallback(attrName, oldVal, newVal)

Damit man diese vier Methoden für sein eigenes Custom Element anpassen kann, müssen diese überschrieben werden:

 var oioProto = Object.create(HTMLElement.prototype);

 oioProto.hoot = function() {
      console.log('OIO hoot Function !');
  };

 oioProto.createdCallback = function(){
      console.log(" OIO Element");
  };

 document.registerElement('oio-customElement',{prototype: oioProto});

Die Funktionalität von Custom Elements kann man aktuell noch nicht in allen Browsern verwenden. Chrome und Opera unterstützen diese Technologie vollständig. Der Firefox wird diese in der näheren Zukunft bereitstellen, bei IE und Safari ist es aktuell nicht abzusehen.

2. HTML Import

Ein weiteres Konzept von Web Components ist HTML Import. Mit dieser Funktion kann man HTML-Fragmente in ein HTML-Dokument einfügen. Dabei werden nicht nur HTML-Tags geladen, sondern man kann damit jegliche Art von Inhalten einfügen. Unter anderem auch CSS und JavaScript.

oio-widget.comp.html

<script>
    (function(){
        var oioProto = Object.create(HTMLElement.prototype);
        oioProto.hoot = function() {
            console.log('OIO hoot Function !');
        };

        oioProto.createdCallback = function(){
            console.log(" OIO Element");
        };

        document.registerElement('oio-customElement',{prototype: oioProto});
    }());
</script>

index.html

<head>
    <link rel="import" href="html/oio-widget.comp.html">
</head>

Beim Importieren eines HTML-Fragments wird dieses nicht direkt in das DOM-Objekt gehängt. Stattdessen wird eine DOM API für die HTML-Seite bereitgestellt. Um ein bestimmtes HTML-Element ins DOM-Objekt einzufügen, muss dieses Element explizit auf der HTML-Seite angesteuert werden.

oio-widget.comp.html

<div class="oio">
    Welcome OIO
</div>

index.html

<script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    var el = content.querySelector('.oio');
    document.body.appendChild(el.cloneNode(true));
</script>

Auch diese Eigenschaft wird aktuell nicht von allen Browsern unterstützt. Chrome und Opera sind auch hier die Vorreiter. Firefox wird es in der näheren Zukunft umsetzen. Bei IE und Safari ist auch für diese Eigenschaft nicht abzusehen, wann sie implementiert wird.

3. Templates

Die dritte Funktionalität sind die Templates. Mit dieser Technologie kann man Markup-Fragmente erstellen, welche als HTML geparst werden aber zur Laufzeit im DOM Objekt nicht sichtbar sind. Erst bei der Initialisierung des Templates wird das HTML-Fragment in das DOM-Objekt eingefügt. Die Inhalte eines Templates werden vom ihm eigenständig verwaltet und gerendert.

oio-widget.comp.html

<template id="template">
    <style>...</style>
     <div>
         <h1>Web Components von OIO</h1>
         <img src="http://www.oio.de/i/hm/oio-logo.png">
     </div>
</template>

index.html

<div id="oio"></div>
...

<script>
    var template = document.querySelector('#template');
    var clone = document.importNode(template.content,true);
    var oio = document.querySelector('#oio');
        oio.appendChild(clone);
</script>

Ein Nachteil dieser Template-Technologie ist, dass diese keine Data Binding Funktionalität bietet, wie wir sie von Angular JS oder Mustache.js kennen. Diese Eigenschaft von Web Components ist bisher die einzige, die in allen Browser umgesetzt ist.

4. Shadow DOM

Die letzte der vier Eigenschaften von Web Components ist das Shadow DOM. Die Funktionalitäten Create Elements und HTML Import bauen auf Shadow DOM auf. Die Grundidee ist es, HTML-Elemente zu erzeugen und diese dann vor dem Endnutzer zu verbergen. Ein Shadow DOM Element kann folgendermaßen erzeugt werden:

index.html

  <oio-customElement></oio-customElement>
  <div></div>
<script>
   var oio = document.querySelector('div');
   var shadowRoot = oio.createShadowRoot();
       shadowRoot.innerHTML = 'Hello OIO Shadow Element';
</script>

shadowKonsole

Mit dem Analyse-Tool der Browser wird ersichtlich, dass sich der Inhalt vom div Element hinter dem #shadow-root versteckt. Durch diese Eigenschaft kann man nun Funktionen hinter HTML-Elementen verbergen.

Diese Eigenschaft wird aktuell auch nur von Chrome und Opera komplett bereitgestellt. Im Firefox und im Safari wird es in den nächsten Browser-Versionen hinzugefügt. Nur im IE ist es aktuell nicht abzusehen, wann die Funktion vom Browser bereitgestellt wird.

Fazit

Nachdem wir uns die Einzelteile von Web Components kurz angeschaut haben, könnte man zu der Erkenntnis kommen, dass diese Technologie in der näheren Zukunft mehr und mehr Bedeutung in der Web-Welt gewinnen wird. Die Akzeptanz hängt von einem einzigen Faktor ab: Die Umsetzung durch die Browser-Hersteller. Vor allem aus Sicht von Business-Anwendungen wird diese Technologie erst dann interessant, wenn der IE Browser von Haus aus Web Components komplett unterstützt.

Short URL for this post: http://wp.me/p4nxik-2yB
This entry was posted in Web as a Platform and tagged , , , , , , . Bookmark the permalink.

Leave a Reply