Polymer is één toegangspoort tot de verbazingwekkende toekomst van Web Components. We willen het gemakkelijk maken om aangepaste elementen te gebruiken en te bouwen. Het afgelopen jaar heeft het team hard gewerkt aan een set polyfills voor de zich ontwikkelende specificaties. Bovendien hebben we een handige suikerbibliotheek gemaakt om het bouwen van webcomponenten eenvoudiger te maken. Ten slotte maken we een set gebruikersinterface- en hulpprogramma-elementen die u in uw apps kunt hergebruiken. Tijdens de Chrome Dev Summit 2013 verdiepte ik me in de verschillende delen van Polymer en de filosofie achter onze 'Alles is een element'-mantra.
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
Het bouwen van webpagina's in de jaren negentig was beperkend, 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 klodders JavaScript te schrijven.
Neem het bescheiden <select> -element. Er is een heleboel functionaliteit ingebouwd in het element, simpelweg door het te declareren:
- Aanpasbaar via HTML-attributen
- Rendert kinderen (bijv.
<option>) met een standaard gebruikersinterface, maar configureerbaar via attributen. - Handig in andere contexten zoals
<form> - Heeft een DOM API: eigenschappen en methoden
- Activeert gebeurtenissen wanneer er interessante dingen gebeuren
Webcomponenten bieden de tools om terug te keren naar deze hoogtijdagen van webontwikkeling. Eén waarin we nieuwe elementen kunnen maken, die doen denken aan <select> , maar ontworpen voor de gebruiksscenario's van 2014. Als AJAX bijvoorbeeld vandaag zou worden uitgevonden, zou het waarschijnlijk een HTML-tag zijn ( example ):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Of responsieve elementen die gegevens binden aan een queryMatches attribuut:
<polymer-media-query query="max-width:640px" queryMatches="">
Dit is precies de aanpak die we volgen bij Polymer. Laten we in plaats van monolithische, op JavaScript gebaseerde webapps te bouwen, herbruikbare elementen maken. Na verloop van tijd groeit een hele app uit het samenstellen van kleinere elementen. Heck, en de hele app zou een element kunnen 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 gemakken voor het bouwen van op webcomponenten gebaseerde applicaties:
- Declaratieve elementregistratie:
<polymer-element> - Declaratieve overerving:
<polymer-element extends="..."> - Declaratieve tweerichtingsgegevensbinding:
<input id="input" value=""> - Declaratieve gebeurtenishandlers:
<button on-click="" - Gepubliceerde eigenschappen:
xFoo.bar = 5<-><x-foo bar="5"> - Waarneming van eigendommen:
barChanged: function() {...} - PointerEvents/PointerGestures standaard
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 Web Components niet zou uitroepen. Polymer is immers gebaseerd op deze evoluerende fundamentele API's.
We staan aan de vooravond van een zeer spannende tijd op het gebied van webontwikkeling. In tegenstelling tot andere nieuwe functies die aan het webplatform worden toegevoegd, zijn de API's waaruit webcomponenten bestaan niet glanzend of gebruikersgericht. Ze zijn puur bedoeld voor de productiviteit van ontwikkelaars . Elk van de vier belangrijkste API's is op zichzelf nuttig, maar samen gebeuren er magische dingen!
- Shadow DOM - stijl en DOM-inkapseling
- Aangepaste elementen - definieer nieuwe HTML-elementen. Geef ze een API met eigenschappen en methoden.
- HTML-import is het distributiemodel voor een pakket met CSS, JS en HTML.
- Sjablonen - juiste DOM-sjablonen voor het definiëren van inerte delen van de opmaak die later moeten worden uitgestempeld
Als je meer wilt weten over de basisprincipes van de API's, ga dan naar webcomponents.org.