Polymer est une passerelle vers l'avenir incroyable des composants Web. Nous souhaitons que vous puissiez utiliser et créer facilement des éléments personnalisés. Depuis un an, l'équipe travaille dur sur un ensemble de polyfills pour les spécifications en constante évolution. De plus, nous avons créé une bibliothèque pratique pour faciliter la création de composants Web. Enfin, nous allons créer un ensemble d'éléments d'UI et d'utilitaires à réutiliser dans vos applications. Lors du Chrome Dev Summit 2013, j'ai exploré 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
Créer des pages Web dans les années 1990 était limité, mais puissant. Nous n'avions que quelques éléments à notre disposition. Le plus intéressant ? Tout était déclaratif. Il a été 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'humble élément <select>. De nombreuses fonctionnalités sont intégrées à l'élément, 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> - Possède une API DOM: propriétés et méthodes
- Déclenche des événements lorsque des événements intéressants se produisent
Les composants Web fournissent les outils nécessaires pour revenir à cette période faste du développement Web. Nous pouvons y 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 responsifs qui se lient aux données d'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, créons des éléments réutilisables. Au fil du temps, une application entière se développe à partir de la composition d'é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'éléments déclaratifs:
<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 cette histoire est que l'écriture d'éléments Polymer doit être déclarative. Moins vous avez à écrire de code, mieux c'est ;)
Composants Web: l'avenir du développement Web
Diapositives: http://html5-demos.appspot.com/static/cds2013/index.html#26
Je ne saurais pas faire l'impasse sur les normes qui sous-tendent Web Components. Après tout, Polymer repose sur ces API de base en constante évolution.
Nous sommes sur le point d'entrer dans une période très excitante pour le développement Web. Contrairement aux autres nouvelles fonctionnalités ajoutées à la plate-forme Web, les API qui constituent les composants Web ne sont pas visibles ni destinées aux utilisateurs. Ils sont uniquement destinés à améliorer 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. Fournissez-leur une API avec des propriétés et des méthodes.
- Les importations HTML sont le modèle de distribution d'un package CSS, JS et HTML.
- Modèles : modèles DOM appropriés pour définir des blocs inertes de balisage à supprimer ultérieurement
Pour en savoir plus sur les principes de base des API, consultez webcomponents.org.