Découvrez une nouvelle façon d’intégrer avec Polymer et les web-components

Aujourd'hui je vous propose de découvrir les secrets du shadow-dom et des web-components avec Polymer.js.

Polymer et les web-components

Connaissez-vous les web-components (ou customs elements) ? Ce sont des objets issus d'une spécification permettant de créer ses propres éléments HTML, et de les manipuler en utilisant l'API Javascript standard. Cette spécification permettra d'accélérer grandement l'intégration et de limiter le travail répétitif. Pour en savoir plus je vous propose la lecture de l'article Des ressources pour mieux comprendre les web-components

Polymer est une library de Google vous permettant de créer dès maintenant des web-componants fonctionnant sur tous les navigateurs jusqu'à IE8, de manière assez simple.

Notre premier exemple

Pour comprendre comment cela fonctionne, décortiquons l'exemple suivant :

<!-- Include Polymer -->
<script src="http://polymer-project.org/polymer.min.js"></script>

<!-- Define the element -->
<polymer-element name="polymer-lettering">
  <template>
    <template repeat="{{ letter, i in letters }}">
      <span class="char{{i}}">{{ letter }}</span>
    </template>
  </template>
  <script>
    Polymer('polymer-lettering', {
      ready: function() {
        this.letters = this.trim(this.innerHTML).split('');
      },
      trim: function(str) {
        return str.replace(/^[^S]+|[^S]+$/gm,'');
      },
      letters: []
    });
  </script>
</polymer-element>

 

Ce web-component a pour but de découper le texte qui lui est donné lettre par lettre, pour ensuite pouvoir le manipuler en CSS. Il est composé d'une partie HTML, la template, qui permet (un peu comme rivets par exemple) de définir comment nos données Javascript doivent êtres affichées.

En dessous nous pouvons retrouver une partie "<script>", qui fournit le Javascript nécessaire à notre composant. Notez bien la première ligne : Polymer('polymer-lettering', { , qui permet de déclarer le composant.

Nous avons ensuite une fonction trime qui supprime les espaces vides, et notre événement à lancer à la création de l'element, et qui va découper le contenu du composant lettre par lettre.

Maintenant que notre composant est crée, il nous reste à l'afficher ! Pour cela rien de plus simple :

<!-- Include Polymer -->
<!-- Rock 'n roll high school -->
<polymer-lettering>
  hello
</polymer-lettering> 

Une fois ajoute un peu de CSS, voila ce que l'on obtient (n'hésitez pas à changer d'onglet pour voir le HTML et le CSS !)

See the Pen Polymer Lettering by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Exemples un peu plus complexes

L'exemple suivant est un peu plus intéressant : il permet de simplifier énormément l'utilisation de google maps, les mettant à la portée d'un simple intégrateur n'ayant pas la moindre connaissance en Javascript.

See the Pen YPWBNx by Alec McCormick (@Sommaht) on CodePen.

Vous pourrez voir en allant dans le HTML que si nous oublions la déclaration du composant (qui peut être faîte a l'avance par exemple), la déclaration de la carte se fait grace à un simple <google-map lat="-34.397" lng="150.644" zoom="8">, et que la déclaration de marqueurs est tout aussi simple.

Enfin, un des gros avantages des web-componants est qu'ils peuvent être importés comme un nouveau type de ressource : <link rel="import" href="google-map.html">. Libre à vous de vous créer votre propre library d’éléments réutilisables, que vous n'aurez plus qu'à personnaliser en CSS pour chaque projet.

Mon dernier exemple utilise l'import de paper-element, la library material design de Google.

See the Pen Polymer CodePen starter by Addy Osmani (@addyosmani) on CodePen.