Polymer est une porte d'entrée vers l'avenir incroyable des composants Web. Nous voulons faciliter l'utilisation et la création d'éléments personnalisés. Au cours de l'année écoulée, l'équipe a travaillé dur sur un ensemble de polyfills pour répondre à l'évolution des spécifications. En outre, nous avons créé une bibliothèque d'association 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 sommet des développeurs Chrome 2013, je me suis plongé dans les différents aspects de Polymer et sur la philosophie qui sous-tend notre "Tout est un élément". mantra.
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
La création de pages Web dans les années 90 était à la fois contraignante, mais puissante. Nous n'avions que quelques éléments à notre disposition. Et le plus puissant ? Tout était déclaratif. C'était incroyablement simple de créer une page, d'ajouter des commandes de formulaire et de créer une "application". sans écrire de code JavaScript.
Prenons l'élément simple <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 elle est 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 belle époque du développement Web. Il permet de créer des éléments rappelant <select>, mais conçu pour les cas d'utilisation de 2014. Par exemple, si AJAX a été inventé aujourd'hui, il s'agira probablement d'une balise HTML (exemple):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Ou les éléments responsifs qui sont liés à un attribut queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…C'est exactement cette 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, une application entière se développe en composant des éléments plus petits ensemble. Et l'application entière pourrait être un élément:
<my-app></my-app>
Créer des composants Web avec l'ingrédient spécial de Polymer
Diapositives: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer offre de nombreux avantages pour créer des 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="{{foo}}"> - Gestionnaires d'événements déclaratifs:
<button on-click="{{handleClick}}"> - Propriétés publiées:
xFoo.bar = 5<-><x-foo bar="5"> - Observation de la propriété:
barChanged: function() {...} - PointerEvents / PointerGestes par défaut
La morale de l'histoire est que l'écriture d'éléments Polymers consiste à être déclaratif. 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 serais très négligé si je ne fais pas référence aux normes derrière les composants Web. Après tout, Polymer s'appuie sur ces API fondamentales en pleine évolution.
Nous vivons actuellement une période passionnante dans le domaine du développement Web. Contrairement à d'autres nouvelles fonctionnalités ajoutées à la plate-forme Web, les API qui composent Web Components ne sont ni esthétiques, ni visibles par l'utilisateur. Elles sont uniquement destinées à la productivité des développeurs. Chacune des quatre API principales est utile en soi, mais ensemble, des choses magiques se produisent !
- Shadow DOM : style et encapsulation DOM
- Éléments personnalisés : permet de définir de nouveaux éléments HTML. Offrez-leur une API avec des propriétés et des méthodes.
- Les importations HTML constituent le modèle de distribution d'un package de fichiers CSS, JS et HTML.
- Modèles : création de modèles DOM appropriée pour définir des blocs de balisage inertes qui seront marqués comme gravés ultérieurement
Pour en savoir plus sur les principes de base des API, consultez la page ebidel.github.com/webcomponents.