Développer avec POLYMER

Polymer

Depuis quelques mois, on entend de plus en plus parler des Web Components, un standard  en cours de normalisation au sein du W3C. C’est ici l’occasion de présenter succinctement, ce que sont les Web Components et comment développer une application avec Polymer, un framework développé  par Google.

Web Components

Le but des Web Components est de fournir nativement  aux développeurs d’applications front-end les outils nécessaires afin de travailler à partir de composants encapsulés, réutilisables et customisables.

Pour cela, ils se basent sur les 3 notions suivantes :

  • Imports HTML : à l’instar de JavaScript ou de CSS, permet de charger une ressource supplémentaire en appelant un fichier externe.
  • Custom Elements : à travers un mécanisme de templating, permet de définir ses propres composants HTML/JavaScript/CSS pouvant être réutilisés par différentes applications.
  • Shadow Dom : permet l’encapsulation d’un DOM dans un autre DOM. Chaque élément est responsable de sa propre implémentation et donc des éléments qu’il expose à l’extérieur. De plus, chaque DOM supporte un scope permettant notamment de se prémunir des collisions d’identification et de style.

Aujourd’hui, Google et Mozilla travaillent tous les deux sur l’intégration des Web Components dans leur navigateur (c’est déjà le cas pour Chrome depuis la version 36) et ont chacun développé un Framework permettant d’exploiter cette nouvelle technologie : il s’agit des x-Tags chez Mozilla et de Polymer chez Google.

 

Polymer

Polymer offre un ensemble d’éléments visuels et non visuels réutilisables permettant de définir des animations, des menus, des layouts, des requêtes AJAX… et propose des fonctionnalités telles que le data-binding ou la gestion des évènements.
En attendant que l’ensemble des navigateurs supporte nativement cette nouvelle norme, Google a développé un ensemble de polyfills permettant d’exécuter, de façon transparente, des applications comportant des Web Components.

Polymer1

Construire une application Web avec Polymer

Initialisation de l’application – Ajout d’un composant

Tout d’abord, il est nécessaire d’ajouter le script platform.js au sein de la balise head. Ce fichier rassemble tous les polyfills dont a besoin un navigateur qui n’implémente pas encore les web components. On peut ensuite importer du code html grâce à la balise <link rel= “import”> puis utiliser ce composant à l’intérieur de notre page.


Polymer

Polymer

Définition d’un composant

Polymer permet de définir ses propres composants grâce à la balise <polymer-element>.

Polymer

Celle-ci inclut une balise <template> qui définit la structure interne du composant (le shadow DOM). Ici, l’élément map-service exécute une requête AJAX et renvoi un tableau de markers. Ces markers sont ensuite affichés dans la page grâce au data-binding.

Polymer 5

 

Les points d’insertion

Pour appréhender cette notion, il faut faire la différence entre le Shadow DOM (définit par le custom element), le Light DOM (qui utilise le custom element) et le Composed DOM (le DOM rendu par le navigateur). Les points d’insertion, définis par la balise <content> , permettent d’insérer du contenu à l’intérieur d’un élément custom.

Polymer

L’élément ci-dessus pourra être utilisé de cette manière :

 Polymer

A l’affichage, le contenu du light DOM sera distribué à l’intérieur du shadow DOM afin de constituer le composed DOM suivant :

Polymer

 

Polymer

 

L’Héritage

Avec Polymer, il est possible de définir ses propres éléments, mais également de les étendre.

Polymer

Etendre d’un élément se fait donc simplement en utilisant le mot clé extends. La balise <shadow> détermine le point d’insertion du shadow dom de l’élément parent. On constate également que l’on peut redéfinir une fonction héritée et appeler la méthode parente en utilisant this.super().Ce composant peut maintenant être réutilisé :

Polymer

Polymer

 

Un exemple d’application

Afin d’appréhender ce nouveau framework, nous avons développé une application intégrant différents composants dont la majorité des exemples de cet article sont issus. L’application est disponible ici. L’outil de développement de Google Chrome nous permet d’observer le DOM suivant :

Polymer

On constate l’apparition de nouveaux éléments que l’on ne connaissait au sein d’un DOM : les #shadow-root. Ils présentent les templates de nos composants encapsulés. Les contenus ne sont donc pas des fils de nos shadow-root mais du shadow-host (un élément qui héberge un ou plusieurs shadow-root). Ces contenus sont ensuite redistribués au sein des templates pour le rendu graphique.

Conclusion

Les Web Components proposent de repenser la façon dont nous concevons aujourd’hui les applications web. Elles seront orientées composants et il devrait être plus facile de partager les bénéfices de ces blocks encapsulés au sein de la communauté.
On note de nombreuses similitudes entre Polymer et AngularJS. Les 2 technologies fournissent notamment des mécanismes de templating et de data-binding bidirectionnel, mais Polymer introduit la notion de Shadow-Dom qui rend l’encapsulation du JS, des CSS et du HTML possible fournissant ainsi de réels composants agnostiques.
Si Angular propose également de bâtir des composants réutilisables (les directives), il ne permet rien au niveau de l’encapsulation de style. De plus leur implémentation reste particulièrement douloureuse à appréhender et l’héritage est impossible.
Malgré cela, Angular est aujourd’hui mature et propose un écosystème riche qui repose sur une communauté chaque jour plus importante.
Aujourd’hui en version alpha, il est difficile de savoir si Polymer deviendra un nouveau standard de développement mais il s’inscrit dans une stratégie long terme de Google alors qu’AngularJS n’était à la base qu’un projet satellite. Une fois mature et adopté, se posera inévitablement la question de la coexistence entre ces 2 Frameworks.

Quelques liens :

Share
Olivier THOMAS
Olivier THOMAS

1257

Leave a Reply

Your email address will not be published. Required fields are marked *