Premiers pas avec Polymer

Polymer est un ensemble de bibliothèques permettant de créer des éléments et applications reposant sur le principe des « Web Components » que j’ai introduit dans mon précédent article Pour cette introduction nous allons nous concentrer sur la réalisation d’un composant simple, reproduisant celui réalisé dans l’article Web components, l’avenir du web …, ce qui nous permettra de nous concentrer sur les apports de Polymer.

Le projet Polymer

Pour le définir en quelques mots, Polymer est un « framework » fournissant l’assistance nécessaire au développement d’éléments et applications pour les navigateurs. Actuellement le projet est un avant goût destiné aux développeurs pour l’expérimentation et n’est pas encore destiné à la production. Rien ne vous empêche de l’utiliser, mais il faut s’attendre à des changements majeurs dans les futures versions.

La philosophie générale de Polymer est « Tout est élément », une application reposant sur la composition d’éléments.

Polymer s’articule autour de trois couches

• La couche « Web components », elle permet de s’appuyer sur les API « web components » quand elles existent ou de les simuler au travers des polyfills
• La bibliothèque Polymer, qui fournit l’outillage permetant, entre autre, l’utilisation de syntaxe déclarative, data bindings et autres facilitateurs
• Une collection d’éléments, qui peuvent servir de base ou d’exemples à la composition de nouveaux éléments

Installation de Polymer

Pour l’installation nous recommandons l’utilisation de bower qui se chargera de packager et gérer les dépendances de notre composant. Si vous ne disposez pas encore de bower commencez par là

Pour commencer il nous faut un fichier bower.json qui servira comme référence des dépendances de notre composant. Dans notre fichier bower nous ajoutons la dépendance à Polymer/polymer (La version de Polymer actuellement disponible est la 0.5.2).

    {
      "name": "myNotif",
      "version": "0.0.0",
      "authors": [
        "Cedric Brancourt <cedric.brancourt@tucroispouvoirmespam.com>"
      ],
      "license": "MIT",
      "private": true,
      "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
      ],
      "dependencies": {
        "polymer": "Polymer/polymer#~0.5.2"
      }
    }

Un bower install plus tard, le récapitulatif des dépendances installées devrait ressembler à ceci :

polymer#0.5.2 bower_components/polymer
├── core-component-page#0.5.2
└── webcomponentsjs#0.5.2

core-component-page#0.5.2 bower_components/core-component-page
├── polymer#0.5.2
└── webcomponentsjs#0.5.2

Nous retrouvons les couches citées plus haut.

Définition de l’élément

Puisque Polymer repose sur la notion de «web component», la définition de notre élément reposera sur l’élaboration d’un « custom element » ( Si ça ne vous semble pas évident révisez mon dernier article ).

Polymer vous permet de définir un élément de manière déclarative. Ce qui est déjà un gain de temps et de lisibilté par rapport à notre précédente implémentation native.

Nous allons définir un nouvel élément <my-notif></my-notif> dans notre package bower, dans un fichier HTML que nous nommerons my-notif.html.

my-notif.html

    <link rel="import" href="bower_components/polymer/polymer.html">

    <polymer-element name="my-notif" attributes="src" noscript>
        <template>

            <style>
                * {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    -ms-box-sizing: border-box;
                    box-sizing: border-box;
                }


                #notif-icon {
                    width: 16px;
                    vertical-align: middle;
                }
                :host {
                    padding: 5px;
                    border: 1px solid lightgrey;
                }
                ::content header {
                    display: inline;
                    font-weight: bold;
                }
            </style>

            <img id='notif-icon' src="">
            <content select=".count"></content>
            <content select="header"></content>

        </template>
    </polymer-element>

Détaillons tout cela par rapport à ce que nous avons réalisé dans l’article précédent :

    <link rel="import" href="bower_components/polymer/polymer.html">

Nous importons Polymer avec les «HTML imports» pour disposer de l’API.

    <polymer-element name="my-notif" attributes="src" noscript></polymer-element>

• polymer-element est un élément qui permet de déclarer un nouvel élément
• name spécifie le nom du nouvel l’élement
• attributes une liste d’attributs qu’acceptera l’élément et qui constitueront son api publique
• noscript indique que notre élément ne contient pas de script ( donc pas d’appel à Polymer({}) , qui référence l’élément ) et de le référencer

    <template></template>

C’est bien la balise template de la spécifications que nous avons vu précédement. A l’interieur nous définirons nos styles et le contenu de notre template qui, souvenez vous, est un élément inerte qui servira à créer notre « Shadow Root »

Nous reprenons exactement les mêmes styles que dans le précédent article et retrouvons les pseudos sélecteurs que nous avions découvert. Il en va de même pour le HTML de notre élément, dans lequel nous retrouvons nos « insertion points ». Egalement pour préciser l’attribut src de l’image du template, nous utilisons qui sera interprété comme this.src faisant ainsi référence à la propriété de notre élément.

Vous l’aurez compris travailler avec Polymer, c’est d’abord travailler avec des « web components » !

Utilisation de l’élément

Pour utiliser l’élément il suffit de l’importer ( HTML imports ), et d’en créer des instances.

Il est de bon ton d’avoir une demo de l’élément avec les sources, créons à la racine du packet bower un fichier demo.html qui servira de page d’exemple :

demo.html

    <!doctype html>
    <html lang="en">
        <link rel="import" href="my-notif.html">
    <head>
        <meta charset="UTF-8">
        <title>My Notif Demo</title>
    </head>
    <body>
        <my-notif src="demo-icon.svg">
            <header>Messages</header>
            <span class="count">3</span>
        </my-notif>
    </body>
    </html>

Détaillons cela :

    <link rel="import" href="my-notif.html">

C’est ici que nous importons notre composant. L’utilisation de la balise my-notif est maintenant possible.

    <my-notif src="demo-icon.svg">
                <header>Messages</header>
                <span class="count">3</span>
    </my-notif>

Sans surprise, la balise est utilsée exactement de la même manière que dans notre précédente implémentation.

Lancez un mini-serveur web pour admirer le résultat :

ruby -run -e httpd . -p 3000

http://localhost:3000 vous présentera le résultat.

Si vous préférez une version CodePen :

Voir Polymer example by Cedric Brancourt (@Electron-libre) sur CodePen.

Conclusion

Avec cet exemple volontairement simpliste nous avons pu mettre en évidence le fait que Polymer rend la création de « web components » beaucoup moins fastidieuse. Forts de notre compréhension des bases, nous pouvons constater que travailler avec Polymer c’est avant tout travailler avec les nouvelles spécifications.

Les avantages immédiats à l’utilisation de Polymer sont la concision et la clarté déclarative. Mais surtout grâce aux polyfills nous pouvons cibler tous les navigateurs récents, et à moyen et long terme l’avantage d’utiliser les technologies d’aujourd’hui et demain.

Il reste bien des choses à voir dans nos prochains articles, les data-bindings, les tests, comment build et distribuer les composants …

Dans le prochain article nous rendrons notre composant plus dynamique et permettrons une ré-initialisation du compteur.

L’équipe Synbioz.

Libres d’être ensemble.