Créer une application web HTML5 avec des web components Polymer

Nous allons voir comment créer rapidement une petite application web (Single Page App) en assemblant des web components. Nous allons pour cela utiliser Polymer. Cette bibliothèque de web components propose plus de fonctionnalités « out of the box », ainsi qu’une collection d’éléments très utiles.

Installation de Polymer

Polymer peut être récupéré avec Git à partir de Github, ou bien en téléchargeant le ZIP, ou encore en utilisant Bower. C’est cette dernière méthode qui est officiellement recommandée, et que je vais vous présenter.

Installez Bower. Si Bower n’est pas encore configuré dans votre projet, exécutez cette commande à la racine de votre projet pour créer un fichier bower.json :

Puis installez Polymer :

L’installation de Polymer installe également la dépendance webcomponents.js.

Pour installer les core-elements :

Structure de l’application

Pour créer le layout de l’application, on peut utiliser un élément core-scaffold :

Avec peu de code, on obtient ceci :

Pour l’affichage du contenu, on va utiliser l’élément core-animated-pages, qui permet de switcher entre plusieurs pages de façon animée :

Notez les attributs layout, vertical, center-center, fit. Ce sont des attributs apportés par Polymer pour la mise en page. Il est possible de positionner, centrer, aligner des éléments HTML sans écrire une seule ligne de CSS !

Utiliser du Data Binding

Bon c’est bien beau tout ça, mais notre contenu n’est pas du tout dynamique (l’attribut selected reste à 0 ce qui affiche la première page). Pour cela, on va utiliser du two-way data binding, mécanisme apporté par Polymer aux templates HTML, qui permet de lier la valeur d’un attribut ou d’un élément de texte à une variable du modèle de template. Pour s’en servir en-dehors d’un composant Polymer, on ajoute un template avec l’attribut is= »auto-binding » :

Puis, on ajoute un binding {{page}} sur l’attribut selected du menu :

Et sur l’attribut selected du core-animated-pages :

Le menu est désormais relié aux pages. En cliquant sur l’entrée « People », la page « People » s’affiche, etc.

Requêtes Ajax

Le composant core-ajax permet de faire des requêtes Ajax. Utilisons-le pour obtenir la liste des projets Polymer dans Github :

Ici, le paramètre auto indique que la requête XHR est faite automatiquement quand l’attribut url est modifié. Un événement core-response permet de traiter la réponse (ici en JSON). On ajoute une callback pour ajouter un paramètre projects au modèle du template, qu’on va pouvoir utiliser comme data binding :

On utilise maintenant un template itératif de Polymer pour afficher le contenu de projects :

L’attribut repeat du template permet de générer un fragment de DOM pour chaque élément du tableau projects.
Et voici le résultat :

Créer un nouveau composant

Nous allons maintenant voir comment créer notre propre composant Polymer. Ici, on veut générer une carte pour afficher les détails d’un projet Github.

Structure du composant

Dans un fichier project-card/project-card.html, créons la structure du composant :

Cette syntaxe permet de créer et enregistrer un nouvel élément project-card, avec un template qui sera cloné et ajouté au Shadow DOM. L’attribut noscript indique qu’il n’y a pas de JavaScript associé, et l’élément est ajouté au registre automatiquement.

Ajouter des attributs

On désire ajouter des attributs pour rendre notre composant paramétrable. On peut utiliser pour cela l’attribut attributes :

Faisons le lien entre nos attributs et le contenu de notre composant en utilisant des data bindings :

Utilisons ce composant pour afficher les projets Github de Polymer dans notre index.html :

Voilà ce que ça donne :

Un peu de style

On peut modifier l’aspect du composant en ajoutant une balise style dans son template :

Et voici ce qu’on obtient dans l’application :

Scripter le composant

Pour scripter le composant et programmer son fonctionnement, on peut ajouter une balise script dans la définition du composant (sans oublier de retirer l’attribut noscript) :

On peut y trouver les callbacks du cycle de vie du composant :

  • created : appelé à la création de l’élément ;
  • domReady : appelé quand les enfants et les voisins de cet élément dans le DOM existent ;
  • ready : appelé quand ce composant Polymer est prêt ;
  • attached : appelé quand cet élément a été inséré dans le DOM ;
  • detached : appelé quand cet élément a été retiré du DOM ;
  • attributeChanged : appelé quand un attribut a été ajouté, retiré, modifié.

Ici, on crée une callback sur l’attribut name pour modifier une propriété du composant isPolymer, utilisée dans une expression de data binding pour mettre en valeur le projet Polymer. Résultat :

Vous pouvez jeter un coup d’œil au code source de cette application sur Github (j’ai généré le projet en utilisant Yeoman et le générateur Polymer).

Conclusion

Comme vous le voyez, il est très simple de créer des composants Polymer et de les assembler pour créer une application web.

2 thoughts on “Créer une application web HTML5 avec des web components Polymer”

  1. Le projet de base d’exemple n’est pas du tout construit de cette façon cela m’étonne, quelle est la meilleurs méthode?

  2. @Durand : attention, depuis l’écriture de cet article (Polymer 0.5), Polymer a évolué. Si les concepts restent similaires, le code présenté n’est pas compatible avec la version actuelle de Polymer (1.0).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

deux × un =