Web Component : Présentation

Pour mon dernier jours au sein de mon ancienne société j’ai eu a présenter ma dernière Reutek. J’ai choisi comme sujet les web component et plus particulièrement l’implémentation a l’aide de Polymer. Etant donnée l’attrait de ceux-ci de la part de ceux présent a cette réunion – moi compris pourtant je ne suis pas très attiré par le développement front – je me suis dit qu’il faudrait que j’y consacre une série d’article.

Dans ces articles je vais expliquer qu’est ce qu’un composant (et plus particulièrement un web composant) pour que vous puissiez simplifier vos pages html.

Qu’est ce qu’un composant ?

Pour résumer un composant est une portion identifiable d’un programme plus large qui a pour but d’apporter un ensemble particulier de fonctionnalités. Bon je l’accorde dit comme ça ce n’est pas très clair et pourtant en tant que développeur ce concept vous est familier j’en suis sur.

Prenons les lego ci-contre, certains sont différents en eux pourtant on peut les assembler ensemble pour effectuer une construction de notre choix. Chaque type  de blocs a une fonction définie dans notre constructions et permettent ensemble d’avoir notre construction finale.

Maintenant que vous avez compris la notion de composant je vais passer à la partie qui nous intéresse vraiment les web composant que j’appellerai souvent web component.

Les composants adaptés au monde du web.

Vous vous doutez bien que lorsque l’on peut isoler des blocs, les factoriser pour pouvoir s’en servir dans le futur sur divers projets on ne ce gène pas. Autant ne pas re-inventer la roue a chaque fois. En cela les web component peuvent être utiles.

Toutefois je dois vous prévenir de ne pas les utiliser encore en production. 

Les raisons sont simples :

• Même si il s’agit d’un projet porté par un working group du W3C, il n’y a pas encore de norme arrêté – et ça risque de prendre un peu de temps avant de l’être
• Seuls certains navigateurs sont compatibles.

Les templates

Il s’agit des modèles de base, pour être plus exact il s’agit de la structure à dupliqué. Ce bloc html ne sera pas évalué.

Pour “l’instancier” nous avons besoin d’un peu de javascript. L’idée est de récuperer le contenu de celui ci pour l’injecter dans le DOM en tant qu’élément visible comme ceci par exemple :  

Le shadow DOM

Comme en programmation classique lorsque l’on encapsule une portion de code l’on souhaite que celle ci ne soit pas directement injecté dans les sources les polluants. Ceci reste vrai avec les web composant a l’aide du shadow DOM. Pour explique simplement il s’agit d’un nouvel arbre DOM totalement indépendant situé  dans un élément. De base il ne sont pas visible (on peut dans les réglages de l’inspecteur de code de chrome les voir en cochant show user agent shadow DOM).

L’une des balises utilisant le shadow DOM la plus connue est la balise HTML5 video –  derrière cette simple balise se trouve un ensemble d’élément html définissant les divers boutons etc.)

On entendra parler de Shady DOM par moment la différence est qu’au lieu d’être une fonctionnalité native comme le shadow DOM il s’agit d’élément dans le DOM classique avec une classe style-scope permettant d’émuler le shadow DOM.

Les custom element :

Il s’agit de bloc englobant les Template ayant pour but de gérer le cycle de vie du composant. Ainsi l’on pourra avoir nos balises personnelle avec par exemple notions d”héritage.

Les HTML Imports

On arrive sur une fonctionnalité bien pratique pour pouvoir réutiliser nos composant dans plusieurs projet. La notion d’import en effet il sera donc possible d’écrire notre composant dans un fichier html séparé et de juste l’importer avant l’utilisation. Ainsi on peut importer dans notre page des fichier externe – toutefois les import n’importerons pas le code HTML a proprement parlé juste les éléments et template.

Pour cela rien de plus simple

Les technologies de web composant on l’air vraiment intéressante mais entre la complexité de l’ensemble et les problèmes de compatibilité on peut vite se démoraliser et ne pas les utiliser. Mais n’ayez craintes il existe des librairies permettant d’utiliser les web composant de manière plus uniforme et simple. Notamment POLYMER qui fera l’objet de futur articles.