Les Web Components

Les Composants Web, une nouvelle ere dans le développement Web.

De quoi s'agit-il au juste ?

Les composants web (web components) sont des balises personnalisées qui étendent les balises définies par le standard HTML

Pour que les navigateurs reconnaissent ces balises, les navigateurs doivent implémenter un ensemble de spécifications :

CUSTOM ELEMENTS
Cette spécification décrit la méthode pour permettre à l'auteur de définir et d'utiliser de nouveaux types d'éléments DOM dans un document.
HTML IMPORTS
Permet la réutilisation de documents HTML dans d'autres documents.
TEMPLATES
Cette spécification décrit comment créer des fragments DOM et comment les instancier et le réutiliser dans un document.
SHADOW DOM
Décrit la méthode qui permet d'établir et de maintenir des limites fonctionnelles entre le document et les fragments qu'il encapsule.

Peut-on les utiliser dès maintenant ? Oui.

Pour utiliser les Web Components, il faut attacher la librairies polyfill webcomponents.js à la page web. Cette bibliothèque permet de combler les disparités d'implémentations des différents navigateurs.

  1. <!-- Polyfill  pour les anciennes versions des navigateurs -->
  2. <script src="js/webcomponents.min.js"></script>
  3.  
  4. <!-- Importer un élément -->
  5. <link rel="import" href="components/google-map/google-map.html">
  6.  
  7. <!-- Utiliser  l'élément -->
  8. <google-map latitude="37.790" longitude="-122.390"></google-map>

Existe-t-il des librairies des Web components ? Oui.

Il existe trois librairies connues des composants Web :

POLYMER (Google)
Polymer est un nouveau type de bibliothèques pour le web, bâti au-dessus des composants Web, et conçu pour tirer parti de la plate-forme web évoluant sur les navigateurs modernes.
X-TAGS (Mozilla)
X-Tag est une petite bibliothèque JavaScript, créée et soutenue par Mozilla, qui apporte des capacités Web Components (Elements personnalisés) pour tous les navigateurs modernes.
BOSONIC
Bosonic est un ensemble d'outils qui permettent de construire des composants Web que la spécification décrit actuellement, Bosonic prend en charge les vieux navigateurs comme IE9.

Peut-on créer nos propres composants ? Oui.

Cas de PolymerJS

Pour créer un élément avec Polymer, il faut d'abord attacher la bibliothèque polymer.html dans un fichier HTML (sans la structure html) )et ensuite écrire le code du composant. Un composant peut utiliser d'autres composants.

Voici un exemple de composant que j'ai appelé <az-card>. Celui-ci permet d'afficher le nom et la photo d'un utilisateur. L'utilisation de ce composant dans une page HTML se fera de la manière suivante :

<az-card src="aziz.png" name="Daaif"></az-card>

Ci-contre l'affichage de cet élément.

Code du composant web

HTML
  1. <link rel="import" href="../bower_components/polymer/polymer.html">
  2.  
  3. <dom-module id="az-card">
  4.     <link rel="import" type="css" href="az-card.css">
  5.     <template>
  6.         <div class="wrapper">
  7.             <img class="image" src="{{src}}" title="{{name}}" />
  8.             <div class="name">{{name}}</div>
  9.         </div>
  10.     </template>
  11.     <script>
  12.         Polymer({
  13.           is: 'az-card',
  14.           properties: {
  15.               src: String,
  16.               name: String
  17.           }
  18.         });
  19.     </script>
  20. </dom-module>

Dans la partie JavaScript, on passe à la fonction Polymer() le prototype du nouveau élément. L'attribut is contient le nom de l'élément. L'attribut properties définit les propriétés de l'élément.

Le Shadow Dom du composant utilise la feuille de style externe az-card.css

CSS
  1. .wrapper {
  2.     width: 100px;
  3.     border: 3px double #999;
  4.     padding: 10px;
  5.     margin: 4px;
  6.     background: #eee;
  7. }
  8. .wrapper .image, .wrapper .name {
  9.     background: #777;
  10.     border: 1px solid #ccc;
  11.     padding: 6px;
  12.     box-shadow: 1px 1px 6px #666, -1px -1px 6px #666;
  13. }
  14. .wrapper img {
  15.     box-sizing: border-box;
  16.     width: 100%;
  17. }
  18. .wrapper .name {
  19.     margin-top: 2px;
  20.     font-size: 16px;
  21.     font-weight: bold;
  22.     text-align: center;
  23.     text-transform: uppercase;
  24.     color: #fff;
  25. }

Utilisation du composant dans une page HTML

HTML
  1. <!DOCTYPE html>
  2.     <meta charset="UTF-8">
  3.     <title>Test Polymer</title>
  4.     <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  5.     <link rel="import" href="elements/az-card.html">
  6.     <style>
  7.         az-card {
  8.             float: left;
  9.         }
  10.     </style>
  11. </head>
  12. <az-card src="aziz.png" name="Daaif"></az-card>
  13. <az-card src="aziz.png" name="Daaif"></az-card>
  14. <az-card src="aziz.png" name="Daaif"></az-card>
  15. <az-card src="aziz.png" name="Daaif"></az-card>
  16. </body>
  17. </html>
Résultat

Peut-on manipuler ces éléments avec Javascript ? Oui.

Comme les éléments standard HTML, les Web Components peuvent être manipulés avec du code javascript. Voici un exemple de création dynamique de l'élément.

HTML & JS
  1. <!DOCTYPE html>
  2.     <meta charset="UTF-8">
  3.     <title>Test Polymer</title>
  4.     <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  5.     <link rel="import" href="elements/az-card.html">
  6. </head>
  7.     // Création de l élément
  8.     var card = document.createElement('az-card');
  9.     // Accès aux propriétés nom et src
  10.     card.name = 'daaif';
  11.     card.src = 'aziz.png';
  12.     // Insertion dans l'arbre DOM
  13.     document.body.appendChild(card);
  14. </body>
  15. </html>

Peut-on continuer à utiliser nos librairies Javascript de la même façon qu'avant ? Oui.

Voici un exemple qui utilise la librairie jQuery pour manipuler notre composant web <az-card>

HTML & JS
  1. <!DOCTYPE html>
  2.     <meta charset="UTF-8">
  3.     <title>Test Polymer</title>
  4.     <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  5.     <link rel="import" href="elements/az-card.html">
  6.     <style>
  7.         az-card {
  8.             float: left;
  9.         }
  10.     </style>
  11. </head>
  12. <script src="bower_components/jquery/dist/jquery.min.js"></script>
  13.     var i=0,
  14.         count=10,
  15.         url = 'https://randomuser.me/api/?results=' + count;
  16.     $.ajax(url, {dataType: 'json'})
  17.         .done(function(data){
  18.             var users = data.results;
  19.             for(; i<count; i++){ // > hack coloration syntaxique !!
  20.                 // Création de l élément
  21.                 var $card = $('<az-card>');
  22.                 // Accès aux propriétés
  23.                 $card.attr('name',users[i].user.name.last);
  24.                 $card.attr('src', users[i].user.picture.thumbnail);
  25.                 // Insertion dans le DOM
  26.                 $(document.body ).append($card);
  27.             }
  28.         });
  29.  
  30. </body>
  31. </html>
Résultat

Conclusion

Les web composants apportent une nouvelle approche pour le développement web. Cette approche privilégie l'aspect déclaratif, la composition et la réutilsation du code.

L'implémentation des spécifications est en route pour la plupart des navigateurs modernes. En attendant, la bibliothèque polyfill webcomponents.js comble le fossé et permet l'utilsation de ces composants.

Les navigateurs sont obligés de se mettre à niveau, sinon, l'utilisation des polyfill va affecter les performances, et l'utilisateur final acusera le navigateur et non pas les Web Components.

Avec les polyfill, nous sommes déjà demain, et il parait que le train ne va pas s'arrêter.



Commentaires

Portrait de Imani

Merci pour ce très bon tutoriel.

Très bon tutoriel, comme à votre habitude.
J'ajoute à ceci qu'Angular JS dans sa version 2, et React JS font des composants web le coeur de leurs philosophies. A essayer si vous ne les avez toujours pas essayé !

Templates are simple to locate on the Net.

my weblog; bonus web design template

Why use FonePaw iphone discount dubai Data

Recovery?

CLA revelou maiores resultados em ganhos

musculares.

Μy site Quitoplan como tomar, Beulah,