Polymer e Web Components, Ecco Perché dovresti Conoscerli Oggi!

Già nel 2011 il termine "web components" è stato sentito alla Fronteers Conference e da allora ci sono stati veramente molti sviluppatori che hanno contribuito a questa idea. Ma di cosa sto parlando? E che cosa ha fatto Google rilasciando Polymer?

Ebbene, come è già successo anche in passato non sono qua a scriverti cose che forse entreranno a far parte degli standard e che un giorno vedremo all’interno dei nostri browser; quello di cui ti parlerò quest’oggi è qualcosa che (grazie ai polyfill) è già disponibile e funziona in tutti i browser moderni, quello che devi fare è semplicemente usarli :P

Questo articolo però non sarà soltanto pratico, parleremo anche un po’ di storia e cercheremo di capire perché, dopo più di 4 anni, stiamo ancora aspettando una versione standard di questa rivoluzione e perché per poterne usufruire dei vantaggi è necessario utilizzare dei file polyfill.

Quello che ho intenzione di fare è farti avere un quadro completo della situazioni e lasciarti prendere la tua decisione se vuoi utilizzarli o meno nei tuoi progetti. Perché parliamoci chiaro, le funzionalità che questi elementi ci mettono a disposizione sono praticamente infinite ma come è successo nel primo passaggio all’HTML5 può presentare qualche problema.

Come si prende una decisione al W3C

Se sviluppi siti web da diverso tempo ormai dovresti essere abituato ai lunghi tempi di attesa che il W3C ci impone prima di promuovere le sue specifiche allo stato di Recommendation. Giusto per farti un esempio veloce, al giorno d’oggi possiamo lavorare tranquillamente con il codice HTML5 ma la specifica non è stata “raccomandata” fino al 28 Ottobre 2014 mentre la sua prima stesura risale al 2007 (ci sono voluti ben sette anni).

Se hai provato a sperimentare con i primi elementi <video> o i nuovi elementi <input> come email o number ti ricorderai che non tutti i browser erano in grado di poter comprendere queste novità, per rendere il tutto compatibile era necessario caricare con il file JavaScript html5shiv.js per fare in modo che (con le relative implementazioni) tutti i browser fossero in grado di poterlo comprendere.Riprenderò questo discorso più avanti, al momento cerchiamo di capire perché in quattro anni ancora i web components non popolano qualsiasi sito web…

decisioni

Come una qualsiasi organizzazione aperta, anche il W3C ha delineato pubblicamente le regole che segue ogni qual volta si trova a decidere se far passare di stato una determinata specifica. Se sei andato a sbirciare il documento collegato, ti sarai sicuramente accorto che è incredibilmente dettagliato e lascia poco spazio alla fantasia, anche se penso che lasci spazio per le discussioni.

Ogni specifica proposta deve attraversare un lungo rapporto decisionale dove diversi componenti, appartenenti anche a diverse realtà, si devono confrontare e prendere una decisione quasi unanime.

Ripensando al fatto dei sette anni di HTML5 e che in quel periodo sono stati corretti più di 4000 problemi dovrebbe essere più semplice accettare queste tempistiche; se oltre a questo ci infiliamo anche la politica allora è ovvio che dobbiamo aspettare ulteriormente! Ma perché parlo di politica? Che cosa centra?

Forse sarei stato più corretto a parlare di diplomazia piuttosto che politica ma dato che all’interno dell’organizzazione W3C ci sono componenti di Google, Apple, Microsoft e molti altri big del settore informatico talvolta qualcuno potrebbe impiegare parte dei suoi reparti per fare una “sorpresina” agli altri.

L’azienda che ha fatto questa sorpresa alle altre è stata proprio Google che in questi ultimi anni ha proposto uno standard e ha iniziato a popolare il web con una serie di elementi raccogliendo il tutto sotto il termine di Polymer. Torneremo a trattare quest’ultimo a breve e ti mosrterò anche come sia possibile utilizzare i suoi elementi, ma prima di fare questo vorrei rispondere alla domanda che forse ti stai facendo: perché le altre aziende dovrebbero rallentare il rilascio dei Web Components?

Ed ecco che forse il termine “politica” torna ad essere incredibilmente importante. Dal mio punto di vista gli altri stanno rallentando l’arrivo della Recommendation semplicemente perché Google partirebbe con un vantaggio rispetto a loro, ma allo stesso tempo cercano di trovare uno standard che sia compatibile ed implementabile da parte di tutti ; anche perché in diversi hanno messo in dubbio il rilascio completo di questi elementi…

Non voglio dire che non vedremo mai i Web Components all’interno dei nostri browser, questo perché a breve ti mostrerò come farli funzionare già oggi, piuttosto che purtroppo siamo ancora ben lontani dal rilascio di uno standard.

Come utilizzare i Web Components

Poco fa ti ho accennato al fatto che difficilmente vedremo nel prossimo futuro uno standard che ci permetterà di utilizzare tranquillamente i Web Components e in questa sezione ho la presunzione di spiegarti come utilizzarli nei browser moderni, sono forse poco chiaro?

La soluzione che ti sto per presentare è molto simile alla precedente già vista per il metalinguaggio HTML5, in fin dei conti ti basterà richiamare un file JavaScript, ma prima di fare questo vorrei descriverti un attimo quali sono le tecnologie sulle quali si basano i Web Components.

La possibilità che ci offrirebbe questo standard sarebbe quello di poter importare un gran numero di elementi andando a semplificare di gran lunga la nostra sintassi HTML, già ad oggi puoi vedere dei risultati di questa tecnologia all’interno dell’elemento <video>. Quello che facciamo nel nostro HTML è semplicemente inserire un elemento, ma quello che viene visualizzato nel browser è un player video completo con tanto di comandi che ci permettono di gestire la sua riproduzione.

Questi comandi fanno affidamento a degli eventi JavaScript creati appositamente ma quello che voglio farti capire è che tu non hai bisogno di capire le dinamiche, almeno non per usare questo elemento.

Allo stesso modo i Web Components ci permetterebbero di inserire mappe, playlist, menu, tabs e molti altri elementi disponibili con un singolo tag HTML.

Questa piccola magia fatta all’interno dei nostri browser, ovvero che basta utilizzare un singolo elemento HTML per ottenere dei componenti molto più complessi e interessanti, fa affidamento a quattro tecnologie ben distinte che ci permettono di fare veramente molto:

  • per prima cosa troviamo il nuovo interessante elemento <template> che, un po’ come spiega il nome stesso, ci consente di utilizzarlo come punto di partenza nella creazione di un determinato elemento in modo da non dover ripetere il formato ogni volta;
  • negli anni abbiamo cercato in molti modi di utilizzare dei componenti presenti in un’altra pagina HTML all’interno della propria. Abbiamo provato con gli <iframe> (troppo pesanti) e con AJAX (ma usare JavaScript per includere pagine HTML non suonava bene), per fortuna oggi possiamo fare affidamento alle HTML import che ci offrono una soluzione standard per includere file HTML esterni;
  • un’altra tecnologia molto interessante è quella offerta dai custom element che non fanno altro che offrirci la possibilità di creare i nostri elementi HTML e semplificare il riuso dei nostri elementi;
  • e ultimo ma non per importanza troviamo le Shadow DOM che non sono altro che delle funzioni JavaScript che ci permettono di dichiarare i nuovi elementi HTML partendo da delle strutture che possiamo creare autonomamente seguendo una API.

Se per il momento ti sembra che abbia fatto un minestrone di conoscenze, ti confesso che non sei molto lontano dalla realtà. Con questa piccola lista ti ho introdotto una marea di nuove tecnologie che andremo ad approfondire nel prossimo futuro con la pubblicazione di nuovi contenuti, ma per il momento voglio mantenere la tua attenzione sui Web Components e mostrarti come sia possibile utilizzarli già da ora.

Compatibilità Web Components

L’immagine che ti ho appena inserito rappresenta lo stato odierno del supporto ai Web Components che come puoi notare tu stesso, si suddivide nel supporto alle singole tecnologie che ti ho presentato precedentemente. Un browser deve supportare le singole tecnologie per essere considerato compatibile con i Web Components.

Come avrai sicuramente visto (purtroppo) ad oggi soltanto i browser Chrome sono in grado di supportare le singole tecnologie, anche se hanno sviluppato del codice che non presenta una struttura raccomandata da parte del W3C e che forse cambieranno nel futuro…

Ma come ti ho detto fin dall’inizio di questo articolo puoi usare i Web Components nei moderni browser grazie ad un polyfill! Proprio come succedeva con i primi elementi HTML5 che usavamo grazie a html5shiv.js, anche per questa nuova tecnologia è presente un file che puoi scaricare direttamente dal sito WebComponents.org che prende il nome di webcomponents.js; quanta fantasia :)

Inserendo questo file all’interno del tuo progetto sarai in grado di far funzionare i nuovi elementi, se poi sei anche un affezionato di Bower ti confermo che potrai scaricare e implementare questa libreria JavaScript direttamente dal tuo terminale!

Dalla Teoria alla Pratica, come usare i Web Components?

Ebbene abbiamo parlato fino ad ora di quanto sia semplice utilizzare un singolo tag HTML per includere tutti i comandi necessari ad un player video oppure della semplicità nell’implementazione di una mappa; ma come puoi utilizzarli veramente?

In un futuro articolo ti mostrerò come creare il tuo componente personalizzato ma per fortuna nostra esistono un sacco di sviluppatori che stanno già condividendo le proprie creazioni grazie alle quali ti posso far vedere velocemente che cosa significa utilizzare un Web Component.

Per prima cosa, se utilizzi Bower il processo è incredibilmente semplice, tutto quello che devi fare è aprire il tuo terminale, creare una nuova cartella e digitare al suo interno:

Una volta completato il comando ti troverai all’interno della cartella del progetto la cartella bower_components/ dove sono stati salvati anche i file necessari al corretto funzionamento di Polymer.

Visto che io non utilizzo questa soluzione ho preferito scaricarmi il file .zip offerto ed estrarlo direttamente all’interno della cartella polymer/ presente nel mio desktop. Il contuto dello .zip non farà altro che farci installare la cartella bower_components/ che avremmo avuto con Bower, ma in questo articolo voglio mostrarti la potenzialità dei Web Components che possiamo utilizzare grazie a Polymer; Bower possiamo affrontarlo in un altro articolo.

Quello che ci manca adesso è una semplice struttura HTML con la quale potremo iniziare a giocare!

Con questo semplice blocco di codice abbiamo già fatto un sacco di cose che ci hanno permesso di impostare il nostro progetto. Ad esempio, al rigo 4 quello che stai facendo è richiamare la libreria webcomponents.js in versione minificata e ridotta; ridotta perché non implementa il polyfil per le Shadow DOM.

Subito sotto stiamo utilizzando la tecnologia import per includere un file HTML esterno che andrà a descrivere l’elemento che desideriamo. Tutto quello che resta da fare è popolare il nostro <body> e dare vita alla nostra web app!

Trovare e Scegliere gli Elementi

Precedentemente ti avevo avvertito che non sarei stato in grado di descriverti nel dettaglio come fosse possibile creare un nuovo elemento, ma la cosa di cui non dobbiamo preoccuparci è il fatto che il web è pieno di posti dove possiamo andare a scoprirli!

Puoi iniziare la tua ricerca direttamente all’interno del catalogo di Polymer, dove è stato fatto anche un interessante lavoro presentando le singole categoria sotto forma di tabella degli elementi, oppure consultare un altro progetto Open Source che prende il nome di CustomElements.io dove centinaia di sviluppatori condividono i propri elementi pubblicati su GitHub.

polymer-elements

La selezione degli elementi è abbastanza intuitiva e con le demo è semplice capire se quello che stiamo per integrare sarà utile al nostro progetto o meno.

Forse una cosa che non ti ho ancora detto riguardo ai Web Components è che grazie a questi elementi, non siamo soltanto in grado di includere delle strutture HTML complesse ma proprio come succede per i comandi di un video, siamo in grado di importare stili e codice JavaScript che ci aiuta a personalizzare l’esperienza utente.

Per esempio, diciamo che hai bisogno di un elemento input con alcuni effetti che riproducono il material design, una volta dentro il catalogo di Polymer potrai selezionare gli elementi Md chiamati anche Paper Elements che ci possono essere d’aiuto.

Personalmente ho scelto il paper-input che è un web component che mi permette di inserire velocemente un elemento <input> già caricato con alcuni effetti che aiuteranno il nostro visitatore a utilizzare la nostra applicazione.

Ecco l’unica parte in cui dovrai modificare il codice che ti ho precedentemente mostrato, tutto quello che devi fare (ovviamente una volta scaricato il componente che vuoi utilizzare), è importarlo all’interno della pagina ed utilizzarlo come se fosse un qualsiasi elemento HTML.

paper-input

Con l’immagine che ti ho appena inserito ti ho mostrato che cosa è possibile fare con i Web Components. Adesso puoi andare direttamente nel catalogo di Polymer e sperimentare tu stesso questa potenzialità ma se vuoi scoprire come poter realizzare tu stesso questi elementi dovrai aspettare uno dei prossimi articoli perché ci sono un sacco di altre cose interessanti che vanno discusse.

Prima di concludere però voglio condividere un piccolo blocco di codice che ti assicurerà di aver caricato la libreria webcomponents.js prima che il browser tenti di creare l’elemento <paper-input>:

Conclusioni

Spero che questo articolo sia stato di tuo gradimento e che ti abbia aiutato a capire che cosa dobbiamo aspettarci del web del domani e perché è necessario essere preparati!

Molti sono i segreti che i Web Components portano con se e molti altri sono gli articoli dove andremo a parlare più nel dettaglio di WebGL, <canvas>, animazioni e lo sviluppo anche di videogiochi! Il mio consiglio è quello di iscriverti alla newsletter di skillsAndMore (la nostra scuola online per sviluppatori) e restare aggiornato sulle novità che questo sito e il network AndMore hanno da offrire!

 

Lascia il tuo Pensiero

2 Responses to “Polymer e Web Components, Ecco Perché dovresti Conoscerli Oggi!”

  1. alex

    Ciao Andrea, grazie per le info…. e mi permetto una critica spero costruttiva. Manca la data di pubblicazione/stesura dell’articolo ed un generico 22 settembre in testa (oggi è il 6 settembre) unito ad un (c 2016) in calce non aiuta a sapere quanto l’articolo sia attuale. Nel ns. mondo è una informazione fondamentale e la data è dirimente sulla qualità ma soprattutto attualità delle considerazioni sull’argomento in oggetto.Fai riferimento ad un 2014, ma citi IE 10 e non IE 11 che è del 2013, quindi …. boh …

    Rispondi
    • Andrea Barghigiani

      Ciao Alex,
      in effetti hai completamente ragione. Dato che stiamo procedendo a trasferire i contenuti di questo sito sul nuovo SkillsAndMore, terrò bene a mente le tue considerazioni durante il restyling dello stesso.

      Grazie mille per la franchezza delle tue parole e a presto.
      Andrea

      Rispondi