Introduction

Cette article est le premier d’une série d’articles sur Polymer qui est en quelque sorte une passerelle qui va nous permettre d’utiliser des features encore expérimentale des navigateurs web qui ne les ont peu ou pas encore implémentées comme les custom elements, le shadow DOM, les imports HTML, les pointer events, les web Animations etc …
C’est la zone rouge du diagramme affiché sur le site de polymer.

Alors qu’allons-nous bien pouvoir faire de Polymer ? Comment peut-il révolutionner notre façon de travailler ?

De plus en plus il nous faut penser composant pour booster notre productivité, mais également pour éviter de refaire 50 fois les mêmes choses et ainsi pouvoir se concentrer sur la partie intérressante du développement. C’est ce que cette librairie nous offre, nous allons donc créer un composant web. Une fois créé nous pourront le réutiliser où bon nous semble et de la façon la plus simple qui existe, à l’aide d’une seule et unique balise HTML nous disposeront d’un color switcher !

Quelques spécifications :

Okay donc nous avons besoin de color switcher pour notre projet, il sera sur différentes pages et plusieurs fois par page. Il doit être aussi simple à utiliser que d’écrire une simple balise HTML, un autre developpeur doit pouvoir l’utiliser de façon transparente sans savoir comment cette balise fonctionne (juste comme si c’était une balise native des navigateur comme select ou autre type d’input par exemple, est-ce qu’on se demande comment elle fonctionne ?). Nous devons être capable d’avoir autant de couleur possible et d’en sélectionner une a l’aide du click. Pour finir il nous faudra disposer d’un getter sur cet objet du DOM qui nous permettra en javascript de récupérer la couleur sélectionnée.

Le résulta attendu :

La balise et son attribut qui nous permet d’ajouter des couleurs

Le getter qui nous permet de récupérer la couleur sélectionnée

document.querySelector('color-switcher').getColor()

Pré-requis et Installation

Pour utiliser Polymer nous devons activer les Experimental web platform features de google chrome, pour faire ceci rendez vous dans chrome://flags et activez les. Par la suite nous auront besoin d’avoir accès au shadow DOM pour l’inspecter et l’éditer. Vous devez faire ceci dans la console de chrome. Nous allons installer Polymer a l’aide Bower, le gestionnaire de libraries web et de son fichier de config bower.json, qui comme son extension le montre est un objet javascript. Ceux qui n’ont pas encore installer Bower, il suffit de lancer la commande suivante dans le terminal.

npm install -g bower

Il faut donc aussi avoir npm d’installé pour exécuter cette commande. Une fois prêt nous allons ajouter à la racine du répertoire de notre projet le fichier bower.json

{
  "name": "color-switer-component",
  "version": "1.0.0",
  "dependencies": {
    "polymer-elements": "Polymer/polymer-elements#~0.1.2",
    "polymer-ui-elements": "Polymer/polymer-ui-elements#~0.1.2"
  }
}

Dans le terminal lancer la commande

bower install

Bower va installer Polymer dans un dossier nommé bower_components

Mise en place des devs

Toujours à la racine de notre projet nous allons créer un fichier index.html et un dossier components et dans ce dossier un autre dossier pour notre color switcher qui pour être original sera nommé Ifyuocnaraedtihsmkaemeasnadwich color-switcher.

Voici la structure finale

Dans notre fichier html nous allons charger Polymer

       polymer color switcher demo

Nous ne toucherons plus ce fichier que pour y ajouter deux choses, la première sera l’import de notre composant, la seconde sera notre balise color-switcher.

Voila c’est tout pour cette première partie, la seconde sera beaucoup plus amusante car nous allons enfin pourvoir tester Polymer !

Introduction

Cette article est le premier d’une série d’articles sur Polymer qui est en quelque sort une passerelle qui va nous permettre d’utiliser des features encore expérimentale des navigateurs web qui ne les ont peut ou pas encore implémentés comme les custom elements, le shadow DOM, les imports HTML, les pointer events, les web Animations etc …
C’est zone rouge du diagramme affiché sur le site de polymer.

Alors qu’allons bien pouvoir faire de Polymer ? Comment peut-il révolutionner notre façons de travailler ?

De plus en plus il nous faut penser composant pour booster notre productivité, mais aussi évité la corvée de refaire 50 fois les mêmes choses pour pouvoir ce concentré sur la partie fun du développement. C’est ce que cette librairie nous offre, nous allons donc créer un composant web. Une fois créé nous pourront le réutiliser ou bon nous semble et de la façon la plus simple qui existe, a l’aide d’une seule et unique balise HTML nous disposeront d’un color switcher !

Quelques spécifications :

Okay donc nous avons besoin color switcher pour notre projet, il sera sur différente pages et plusieurs fois par page. il doit être aussi simple a utiliser que d’écrire une simple balise HTML, un autre dev doit pouvoir l’utiliser de façon transparente sans savoir comment cette balise fonctionne (juste comme si c’était une balise native des navigateur comme select ou autre type d’input par exemple, es ce qu’on se demande comment elle fonctionne ?). Nous devons être capable d’avoir autant de couleur possible et d’en sélectionner une a l’aide du click. Pour finir il nous faudra disposer d’un getter sur cet objet du DOM qui nous permettra en javascript de récupérer la couleur sélectionné.

Le résulta attendu :

La balise et sont attribut qui nous permet d’ajouter des couleurs

Le getter qui nous permet de récupérer la couleur sélectionné

document.querySelector('color-switcher').getColor()

Pré-requis et Installation

Pour utiliser Polymer nous devons activer les Experimental web platform features de google chrome, pour faire ceci rendez vous dans chrome://flags et activé les. Par la suite nous auront besoin d’avoir accès au shadow DOM pour l’inspecter et l’éditer. Vous devez faire ceci dans la console de chrome. Nous allons installer Polymer a l’aide Bower, le gestionnaire de libraries web et de son fichier de config bower.json, qui comme son extension le montre est un objet javascript. Ceux qui n’ont pas encore installer Bower, il suffit de lancer la commande suivante dans le terminal.

npm install -g bower

Il faut donc aussi avoir npm d’installer pour exécuter cette commande. Une fois prêt nous allons ajouté à la racine du répertoire de notre projet le fichier bower.json

{
  "name": "color-switer-component",
  "version": "1.0.0",
  "dependencies": {
    "polymer-elements": "Polymer/polymer-elements#~0.1.2",
    "polymer-ui-elements": "Polymer/polymer-ui-elements#~0.1.2"
  }
}

Dans le terminal lancer la commande

bower install

Bower vas installer Polymer dans un dossier nommé bower_components

Mise en place des devs

Toujours à la racine de notre projet nous allons créer un fichier index.html et un dossier components et dans ce dossier un autre dossier pour notre color switcher qui pour être original sera nommé Ifyuocnaraedtihsmkaemeasnadwich color-switcher.

Voici la structure finale

Dans notre fichier html nous allons charger Polymer

       

Nous ne toucherons plus ce fichier que pour y ajouter deux chose, la première sera l’import de notre composant, la seconde sera notre balise color-switcher.

Voila c’est tout pour cette première partie, la seconde sera beaucoup plus amusante car nous allons enfin pourvoir tester Polymer !