Polymer

  22 March 2015      0 Comments      Polymer, jbake, web-componants, bower

Je vais vous présenter une exemple de mise en place de Polymer sur un blog construit avec jbake.

Présentation

Polymer est une library de Google vous permettant de créer des web-componants fonctionnant sur tous les navigateurs.

Pour ceux qui ne connaissent pas les web-componants, les web-componants permettent la création et la réutilisation de ses propre balises html.

La spécification Web Components en cours de standardisation au sein du W3C.

Pour plus d’information, je vous laisse regarder la présentation faite au BreizhJug par Horacio.

Installation de Polymer

La façon la plus simple pour l’installation des Polymer, c’est d’utiliser bower.

Pour ceux qui n’auraient pas installer bower, c’est par ici.

Si vous n’avez pas encore initialisé bower sur votre projet, vous pouvez le faire avec la commande :

bower init

Pour modifier l’emplacement ou seront installer les packages de bower, il faut ajouter la ligne suivante dans le ficher de configuration .bowerrc :

{ "directory": "src/jbake/assets/components/" }

Maintenant pour l’installation des polymer, il suffit de lancer la commande :

bower install --save Polymer/polymer

Vous pouvez voir que dans votre configuration bower une dépendance a été ajoutée.


"dependencies": {
    "polymer": "Polymer/polymer#~0.5.5" 
  }

Création d’un composant Polymer

On crée un fichier myComponents.html qui va contenir l’ensemble de nos composants. On peut également mettre chacun des composants dans son propre fichier html.


<polymer-element name="blog-tag" attributes="link tag nb">
  <template>
	<style></style>
	<li><a href="{{link}}">{{tag}}</a>({{nb}})</li>
  </template>
  <script>
    Polymer();
  </script>
</polymer-element>

le style de composant peut être définit à l’intérieur des balises “<style></style>” . Ce style sera appliqué seulement au template et ne sera pas propagé sur le reste du code html.

Utilisation du composant

Maintenant pour utiliser votre composant Polymer, il faut ajouter les bon imports dans les balises “<head></head>”


 	<!-- Polymer -->
	 <script src="components/webcomponentsjs/webcomponents.min.js"></script>
	 <link rel="import" href="components/myComponents.html">

Il suffit maintenant d’y ajouter notre nouveau composant la ou on souhaite l’afficher.


<blog-tag link="tags/polymer.html" tag="Polymer" nb="1" ></blog-tag>

Vous pouvez retrouver l’exemple dans les sources du blog. Dans un prochain billet, une utilisation plus poussée des Polymer.