Web Component : Introduction à polymer

Lors d’un précédent article je vous ai fait une présentation des web component lors de laquelle on a pu voir l’utilité de ceux ci mais leurs principal inconvénient : la compatibilité. Nous allons a présent voir que cette difficulté peut être facilement effacé et que l’écriture de web component avec polymer se trouve assez simplifié.  

Vaincre les incompatibilités :

Comme vu précédemment chacun des piliers nécessaire au fonctionnement des web composant ne sont pas implémenté au même niveau au sein de chaque navigateur. Pour résoudre ce problème de différence et avoir ainsi des composant disponible sur chaque navigateur une surcouche javascript sera a mettre en amont : polyfills.

Pour obtenir polyfills vous pouvez simplement utiliser bower :

Enfin vous avez juste a inclure le fichier javascript dans vos pages utilisant les web composants :    

Utiliser polymer pour vos composants :

Polymer est un projet de l’entreprise Google datant de 2013. Il a pour but de permettre l’utilisation de web composant de maniéré simple grâce à une librairie javascript. Il est impératif de noter qu’il existe de nombreuse différence entre la version 0.7 et 1.0. Nous parlerons uniquement de la version 1.0 car il s’agit de la seule que j’ai eu a manipuler et surtout parce quelle est considéré comme production ready par google.

Pour les plus curieux voici le dépôt github du projet : polymer/polymer

Installer polymer :

Rien de plus simple avec bower :

L’un des principaux avantages de polymer hormis le fait de pouvoir facilement créer ces propres composant est bien entendu la grande variété de composant que l’on peut trouver sur le net et donc directement utilisable.

Composants polymer disponible et utilisable :

Comme je l’ai dit dans l’article précédent l’une des forces de web composant est le fait de pouvoir ré-utiliser nos composant même dans d’autres projets du fait de leurs isolations. Les composant écrit avec polymer n’échappe pas a la règle. On peut donc trouver :

• des composants Google ( youtube, google map etc) pour pouvoir utiliser les services facilement
• des composants dédié au material design (paper componant)
• des composants utilitaires (iron composant)
• des composants pour firebase permettant de faire du web temps réel
• et bien d’autres ….

   Vous pouvez trouver vos composant sur les sites suivants :

• Polymer Element (composant plutôt officiel)
• Custom Element (banque de composant comme packagist)

Créons un composant :

Nous allons donc créer un composant avec polymer. Le composant que l’on va faire affichera les informations relative a un stream sur twitch. Pour cela nous utiliserons l’api publique du service qui renvoie les informations nécessaire lorsque le stream est actif.   Commençons par établir la structure de notre composant et de la page l’utilisant :  

On a donc un composant vide et la page pouvant inclure notre composant. La première étape est de récupérer les données depuis l’api. Pour cela nous avons a exécuter une requête ajax.

Dans le fichier index on a rajouté un attribut stream-name qui corresponds a la propriété streamName dans notre composant. Dans le composant on forge l’url associé au stream a l’instanciation via la méthode ready. Notre appel ajax est fait par l’élément iron-ajax qui lors d’une réponse appelle la méthode hresponse. Il nous reste plus qu’a mettre en forme notre élément a partie des données reçues. Nous avons donc le code suivant :

A noter :

L’on utilisera des pour afficher les variables, des la modification de la propriété la variable affiché change. Il faut que ces éléments soit isolé dans une balise ou attribut – les concaténation de fonctionne pas.

L’aspect visuel est sinon géré en html classique ce qui permet d’avoir des composant de tout type.

J’espère que cet article vous as donné envie d’utiliser des web composants, lors du prochain nous verrons un exemple un peu plus poussé avec les notions de boucles etc. N’hésitez pas a laisser un commentaire pour avoir plus d’information sur cette technologie.