Polymer è una porta d'accesso al fantastico futuro di Web Components. Vogliamo semplificare l'utilizzo e la creazione di elementi personalizzati. Nell'ultimo anno, il team ha lavorato duramente su una serie di polyfill per soddisfare le specifiche in continua evoluzione. Inoltre, abbiamo creato una comoda libreria per semplificare la creazione di componenti web. Infine, stiamo creando una serie di elementi UI e di utilità da riutilizzare nelle app. In occasione del Chrome Dev Summit del 2013, ho approfondito gli aspetti di Polymer e la filosofia alla base del nostro "Tutto è un elemento" mantra.
Presentazioni: http://html5-demos.appspot.com/static/cds2013/index.html
"Tutto è un elemento" (da <select> a elementi personalizzati)
Presentazioni: http://html5-demos.appspot.com/static/cds2013/index.html#6
Creare pagine web negli anni '90 era limitante, ma potente. Avevamo solo pochi elementi a nostra disposizione. La parte più potente?...tutto è stato dichiarativo. Creare una pagina, aggiungere controlli del modulo e creare un'"app" è stato estremamente semplice senza scrivere gob di JavaScript.
Prendi l'umile elemento <select>. L'elemento include moltissime funzionalità, semplicemente dichiarandole:
- Personalizzabili tramite attributi HTML
- Visualizza gli 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 cose 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 progettato per i casi d'uso del 2014. Ad esempio, se AJAX è stato inventato oggi, probabilmente si tratterebbe di un tag HTML (esempio):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Oppure elementi adattabili associati ai dati a un attributo queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…Questo è esattamente l'approccio che stiamo adottando in Polymer. Anziché creare app web monolitiche basate su JavaScript, creiamo elementi riutilizzabili. Nel corso del tempo, un'intera app nasce dalla composizione di elementi più piccoli insieme. Un'intera app potrebbe essere un elemento chiave:
<my-app></my-app>
Creazione di componenti web con la salsa speciale Polymer
Presentazioni: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer offre numerose funzionalità per la creazione di applicazioni basate su componenti web:
- Registrazione dell'elemento dichiarativo:
<polymer-element> - Eredità dichiarativa:
<polymer-element extends="..."> - Associazione dichiarativa dei dati bidirezionali:
<input id="input" value="{{foo}}"> - Gestori di eventi dichiarativi:
<button on-click="{{handleClick}}"> - Proprietà pubblicate:
xFoo.bar = 5<-><x-foo bar="5"> - Osservazione della proprietà:
barChanged: function() {...} - PointerEvents / PointerGes per impostazione predefinita
La morale della storia è che scrivere elementi Polymer è incentrato sull'essere dichiarativi. È meglio scrivere meno codice ;)
Componenti web: il futuro dello sviluppo web
Presentazioni: http://html5-demos.appspot.com/static/cds2013/index.html#26
Sarei sconsigliato se non avessi gridato gli standard alla base di Web Components. Dopotutto, Polymer si basa su queste API di base in continua evoluzione.
Siamo sull'orlo di un periodo davvero entusiasmante per lo sviluppo web. A differenza di altre nuove funzioni aggiunte alla piattaforma web, le API che compongono i componenti web non sono intelligenti o rivolte agli utenti. Sono utili esclusivamente per la produttività degli sviluppatori. Ognuna delle quattro API principali è utile da sola, ma insieme accadono qualcosa di magico.
- Shadow DOM: stile e incapsulamento del DOM
- Elementi personalizzati: definisci nuovi elementi HTML. Fornisci loro un'API con proprietà e metodi.
- Importazioni HTML è il modello di distribuzione per un pacchetto di CSS, JS e HTML.
- Modelli: modelli DOM adeguati per definire blocchi inerti di markup da eliminare in seguito
Per saperne di più sulle nozioni di base delle API, visita il sito ebidel.github.com/webcomponents.