Initiation à Polymer, le nouveau framework web de Google
lundi 1 décembre 2014 à 11:06Un article un peu particulier aujourd'hui, qui devrait plaire à tous les développeurs web qui cherchent une nouvelle techno avec laquelle jouer pour se dégourdir les doigts. Pour ce tuto, je me suis fait aidé d'Erwan Martin et Jim Laurie, tous les 2 développeurs chez Kontest et experts en Polymer / Material Design. Ce sont eux qui ont rédigé le tuto ci dessous et qui partage leur expérience.
Polymer, pour ceux qui n'en auraient jamais entendu parlé, c'est un nouveau framework développé par Google permettant de créer rapidement des applications web à l'aide de composants préexistants. Comme d'autres frameworks tels que X-Tag (Mozilla), Polymer repose sur les Web Components. Il s'agit d'une spécification en cours de standardisation par le W3C permettant la création de composants HTML indépendants et réutilisables.
Polymer
Pour faire simple Polymer permet de découper une application web en plusieurs morceaux (composants), indépendants, qui contiennent le code HTML (structure), le style CSS et le code Javascript (intelligence du composant). Un composant peut par exemple être un menu, un bouton ou encore un widget Twitter. Il existe un ensemble de composants Polymer préexistants qui permettent de gagner du temps pour démarrer une application web.
Ce tutoriel pour vous initier à Polymer est découpé en 4 parties :
- Les mutations d’objets
- Les web components
- Le positionnement
- Les animations
Material Design
Ce nouveau framework permet par exemple d’appliquer les règles du Material Design dans une application web. Ce nouveau langage visuel, lui aussi développé par Google, est pensé pour maximiser le confort de navigation et simplifier la prise en main des applications. Pour être le plus intuitif possible, il s’inspire directement des matériaux tels que le papier et l’encre, il fait ainsi directement référence aux réelles sensations de toucher. Le Material Design de Google intègre également les dernières avancées technologiques permettant d’unifier les interfaces quel que soit l’outil de navigation de l’utilisateur (ordinateur, tablette ou smartphone).
L'expérience utilisateur est devenu aujourd’hui un axe nécessaire d’innovation pour les marques déjà présentes sur le Web afin de coller aux tendances actuelles en matière de webdesign.
La technologie Polymer permet donc de penser le développement différemment. Chaque web component est indépendant et est du coup facilement réutilisable tout au long du développement d’une application. Cette nouvelle technologie évite donc les répétitions et permet de gagner du temps.
Voici le tutoriel officiel proposé par Google.
Kontest
En intégrant les dernières innovations technologiques de Google que sont Polymer et le Material Design, la startup française Kontest est la 1ère plateforme marketing à utiliser Polymer en production. L’objectif premier de Kontest, à savoir de “Sublimer les marques par le jeu”, se confirme avec l’annonce de cette nouvelle collection de jeux. Six jeux composent la Collection Polymer™ : trois types de Calendrier de l’Avent, un Quizz, un jeu Instant Gagnant et un jeu de Tirage au sort. L’ensemble des jeux est compatible avec les dernières versions des navigateurs.
Maintenant nous allons aborder rapidement et simplement deux notions très importantes de Polymer qui sont les web components ainsi que les mutations d’object.
Nous allons créer une page toute simple qui affichera un message.
Pour cela je vais bien sûr loader (charger en français) Polymer ainsi que platform.js (<troll>Dans Polymer 0.5 sortie depuis peu, ça s’appelle webcomponents.js maintenant :) </troll>).
Je crée ensuite directement dans le <body> mon nouvel élément polymer <my-collection>. Cet élément contient un template qui sera affiché là où sera appelé mon élément, ici directement dans le <body>.
Il contient {{description}}, ce qui affiche la valeur de la variable description de notre élément. On ne peut pas faire plus simple comme élément. Voilà le résultat sur notre navigateur.
Maintenant nous allons voir qu’il est possible d’imbriquer des éléments entre eux sans difficulté. Grâce au scope de chaque élément l’on aura aucun conflit tant sur le html, css que le js.
Ce que je viens de faire c’est de déclarer un nouvel élément <my-game> qui prend en argument type. Dans le template de <my-collection> j’ai rajouté l’appel à notre nouvel élément en fournissant à l’attribut type la valeur de la variable type de l’élément <my-collection>. Maintenant en dessous de notre première phrase on va avoir le paragraphe du template de notre nouvel élément.
Voilà ce que ça donne.
Grâce à la possibilité de faire des multitudes de composant indépendant, on va pouvoir créer un élément une seule fois et le réutiliser très simplement à l’infini.
Je vais vous montrer que Polymer observe chacune des mutations des variables de vos élément.
Ce que je viens de faire c’est d’ajouter un lien qui exécute ma fonction changeType au click. Celle ci modifie la variable type de l’élément. Automatiquement l’élément <my-game> va appeler sa fonction typeChanged car la valeur de son attribut type aura changé. Voilà ce que ça donne au click.
Voilà une approche rapide de deux notions incluses dans Polymer. Ce qu’il faut faire pour améliorer ce code c’est créer un dossier pour chacun de nos éléments ce qui permettra de les maintenir plus facilement et de les rendre réutilisable.
Ce qu’il faut retenir, penser en élément indépendant qui vont interagir ensemble afin de faire quelque chose de bien précis. Polymer sait quand une variable à changé, du coup le déclenchement d’action spécifique est bien plus facile à mettre en place.
Positonnement
Polymer apporte un ensemble de fonctionnalités facilitant la vie des développeurs front-end.
J’imagine que certains d’entre vous savent qu’il n’est pas toujours facile de positionner les éléments comme on le souhaiterait. Entre le positionnement vertical ou le dimensionnement d’un élément par rapport aux autres, cela peut vite devenir un casse-tête. Heureusement CSS3 a apporté “flexbox”, un nouveau type de rendu permettant de résoudre la plupart de nos problèmes, comme les alignements horizontaux et verticaux, la gestion de l’espace disponible ou la modification de l’ordre d’affichage des éléments.
Malheureusement l’utilisation de cette propriété est mal connue, n’est pas toujours implémentée de la même manière, et nécessite encore l’utilisation de préfixes. Pour faciliter le placement des éléments dans une interface, les développeurs de Polymer ont ajouté des attributs permettant de contrôler la mise en page avec flexbox. Voici quelques exemples de ce que Polymer permet de faire :
<div horizontal layout>
<div>Enfant 1</div>
<div>Enfant 2</div>
<div>Enfant 3</div>
</div> |
<div horizontal reverse layout>
<div>Enfant 1</div>
<div>Enfant 2</div>
<div>Enfant 3</div>
</div> |
<div vertical layout center>
<div>Enfant</div>
</div> |
<div horizontal center center-justified layout>
<div>Enfant</div>
</div> |
<div vertical layout>
<div>Enfant 1</div>
<div flex>Enfant 2</div>
<div>Enfant 3</div>
</div> |
Les exemples ci-dessus ne représentent que quelques possibilités de ce qui est faisable. Si vous êtes curieux et souhaitez en savoir plus, n’hésitez pas à consulter la documentation officielle.
Animations & transitions
Le positionnement c’est bien, mais Polymer permet de faire beaucoup plus. Comme nous l’avons déjà vu précédemment, Google cherche à faciliter la mise en oeuvre du material design dans nos web-applications à travers Polymer. Pour cela, le framework met à disposition un ensemble de transitions et d’animations pré-disponibles.
Je vais vous présenter une seule des multiples transitions possibles. Pour découvrir l’ensemble des possibilités je vous invite à vous rendre sur cette page.
Les animations sont une des caractéristiques principales du material design comme vous pouvez le voir sur cette vidéo démo :
ll est donc intéressant de voir comment on peut créer une transition entre deux éléments de votre interface.
<core-animated-pages selected="{{page}}" transitions="hero-transition">
<section>
<div class="thumbnail" hero hero-id="card-transition" on-tap="{{open}}">
<div class="background" hero hero-id="background-transition"></div>
<div class="title" hero hero-id="title-transition">
<p>This is a thumbnail</p>
</div>
</div>
</section>
<section>
<div class="card" hero hero-id="card-transition" on-tap="{{close}}">
<div class="background" hero hero-id="background-transition"></div>
<div class="title" hero hero-id="title-transition">
<p>This is a title</p>
</div>
<p>Lorem ipsum...</p>
</div>
</section>
<core-animated-pages> |
Cette interface est composée de deux sections contenues dans une balise core-animated-pages. Cet élement permet justement de réaliser une transition entre deux pages en spécifiant son type avec l’attribut “transitions” (ici ‘hero-transition’). On spécifie la page affichée avec l’attribut “selected” (la valeur correspondant à la position de la page dans le DOM, ici 0 ou 1).
A l’intérieur des pages (sections) j’ai ajouté des éléments composé d’un rectangle coloré et d’un texte.
Pour pouvoir réaliser une transition entre les deux pages, Polymer a besoin de connaître les éléments qui sont présents sur chacune d’elles et de les associer. Pour cela on ajoute un attribut “hero” sur chacun des éléments ainsi qu’un attribut “hero-id” qui doit avoir la même valeur pour les éléments identiques des deux pages. Par exemple les titres des deux pages ont un attribut “hero-id” qui est “title-transition”.
Et c’est tout. Polymer se charge ensuite de faire les associations entre les éléments et va afficher une transition lorsque l’on change de page.
Dans cet exemple, le changement de page se fait au clic sur les div “thumbnail” et “card”, déclenchant l’appel au fonctions “open” et “close” qui se chargent de changer la page sélectionnée.
Alors ça vous a plu ? Si cette techno vous intéresse, voici le gars à suivre sur ce sujet : Addy Osmani (c'est lui l'un des inventeurs de Polymer). Et si vous avez des choses à ajouter, des ressources, des liens, des conseils etc... N'hésitez pas à le faire dans les commentaires.
Merci à vous et merci à Erwan et Jim d'avoir partagé tout ça avec nous !
Cet article merveilleux et sans aucun égal intitulé : Initiation à Polymer, le nouveau framework web de Google ; a été publié sur Korben, le seul site qui t'aime plus fort que tes parents.
