Polymer is een toegangspoort tot de geweldige toekomst van webcomponenten. We willen het makkelijk maken om aangepaste elementen te gebruiken en te maken. Het afgelopen jaar heeft het team hard gewerkt aan een reeks polyfills voor de veranderende specificaties. Daarnaast hebben we een handige bibliotheek met syntactische suiker gemaakt om het maken van webcomponenten makkelijker te maken. Tot slot maken we een set UI- en hulpelementen die je kunt hergebruiken in je apps. Tijdens de Chrome Dev Summit van 2013 ben ik dieper ingegaan op de verschillende onderdelen van Polymer en de filosofie achter onze mantra 'Alles is een element'.
Dia's: http://html5-demos.appspot.com/static/cds2013/index.html
'Alles is een element' (van <select> tot aangepaste elementen)
Dia's: http://html5-demos.appspot.com/static/cds2013/index.html#6
In de jaren 90 was het maken van webpagina's beperkt, maar krachtig. We hadden maar een paar elementen tot onze beschikking. Het krachtige deel? Alles was declaratief. Het was opmerkelijk eenvoudig om een pagina te maken, formulierbesturingselementen toe te voegen en een app te maken zonder veel JavaScript te hoeven schrijven.
Neem het eenvoudige element <select>. Het element bevat veel ingebouwde functionaliteit, alleen al door het te declareren:
- Aanpasbaar via HTML-kenmerken
- Geeft onderliggende elementen (bijv.
<option>) weer met een standaard UI, maar kan worden geconfigureerd via kenmerken. - Nuttig in andere contexten, zoals
<form> - Heeft een DOM API: property's en methoden
- Activeert gebeurtenissen als er iets interessants gebeurt
Web Components bieden de tools om terug te keren naar deze hoogtijdagen van webontwikkeling. Een waarin we nieuwe elementen kunnen maken die doen denken aan <select>, maar die zijn ontworpen voor de use cases van 2014. Als AJAX vandaag zou worden uitgevonden, zou het waarschijnlijk een HTML-tag zijn (voorbeeld):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Of responsieve elementen die gegevensbinding hebben met een queryMatches-kenmerk:
<polymer-media-query query="max-width:640px" queryMatches="">
Dit is precies de aanpak die we gebruiken in Polymer. In plaats van monolithische web-apps op basis van JavaScript te bouwen, maken we herbruikbare elementen. Na verloop van tijd groeit een hele app uit tot een samenstelling van kleinere elementen. Een hele app kan zelfs een element zijn:
<my-app></my-app>
Webcomponenten bouwen met de speciale saus van Polymer
Dia's: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer bevat een aantal handige functies om op webcomponenten gebaseerde apps te maken:
- Registratie van declaratieve elementen:
<polymer-element> - Declaratieve overname:
<polymer-element extends="..."> - Declaratieve tweerichtings-gegevensbinding:
<input id="input" value=""> - Declaratieve gebeurtenishandlers:
<button on-click="" - Gepubliceerde property's:
xFoo.bar = 5<-><x-foo bar="5"> - Property-observatie:
barChanged: function() {...} - PointerEvents / PointerGestures standaard
De moraal van het verhaal is dat het schrijven van Polymer-elementen draait om declaratief zijn. Hoe minder code je hoeft te schrijven, hoe beter ;)
Webcomponenten: de toekomst van webontwikkeling
Dia's: http://html5-demos.appspot.com/static/cds2013/index.html#26
Ik zou nalatig zijn als ik de standaarden achter webcomponenten niet zou vermelden. Polymer is immers gebaseerd op deze evoluerende basis-API's.
We staan aan de vooravond van een heel spannende tijd in webontwikkeling. In tegenstelling tot andere nieuwe functies die aan het webplatform worden toegevoegd, zijn de API's die Web Components vormen niet flitsend of gericht op gebruikers. Ze zijn puur bedoeld voor de productiviteit van ontwikkelaars. Elk van de 4 belangrijkste API's is op zichzelf nuttig, maar samen kunnen ze nog meer.
- Shadow DOM: stijl- en DOM-inkapseling
- Aangepaste elementen: Definieer nieuwe HTML-elementen. Geef ze een API met eigenschappen en methoden.
- HTML-imports is het distributiemodel voor een pakket met CSS, JS en HTML.
- Templates: de juiste DOM-templates om inerte stukken opmaak te definiëren die later worden gestempeld
Ga naar webcomponents.org voor meer informatie over de basisprincipes van de API's.