Polymer est une passerelle vers l'avenir étonnant des composants Web. Nous voulons qu'il soit facile d'utiliser et de créer des éléments personnalisés. Depuis un an, l'équipe a travaillé dur sur un ensemble de polyfills pour répondre aux exigences en constante évolution. De plus, nous avons créé une bibliothèque de sucreries pratique pour faciliter la création de composants Web. Pour terminer, nous allons créer un ensemble d'éléments d'interface utilisateur et utilitaires que vous pourrez réutiliser dans vos applications. Lors du Chrome Dev Summit 2013, j'ai découvert les différents aspects de Polymer et la philosophie qui sous-tend 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 contraignante, mais puissante. Nous n'avions que quelques éléments à notre disposition. Le plus important ? Tout était déclaratif. Créer une page, ajouter des commandes de formulaire et créer une "application" sans écrire de code JavaScript ont été incroyablement simples.
Prenons l'élément <select> simple. De nombreuses fonctionnalités sont intégrées à l'élément, simplement en les déclarant:
- Personnalisable via des attributs HTML
- Affiche les enfants (par exemple,
<option>) avec une interface utilisateur par défaut, mais configurable via des attributs. - Utile dans d'autres contextes comme
<form> - 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 à l'apogée du développement Web. Un élément dans lequel nous pouvons créer des éléments qui rappellent <select>, mais conçu pour les cas d'utilisation de 2014. Par exemple, si AJAX a été inventé aujourd'hui, il s'agirait sans doute 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 sont liés à un attribut queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="">
C'est exactement l'approche que nous adoptons dans Polymer. Au lieu de concevoir des applications Web monolithiques basées sur JavaScript, créons des éléments réutilisables. Au fil du temps, l'ensemble d'une application repose sur la composition d'éléments plus petits. Heck, et l'application entière pourrait être un élément:
<my-app></my-app>
Créer des composants Web avec la sauce spéciale Polymer
Diapositives: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer offre de nombreuses commodités pour la création d'applications basées sur des composants Web:
- Enregistrement de l'é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="" - Établissements publiés:
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 repose entièrement sur la déclaration. 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
Il serait regrettable de ne pas mentionner les normes derrière les composants Web. Après tout, Polymer est basé sur ces API fondamentales en évolution.
Nous vivons actuellement une période passionnante pour le développement Web. Contrairement aux autres nouvelles fonctionnalités ajoutées à la plate-forme Web, les API qui composent les Web Components ne sont pas attrayantes ou ne sont pas visibles par l'utilisateur. Elles sont uniquement destinées à la productivité des développeurs. Chacune des quatre API principales est utile en tant que telle, mais ensemble, des choses magiques se produisent.
- 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.
- Importations HTML correspond au modèle de distribution d'un package CSS, JS et HTML.
- Modèles : modèles DOM appropriés permettant de définir des blocs inertes de balisage à éditer ultérieurement
Pour en savoir plus sur les principes de base des API, consultez le site webcomponents.org.