Les Web Components

Cet article est une synthèse sur ce que j'ai lu et entendu sur les Web Components.
Pour faire cet article, je me suis basé principalement sur la vidéo de Julien Vey sur le site d'InfoQ et sur le site html5rocks.

Web Components est un standard du W3C qui est encore à l'état de DRAFT. Donc, ce n'est pas encore pour tout de suite.Cependant, il est déjà possible de les utiliser car les principaux
acteurs du Web ( Mozilla, Google ... ) ont commencé à implémenter cette spécification.

Qu'est ce que c'est ?

Voici la définition que j'ai trouvé sur l'article de Julien Vey d'InfoQ et qui résume bien ce qu'est un Web Component :

Les Web Components permettent aux développeurs de créer des balises HTML personnalisées et réutilisables. À titre d'exemple, voici le squelette d'un composant web pour un tag <my-own-tag> : 

<element name="my-own-tag">
 <template>
   Les éléments HTML ici
 </template>
 <script>
   // la logique implémentée en JavaScript
 </script>
</element

Remarque : Une fois que ce sera standard, il sera possible de ré-utiliser ces balises sur tous les navigateurs !

Pourquoi s'intéresser au Web Component maintenant ?

- C'est un standard du W3C.
- Il est poussé par les principaux acteurs du Web.
- Ce standard va changer le développement web d'aujourd'hui ( il sera possible de faire des composants qui seront compatibles pour tous les navigateurs )

Les navigateurs actuels et les Web Components

Un bon résumé sur l'état d'avancement de la spécification se trouve ici : are we component yet ?
Actuellement, beaucoup de navigateurs ne supportent pas les Web Components.Cependant, il existe une manière pour contourner ce problème : les polyfills.
Les polyfills sont des composants qui émulent les Web Components.Cela permet de commencer à les utiliser
.

Voici une liste des projets :

• x-tags : x-tags est une librairie JavaScript fait par Mozilla qui implémente les Web Component pour tous les navigateurs.
• Polylemer fait par Google et présenté lors de la Google I/O
• Librairie UI pour Dart : web-ui
• toolkitchen

Quelques notions 

Les templates

Voici un exemple de template avec les Web Components :

 <template id="">
 </template>

Un template, c'est un morceau de code réutilisable.La balise template des Web Components ne s'execute pas, ne charge pas d'image en mémoire.

Shadow DOM

Shadow DOM permet de faire de l'encapsulation sans passer par des iframes. C'est une notion qui existe depuis longtemps qui permet de masquer ce qu'il y a derrière une balise.

Exemple :

Dans le source, on met la balise suivante :

<div id="mondiv"></div>


A l'affichage, on aura :

<div id="mondiv">
<h2>mon contenu</h2>
</div>

Pour instancier ce shadow DOM, plusieurs méthodes sont disponibles :

• Utilisation de javaScript

Par exemple :

var shadow = ....
shadow.innerHtml="<h2>mon contenu</h2>"

• Insertion point

On définit un div avec notre contenu :

<div id="host">
</div>

On affiche le contenu avec la balise content :

<content></content>

Custom element

Un Custom element regroupe toutes les notions vues précédemment :

<element name="moncomposant" extends="button" constructor="moncomposant>
     <template>
    </template>
    <scritp>....</script>
</element>

Dans ma page :

<link rel="component" href="moncomposant">
<moncomposant></moncomposant>

Autres notions

Dans ce petit article, je n'ai pas abordé les points suivants les mutation observer et le model driven view qui vous permette de faire du databinding et d'évaluer les performances ...

Plus d'infos

http://www.html5rocks.com
http://www.infoq.com/fr/presentations/web-components
http://www.infoq.com/fr/news/2013/06/webcomponents