Polymer est une passerelle vers l'avenir prometteur des composants Web. Nous voulons faciliter l'utilisation et la création d'éléments personnalisés. Depuis un an, l'équipe travaille d'arrache-pied sur un ensemble de polyfills pour les spécifications en constante évolution. De plus, nous avons créé une bibliothèque de sucre syntaxique pratique pour faciliter la création de composants Web. Enfin, nous créons un ensemble d'éléments d'interface utilisateur et d'utilitaires à réutiliser dans vos applications. Lors du Chrome Dev Summit 2013, j'ai abordé les différentes parties de Polymer et la philosophie derrière notre mantra "Tout est un élément".
Diapositives : http://html5-demos.appspot.com/static/cds2013/index.html
"Tout est un élément" (de <select> aux éléments personnalisés)
Diapositives : http://html5-demos.appspot.com/static/cds2013/index.html#6
Dans les années 1990, la création de pages Web était limitée, mais puissante. Nous ne disposions que de quelques éléments. Le plus intéressant ? Tout était déclaratif. Il était remarquablement simple de créer une page, d'ajouter des commandes de formulaire et de créer une "application" sans écrire des tonnes de code JavaScript.
Prenons l'élément <select>. L'élément intègre de nombreuses fonctionnalités, simplement en le déclarant :
- Personnalisable via des attributs HTML
- Affiche les enfants (par exemple,
<option>) avec une UI par défaut, mais configurable via des attributs. - Utile dans d'autres contextes comme
<form> - Dispose d'une API DOM : propriétés et méthodes
- Déclenche des événements lorsque des choses intéressantes se produisent
Les composants Web fournissent les outils nécessaires pour revenir à l'âge d'or du développement Web. Un monde où nous pouvons créer des éléments, qui rappellent <select>, mais conçus pour les cas d'utilisation de 2014. Par exemple, si AJAX était inventé aujourd'hui, il s'agirait probablement d'une balise HTML (exemple) :
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Ou des éléments responsives qui lient les données à un attribut queryMatches :
<polymer-media-query query="max-width:640px" queryMatches="">
C'est exactement l'approche que nous adoptons dans Polymer. Au lieu de créer des applications Web monolithiques basées sur JavaScript, nous allons créer des éléments réutilisables. Au fil du temps, une application entière se développe en composant des éléments plus petits. Une application entière peut même être un élément :
<my-app></my-app>
Créer des composants Web avec la sauce spéciale de Polymer
Diapositives : http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer contient un certain nombre de fonctionnalités pratiques pour créer des applications basées sur des composants Web :
- Enregistrement d'un élément déclaratif :
<polymer-element> - Héritage déclaratif :
<polymer-element extends="..."> - Liaison de données bidirectionnelle déclarative :
<input id="input" value=""> - Gestionnaires d'événements déclaratifs :
<button on-click="" - Propriétés publiées :
xFoo.bar = 5<-><x-foo bar="5"> - Observation de la propriété :
barChanged: function() {...} - PointerEvents/PointerGestures par défaut
La morale de l'histoire est que l'écriture d'éléments Polymer est entièrement déclarative. Moins vous avez de code à écrire, mieux c'est ;)
Composants Web : l'avenir du développement Web
Diapositives : http://html5-demos.appspot.com/static/cds2013/index.html#26
Je m'en voudrais de ne pas mentionner les normes qui régissent les composants Web. Après tout, Polymer est basé sur ces API fondamentales en constante évolution.
Nous sommes à l'aube d'une période très prometteuse pour le développement Web. Contrairement à d'autres nouvelles fonctionnalités ajoutées à la plate-forme Web, les API qui composent les composants Web ne sont pas visibles par l'utilisateur. Ils sont uniquement destinés à la productivité des développeurs. Chacune des quatre API principales est utile en soi, mais ensemble, elles font des merveilles !
- Shadow DOM : encapsulation du style et du DOM
- Éléments personnalisés : définissez de nouveaux éléments HTML. Donnez-leur une API avec des propriétés et des méthodes.
- Les importations HTML constituent le modèle de distribution d'un package CSS, JS et HTML.
- Modèles : modèles DOM appropriés pour définir des fragments de balisage inertes à supprimer ultérieurement
Si vous souhaitez en savoir plus sur les principes de base des API, consultez webcomponents.org.