Polymer è una porta di accesso al fantastico futuro dei componenti web. Vogliamo semplificare l'utilizzo e la creazione di elementi personalizzati. Nell'ultimo anno, il team ha lavorato duramente a una serie di polyfill per le specifiche in evoluzione. Inoltre, abbiamo creato una comoda libreria di sugaring per semplificare la creazione di componenti web. Infine, stiamo creando un insieme di elementi di utilità e interfaccia utente 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".
Presentazioni: http://html5-demos.appspot.com/static/cds2013/index.html
"Tutto è un elemento" (da <select> agli elementi personalizzati)
Presentazioni: http://html5-demos.appspot.com/static/cds2013/index.html#6
La creazione di pagine web negli anni'90 era limitata, ma efficace. Avevamo a disposizione solo pochi elementi. La parte più interessante? Tutto era dichiarativo. È stato estremamente semplice creare una pagina, aggiungere controlli dei moduli e creare un'"app" senza scrivere enormi quantità di codice JavaScript.
Prendiamo l'umile elemento <select>. L'elemento include una serie di funzionalità, semplicemente dichiarandolo:
- Personalizzabile tramite attributi HTML
- Esegue il rendering degli elementi secondari (ad es.
<option>) con un'interfaccia utente predefinita, ma configurabile tramite attributi. - Utile in altri contesti come
<form> - Ha un'API DOM: proprietà e metodi
- Attiva gli eventi quando si verificano eventi interessanti
I componenti web forniscono gli strumenti per tornare a questo periodo d'oro dello sviluppo web. Uno 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 associati a dati di un attributo queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="">
Questo è esattamente l'approccio che stiamo adottando in Polymer. Anziché creare app web monolitiche basate su JavaScript, creiamo elementi riutilizzabili. Nel tempo, un'intera app si sviluppa dalla composizione di elementi più piccoli. E un'intera app potrebbe essere un elemento:
<my-app></my-app>
Creazione di componenti web con la salsa speciale di Polymer
Presentazioni: 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 dell'elemento dichiarativo:
<polymer-element> - Ereditarietà dichiarativa:
<polymer-element extends="..."> - Data binding bidirezionale dichiarativo:
<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
Il messaggio è che scrivere elementi Polymer significa essere dichiarativi. Meno codice devi scrivere, meglio è ;)
Componenti web: il futuro dello sviluppo web
Presentazioni: http://html5-demos.appspot.com/static/cds2013/index.html#26
Non vorrei dimenticarmi di menzionare gli standard alla base dei componenti web. Dopotutto, Polymer si basa su queste API di base in evoluzione.
Siamo sull'orlo di un periodo molto entusiasmante per lo sviluppo web. A differenza di altre nuove funzionalità aggiunte alla piattaforma web, le API che compongono Web Components non sono brillanti o rivolte agli utenti. Sono puramente per la produttività degli sviluppatori. Ognuna delle quattro API principali è utile da sola, ma insieme fanno miracoli.
- DOM shadow: incapsulamento di stili e DOM
- Elementi personalizzati: definisci nuovi elementi HTML. Fornisci un'API con proprietà e metodi.
- HTML Imports è il modello di distribuzione di un pacchetto di CSS, JS e HTML.
- Modelli: modelli DOM appropriati per definire blocchi inerti di markup da eliminare in un secondo momento
Per saperne di più sui concetti di base delle API, visita webcomponents.org.