Polymer è uno dei punti di accesso allo straordinario futuro dei componenti web. Vogliamo semplificare l'utilizzo e la creazione di elementi personalizzati. Nell'ultimo anno, il team ha lavorato duramente su un insieme di polyfill per le specifiche in evoluzione. Inoltre, abbiamo creato una comoda libreria di "syntactic sugar" per semplificare la creazione di componenti web. Infine, stiamo creando un insieme di elementi di UI e utilità da riutilizzare nelle tue app. Al Chrome Dev Summit del 2013, ho approfondito le diverse parti di Polymer e la filosofia alla base del nostro mantra "Tutto è un elemento".
Slide: http://html5-demos.appspot.com/static/cds2013/index.html
"Tutto è un elemento" (da <select> a elementi personalizzati)
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#6
Creare pagine web negli anni'90 era limitante, ma potente. Avevamo a disposizione solo pochi elementi. La parte più interessante?… Tutto era dichiarativo. Era incredibilmente semplice creare una pagina, aggiungere controlli dei moduli e creare un'"app" senza scrivere un sacco di JavaScript.
Prendiamo il semplice elemento <select>. L'elemento include un'ampia gamma di funzionalità, semplicemente dichiarandolo:
- Personalizzabile tramite attributi HTML
- Esegue il rendering degli elementi secondari (ad es.
<option>) con una UI predefinita, ma configurabile tramite attributi. - Utile in altri contesti come
<form> - Ha un'API DOM: proprietà e metodi
- Attiva gli eventi quando si verificano azioni interessanti
I componenti web forniscono gli strumenti per tornare a questo periodo d'oro dello sviluppo web. Un ambiente in cui possiamo creare nuovi elementi, che ricordano <select>, ma progettati per i casi d'uso del 2014. Ad esempio, se AJAX fosse stato inventato oggi, probabilmente sarebbe un tag HTML (esempio):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
In alternativa, elementi adattabili che eseguono l'associazione di dati a un attributo queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="">
Questo è esattamente l'approccio che stiamo adottando in Polymer. Invece di creare app web monolitiche basate su JavaScript, creiamo elementi riutilizzabili. Nel tempo, un'intera app si sviluppa dalla composizione di elementi più piccoli. In effetti, un'intera app potrebbe essere un elemento:
<my-app></my-app>
Creazione di componenti web con la formula speciale di Polymer
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer contiene una serie di funzionalità per la creazione di applicazioni basate su componenti web:
- Registrazione degli elementi dichiarativi:
<polymer-element> - Ereditarietà dichiarativa:
<polymer-element extends="..."> - Associazione di dati bidirezionale dichiarativa:
<input id="input" value=""> - Gestori di eventi dichiarativi:
<button on-click="" - Proprietà pubblicate:
xFoo.bar = 5<-><x-foo bar="5"> - Osservazione della proprietà:
barChanged: function() {...} - PointerEvents/PointerGestures per impostazione predefinita
In sintesi, la scrittura di elementi Polymer è tutta una questione di dichiaratività. Meno codice devi scrivere, meglio è ;)
Componenti web: il futuro dello sviluppo web
Slide: http://html5-demos.appspot.com/static/cds2013/index.html#26
Sarei negligente se non menzionassi gli standard alla base dei componenti web. Dopotutto, Polymer si basa su queste API di base in continua evoluzione.
Siamo alle soglie di un momento molto entusiasmante per lo sviluppo web. A differenza di altre nuove funzionalità aggiunte alla piattaforma web, le API che compongono i componenti web non sono appariscenti o rivolte agli utenti. Servono esclusivamente per la produttività degli sviluppatori. Ognuna delle quattro API principali è utile di per sé, ma insieme fanno magie.
- Shadow DOM: stile e incapsulamento DOM
- Elementi personalizzati: definisci nuovi elementi HTML. Fornisci un'API con proprietà e metodi.
- HTML Imports è il modello di distribuzione per un pacchetto di CSS, JS e HTML.
- Modelli: modelli DOM appropriati per definire blocchi inerti di markup da stampare in un secondo momento
Se vuoi saperne di più sui concetti di base delle API, visita webcomponents.org.