BT
x Votre opinion compte ! Merci de bien vouloir répondre au sondage InfoQ concernant vos habitudes de lecture !

Utilisez les Web Components dès aujourd'hui avec Polymer de Google

par Zef Hemel , traduit par Julien Vey le 13 juin 2013 |

Lors de Google I/O, mi-mai, Google a lancé Polymer, une nouvelle bibliothèque pour construire des applications Web en utilisant les Web Components, la nouvelle norme HTML5 pour créer des composants réutilisables pour le web. Polymer fournit des polyfills pour la plupart des technologies Web Components, permettant aux développeurs de créer leurs propres composants réutilisables alors que les navigateurs ne les supportent pas encore. En outre, Polymer est livré avec une gamme d'exemples de widgets, un widget météo, une horloge, un widget boursier et un exemple de graphiques.

Les Web Components permettent aux développeurs de créer des balises HTML personnalisées et réutilisables. À titre d'exemple, voici le squelette d'un composant web pour un tag <my-own-tag> :

<element name="my-own-tag">
 <template>
   Les éléments HTML ici
 </template>
 <script>
   // la logique implémentée en JavaScript
 </script>
</element>

Alors que de nombreux frameworks web exposent des APIs JavaScript pour construire des interfaces utilisateurs, qui sous le capot génèrent un tas de divs et de spans pour leur mise en œuvre, les Web Components sont une solution native dans le navigateur et donc ne reposent pas sur un framework en particulier. Par conséquent, les Web Components vont peut-être permettre, espérons-le, de réduire la fragmentation par rapport aux éléments HTML disponibles aujourd'hui, qui s'appuient généralement sur un framework JavaScript particulier.

Bien que les Web Components soient une nouvelle technologie intéressante, jusqu'à ce que les navigateurs les supportent, et la majorité du public cible utilise ces navigateurs, beaucoup de ces caractéristiques vont rester inutilisées. Une façon de contourner ce problème sont les polyfills. Un polyfill est un morceau de code qui implémente la technologie qui, à terme, devrait être mis en œuvre nativement par le navigateur. Si un navigateur implémente déjà la technologie, le polyfill ne fait rien. Sinon, il émule le comportement, rendant ainsi transparente l'utilisation de l'API. Par exemple, la bibliothèque webshims met en œuvre diverses fonctionnalités HTML5, y compris les canvas, les formulaires HTML5, les éléments multimédias HTML5 et la géolocalisation dans les navigateurs qui ne supportent pas encore ces fonctionnalités.

Polymer possède des polyfills pour la plupart des technologies Web requises pour exécuter des applications avec les Web Components, notamment :

  • HTML imports : une façon de comprendre et de réutiliser des documents HTML à l'intérieur d'autres documents HTML.
  • Custom Elements : permet aux développeurs de définir et d'utiliser des éléments DOM personnalisés.
  • Shadow DOM : fournit l'encapsulation pour le DOM.
  • Model Driven Views : fournit un databinding semblable à celui d'AngularJS.
  • Web Animations : des APIs pour mettre en œuvre des animations complexes.
  • Pointer Events : unifie les événements souris, tactile et stylet.

Ces polyfills peuvent être utilisés séparément, sans la nécessité d'utiliser le reste de Polymer. Cependant, en plus, Polymer prévoit :

  • polymer.js : Le moteur d'exécution de Polymer, qui rend plus facile la création d'attributs et d'événements personnalisés
  • Un ensemble d'éléments visuels et non visuels réutilisables.

Polymer n'est pas le premier projet à tenter de créer un polyfill pour les Web Components. Auparavant, Mozilla a lancé X-Tag, un polyfill pour la norme Custom Elements. Et la librairie Web UI pour Dart met en œuvre les Custom Elements et les Model Driven View pour les applications écrites avec le langage Dart de Google.

La conférence Google I/O sur Polymer peut-être visionnée sur YouTube. Pour en savoir plus sur les Web Components, voir le talk sur les Web Components lors ??de Google I/O qui fournit un aperçu plus général. Des tutoriels pour débuter et d'autres documentations peuvent être consultés sur le site Web de Polymer.

Bonjour étranger!

Vous devez créer un compte InfoQ ou cliquez sur pour déposer des commentaires. Mais il y a bien d'autres avantages à s'enregistrer.

Tirez le meilleur d'InfoQ

Donnez-nous votre avis

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet
Commentaires de la Communauté

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Discuter

Contenu Éducatif

Rien ne serait possible sans le soutien et la confiance de nos Sponsors Fondateurs:

AppDynamics   CloudBees   Microsoft   Zenika
Feedback Général
Bugs
Publicité
Éditorial
InfoQ.com et tous les contenus sont copyright © 2006-2014 C4Media Inc. InfoQ.com est hébergé chez Contegix, le meilleur ISP avec lequel nous ayons travaillé.
Politique de confidentialité
BT