Actuellement, quand on parle de widget web, on pense Bootstrap, Jquery UI, plugins JQuery, ExtJs, … Cela implique l’utilisation d’une structure de code HTML adapté (avec des classes, des éléments spécifique, …), du javascript, du CSS. L’intégration de ces widgets/composants n’est pas forcément très aisé. Je vais vous parler un peu aujourd’hui du futur du web : les web components (la spécification n’est encore validée et est en cours d’écriture). Le but des web components est de pouvoir créer des widgets évolués qui prendront la forme de nouveaux élément HTML (Le concept des directives dans AngularJS se rapproche un peu des web components). Cela permet notamment :

• la réutilisation et le partage de composant
• une meilleur isolation et donc une intégration plus aisée
• d’avoir du code HTML plus propre

Les web components comportent 4 principales composantes (avec un lien vers un article sur html5rocks.com) :

• Template : permet de définit du code html non interprétés mais utilisable par la suite
• Custom element : permet de créer ses propres balises html
• Shadow DOM : permet d’encapsuler vos composants (comme une coquille qui permet de « protéger » votre composant par rapport à la page le contenant, notamment au niveau des styles.)
• Import : permet le chargement de ressources externes.

Ces technologies sur lesquelles reposent les web components ne sont pas encore implémentées (ou en partie) dans les navigateurs (mais cela est en cours). Cependant, il y a 2 librairies (qui utilisent des polyfills) qui permettent de jouer avec dès aujourd’hui :

• Polymer : poussé par Google
• X-Tag : poussé par Mozilla

Personnellement, j’ai plus entendu parlé de Polymer que de X-Tag, je me suis donc plus intéressé à lui.

Polymer

Polymer est plus qu’une collection de polyfills permettant d’utiliser les web components. Il est composé de plusieurs parties :

• Platform : les polyfills (a priori utilisés par X-Tag aussi)
• Core : Une librairie qui permet de simplifier la création de web components. Polymer permet notamment d’avoir du data-binding bi-directionnel.
• Elements : une liste de composants

La philosophie de Polymer est « Tout est un élément ». Ainsi vous avez des éléments non visuel comme un élément ajax ou local storage !!! Un exemple avec un composant Ajax :

<polymer-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
 params='{"alt":"json", "q":"chrome"}'	 	 
 handleAs="json"
 on-polymer-response="{{handleResponse}}">
<polymer-ajax>

Je vous invite à regarder cette vidéo de présentation par Eric Bidelman, un des membres de l’équipe de Polymer. Voici une démo d’un element polymer que j’ai créé qui affiche les informations d’un compte github. Le code est dispo sur github.

Liens

• Le guide de démarrage de polymer
• Un github avec des exemple de web components
• Un site répertoriant des web components
• Une présentation de Polymer