Chrome Dev Summit - Componenti dichiarativi, incapsulati e riutilizzabili sui polimeri

Eric Bidelman

Polymer è una porta d'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 una serie di polyfill per l'evoluzione delle specifiche. Inoltre, abbiamo creato una pratica libreria per semplificare la creazione di componenti web. Infine, stiamo creando un insieme di elementi di utilità e UI da riutilizzare nelle 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 limitante, ma potente. Avevamo solo pochi elementi a nostra disposizione. La parte importante?...tutto era dichiarativo. È stato estremamente semplice creare una pagina, aggiungere controlli del modulo e creare un'"app" senza scrivere eccessi di JavaScript.

Usa l'umile elemento <select>. L'elemento ha una moltitudine di funzionalità, semplicemente dichiarandolo:

  • Personalizzabile tramite attributi HTML
  • Consente di eseguire il rendering degli elementi secondari (ad es. <option>) con un'interfaccia utente predefinita, ma configurabili tramite attributi.
  • Utile in altri contesti come <form>
  • Ha un'API DOM: proprietà e metodi
  • Attiva eventi quando accadono cose interessanti

I componenti web forniscono gli strumenti per tornare a questo periodo d'oro dello sviluppo web. Un luogo in cui possiamo creare nuovi elementi, che ricordano <select>, ma progettati per i casi d'uso del 2014. Ad esempio, se AJAX è stato inventato oggi, sarebbe probabilmente un tag HTML (esempio):

<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
                params='{"alt":"json"}'></polymer-ajax>

Oppure elementi adattabili che si associano dati a 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 cresce dalla composizione di elementi più piccoli insieme. Diamine, un'intera app potrebbe essere un elemento:

<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 una serie di comodità per la creazione di applicazioni basate su componenti web:

  • Registrazione dell'elemento dichiarativo: <polymer-element>
  • Ereditarietà dichiarativa: <polymer-element extends="...">
  • Associazione 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() {...}
  • Eventi Pointer / Gesti del puntatore per impostazione predefinita

La morale della storia è che scrivere elementi Polymer richiede una dichiarazione. Meno codice devi scrivere, meglio è ;)

Componenti web: il futuro dello sviluppo web

Presentazioni: http://html5-demos.appspot.com/static/cds2013/index.html#26

Non sarei possibile ringraziare pubblicamente gli standard di Web Componenti. Dopo tutto, Polymer si basa su queste API fondamentali in evoluzione.

Questo è un periodo davvero entusiasmante per lo sviluppo web. A differenza di altre nuove funzionalità che vengono aggiunte alla piattaforma web, le API che compongono i componenti web non sono efficacissime e non sono rivolte agli utenti. Sono pensati esclusivamente per la produttività degli sviluppatori. Ognuna delle quattro API principali è utile da sola, ma insieme accade qualcosa di magico.

  1. Shadow DOM: stile e incapsulamento di DOM
  2. Elementi personalizzati: ti consente di definire nuovi elementi HTML. Fornisci loro un'API con proprietà e metodi.
  3. Importazioni HTML è il modello di distribuzione per un pacchetto di CSS, JS e HTML.
  4. Modelli: modelli DOM appropriati per definire blocchi di markup inerti da eliminare in un secondo momento

Per saperne di più sulle nozioni di base delle API, visita il sito webcomponents.org.