Quand j’ai commencé à jouer avec Angular.js, un des slogans c’était
que l’on utilisait les techniques de demain aujourd’hui. Il était question
de data-binding et de templating natif.
Et puis j’ai commencé à entendre parler de
web-components.
Il s’agit d’un ensemble d’API qui permettent de créer de nouveaux éléments HTML. L’api se décompose en:
Comme les specs de HTML 5 ne sont pas encore au stade final, tous les navigateurs n’offrent pas encore les API de web components. Donc Google à sorti Polymer, Mozilla a créé x-tag.
Le but de ces deux librairies est simplement d’apporter des polyfill pour les navigateurs qui ne supportent pas encores les api nécessaires.
Évidemment il y a eu toute une série de présentation sur Polymer lors du dernier Google I/O:
Dommage que le site de Google I/O ne permette pas de donner des url avec des recherches.
Rien de mieux qu’un projet jouet pour comprendre un nouvel outil. Voici le mien Runner. Rien de bien compliqué c’est une appli qui permet de conserver ses informations de courses à pied.
Comme c’est une techno front end, j’ai commencé par là. Une petite page d’accueil toute simple avec un menu sur la gauche.
En théorie il suffit de deux lignes dans notre head
pour bootstrapper notre environnement.
script(src="dep/platform/platform.js")
link(rel="import", href="dep/polymer/polymer.html")
Ce qu’on remarque ici c’est la nouvelle valeur de l’attribut rel.
Il s’agit de l’import html. C’est comme ça que l’on apporte la définition
de nos éléments custom dans notre page.
Dans les faits j’ai eu besoin de rajouter pas mal de dépendances HTML.
link(rel="import", href="dep/core-menu/core-menu.html")
link(rel="import", href="dep/core-item/core-item.html")
link(rel="import", href="dep/core-icons/core-icons.html")
link(rel="import", href="dep/core-scaffold/core-scaffold.html")
link(rel="import", href="dep/core-header-panel/core-header-panel.html")
link(rel="import", href="dep/core-pages/core-pages.html")
link(rel="import", href="dep/paper-shadow/paper-shadow.html")
link(rel="import", href="dep/app-router/app-router.html")
Je ne suis pas certain, mais je crois que j’aurais pu en enlever certains grâce à leurs dépendances. Je me suis rendu avec cette liste en suivant ce que je voulais ajouter et les messages d’erreur que j’ai eue dans la console.
Créer un élément avec polymer c’est super facile.
polymer-element(name="mon-premier-element",\attributes="prop1 prop2 prop3")
template
h1 Mon titre avec une propriété , ,
script.
Polymer({
ready:function(){
console.log(" un tout petit message" )
}
})
L’élément polymer-element permet de déclarer le nouvel élément mon-premier-element.
L’attribut attributes permet de définir quelles propriétés de notre nouvel
élément seront rendues publiques.
En dessous on trouve deux éléments template et script.
Dans l’élément template contient le template pour notre nouvel élément.
Quand on utilise notre nouvel élément, c’est une copie de notre template qui
sera injecté dans le DOM. L’élément template supporte l’expansion de variable
avec des moustaches. Si l’on veut avoir un peut de logique tout ça est possible
avec d’autres balises template. Elle supporte par exemple un attribut repeat qui peut
prendre tout une série de format d’expression comme par exemple:
template(repeat="moustache in mustaches")
p La moustache est la plus belle moustache que j'ai vu.
L’élément script permet de donner un peu de logique pour notre élément.
Ce n’est pas nécessaire, mais ça peut être utile.
On passe une map, au constructeur Polymer. Il faut vraiment voir cela comme un
prototype/une définition de classe pour notre élément.
Dans cette map, certaines clés sont réservées.
Par exemple, la clé ready est associée à une fonction qui sera exécutée quand
l’élément sera inséré dans le DOM, un peut comme $.ready, mais à l’échelle de
cet élément seulement.
En travaillant dans l’application, j’ai eu envie d’avoir un petit graphique pour afficher l’évolution des différentes valeurs. Dans mon temps, on ajoutait une dépendance JavaScript. On se tapait la documentation. Puis on essayait de survivre avec le fait que tous nos plug-ins se marchent sur les pieds dans le scope global.
Les jeunes aujourd’hui ils font plus ça de même. Ils importent un élément comme chart-elements de @robdodson. Ils font ce qu’ils ont besoin de faire. Puis ils font d’autres choses. C’est-tu assez fou.
Autre bel exemple. Je voulais avoir un petit routeur pour diriger les utilisateurs entre les différentes pages de mon app. Rien de plus simple. Une petite recherche sur bower, puis on trouve app-router de @erikringsmuth.
Pour moi c’est la première fois que je vois un système de module qui à du sens pour le navigateur. C’est ce qui favorise la production d’éléments/modules super simple qui fournissent une seule fonctionnalité, mais qui le fait bien. Je trouve que c’est un très bon signe pour l’avenir du dev front-end.
En travaillant sur ce petit projet, je me suis aperçu que certains
points manquaient encore de polish. Le plus marquant reste l’élément
core-ajax qui fait partie de la distribution de base de Polymer.
Cet élément à pour but de faire une requête ajax et d’appeler une fonction
lorsque le résultat est revenu.
Pour donner des paramètres à notre requête, on a la possibilité de lui passer un objet. Si notre objet à un seul niveau tout va bien, par contre si on a eu la mauvaise idée de faire une requête avec un objet à deux niveaux de profondeur, on se retrouve avec une query string mal encodé genre:
query?param=[Object: object]
Ce n’est pas bien grave c’est le genre de chose qui se corrige vite. D’après ce qui s’est passé sur le bug tracker de cet élément, on peut voir qu’il y a d’autres petits soucis. Mais la communauté à déjà proposé des PR pour ces bug. C’est plutôt encourageant pour le support de la communauté.
J’ai eu un autre pépin, en faisant mon premier élément j’ai eu la mauvaise idée d’inverser les éléments script et template. Dans ce cas là, pas d’erreur, rien. Même pas un petit message flou dans la console. L’appli arrête juste de fonctionner.
À titre personnel, j’aurais voulu avoir une forme de validation des éléments lors de leurs imports/lecture. Je l’ai proposé, mais étant donné que tous les exemples sont présentés dans le bon ordre, l’équipe préfère ne rien rajouter.
Il faut donc laisser un peut de temps à Polymer de passer son adolescence en le regardant du coin de l’oeil.