Conosci i Web Components, cosa sono e perché iniziare a usarli

Già nel 2011 il termine “web components” è stato utilizzato alla Fronteers Conference e da allora ci sono stati veramente molti sviluppatori che hanno contribuito a questa idea. Ma di cosa sto parlando?

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ò oggi è qualcosa che (grazie ai polyfill) è già disponibile e funziona in tutti i browser moderni, quello che devi fare è semplicemente usarli.

Non si tratta soltanto di un articolo pratico, parleremo anche un po’ di storia e cercheremo di capire perché, dopo più di 6 anni, stiamo ancora aspettando una versione standard di questa rivoluzione e perché è necessario utilizzare dei file polyfill per rendere questa tecnologia compatibile con tutti i browser, alcuni anche moderni.

Quello che voglio di fare è offrirti un quadro completo della situazione odierna e lasciarti decidere se utilizzarli o meno nei tuoi progetti. 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 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 così che (con le relative implementazioni) tutti i browser fossero in grado di comprenderlo.

Riprenderò questo discorso più avanti, al momento cerchiamo di capire perché i web components non sono ancora presenti su qualsiasi sito (o applicazione)…

Come una qualsiasi organizzazione aperta, anche il W3C ha delineato pubblicamente le regole che segue per 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 ai sette anni che sono serviti per raggiungere una specifica stabile 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 interna, allora è ovvio che dobbiamo aspettare ulteriormente!

Ma perché parlo di politica? Che cosa c’entra?

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

L’azienda che ha fatto questa sorpresa è 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 a essere importante.

Dal mio personale punto di vista gli altri componenti dell’organizzazione stanno rallentando l’arrivo della Recommendation semplicemente perché Google partirebbe con un vantaggio indiscutibile, ma allo stesso tempo cercano di trovare uno standard che sia compatibile e implementabile da parte di tutti rispettando il concetto di apertura e condivisione intrinseco del web.

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, ma 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, si può usare un polyfill. Prima di fare questo però vorrei descriverti quali sono le tecnologie sulle quali si basano i Web Components perché non avere le conoscenze che stanno alla base di questa tecnologia sarebbe un grave torto.

La possibilità che ci offre questo standard è importare un gran numero di elementi semplificando (di gran lunga) la sintassi HTML, già 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 e analizzandoli nel dettaglio dovrei aprire una grande parentesi, 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 fa affidamento a quattro tecnologie ben distinte:

• 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 nuovo elemento, in questo modo possiamo evitare di ripetere ogni volta la sua struttura;
• negli anni abbiamo cercato in molti modi di utilizzare dei componenti presenti in un’altra pagina HTML e di importarli all’interno della propria. Abbiamo provato con gli <iframe> (troppo pesanti) e con AJAX (ma usare JavaScript per includere pagine HTML non sembra la soluzione ideale), 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 semplificarne il riuso;
• 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 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 articoli, ma per il momento voglio mantenere la tua attenzione sui Web Components e mostrarti il supporto che abbiamo nei diversi browser.

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 appena presentato.

Un browser deve supportare tutte le tecnologie per essere considerato compatibile con i Web Components.

Come avrai sicuramente visto (purtroppo) ad oggi soltanto i browser Chrome e Opera sono in grado di supportare le singole tecnologie, ma c’è da dire che l’implementazione fatta non è la rappresentazione di una sintassi stabile perché tutte le specifiche di questi componeneti sono nello stato Editor Draft, ovvero assolutamente da non usare in produzione.

Ma come spesso accade, lo sviluppo non di può fermare di fronte a una specifica, infatti già oggi 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.

Inizieremo questo percorso con un Web Component molto semplice da installare e completamente inutile!

Sì hai capito bene, a meno che la tua intenzione non sia quella di accogliere i tuoi visitatori con una cascata di emoji, questo elemento non ha grandi scopi strutturali ma è stato semplicemente creato per puri scopi educativi e per presentare le potenzialità di questi nuovi elementi.

Per prima cosa è consigliato l’uso di Bower dato che, nonostante i dubbi sul suo futuro, il team dei Web Components lo ha scelto per la sua specifica gestione dei pacchetti all’interno dei nostri progetti. Quindi, prima ancora di lanciare qualsiasi comando controlla se è presente nel tuo sistema operativo:

$ bower --version

Se il comando non risponde con -bash: bower: command not found ma ti restituisce invece un numero di versione di Bower, significa che tutto è installato all’interno del tuo sistema operativo e possiamo proseguire senza pensieri. In caso contrario puoi installare Bower grazie a npm con il seguente comando:

$ npm install -g bower

Adesso che nel tuo sistema operativo è stato installato Bower è giunto il momento di creare il nostro primo progetto, tutto parte dalla creazione della cartella di lavoro:

$ mkdir emoji-rain && cd emoji-rain

Se non ricordi, su sistemi Linux e OSX, il comando mkdir ci permette di creare una nuova cartella mentre con && concateniamo il seguente comando che è cd e che ci permette di accedere alla cartella. Hai appena creato la cartella emoji-rain/ e una volta al suo interno puoi lanciare il comando che ti permetterà di popolare il tuo progetto scaricando automaticamente tutte le dipendenze necessarie al funzionamento del nuovo componente <emoji-rain>.

$ bower install emoji-rain

Una volta eseguito questo comando, all’interno della cartella emoji-rain/ si trova la nuova cartella bower_components/ all’interno della quale è presente il file webcomponentjs/webcomponents.js che funziona come polyfill per consentire il corretto funzionamento del Web Component. Oltre a questo file JavaScript abbiamo anche il file emoji-rain/emoji-rain.html che è il file all’interno del quale viene definita la struttura di questo componente.

Se sei stato attento, hai notato la presenza della cartella polyfill/, e questo succede perché l’elemento che stiamo usando è stato creato grazie a questa libreria JavaScript che aiuta a creare e utilizzare Web Components nel modo più performante possibile. Argomento che però non andremo ad approfondire in questo articolo.

Adesso che abbiamo scaricato il componente, quello che manca è una semplice struttura HTML con la quale potremo iniziare a giocare. Il nostro lavoro iniziale si concentrerà sugli elementi <script> e <link> grazie ai quali possiamo includere rispettivamente il polyfill JavaScript e il codice HTML e CSS del nuovo Web Comonent, grazie all’attributo rel="import".

<!DOCTYPE html> 
<html> 
	<head> 
		<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 
		<link rel="import" href="bower_components/emoji-rain/emoji-rain.html"> 
	</head> 
	<body> 
		<!-- Inserisci elemento --> 
	</body> 
</html>

Con questo semplice blocco di codice abbiamo già fatto un sacco di cose che ci hanno permesso di impostare il nostro progetto. Per esempio abbiamo richiamato la libreria webcomponents-lite.min.js in versione minificata.

Subito sotto stiamo utilizzando la tecnologia import (nel nostro elemento <link>) per includere un file HTML esterno che andrà a descrivere la struttura, lo stile e le animazioni dell’elemento che stiamo inserendo.

Tutto quello che resta da fare è popolare il nostro <body> e dare vita alla nostra web app!

Trovare e Scegliere gli Elementi

In questo articolo ti ho semplificato molto la vita perché ti basterà inserire l’elemento <emoji-rain active></emoji-rain> per iniziare a far piovere delle Emoji sulla tua pagina. Il componente ha molte altre impostazioni che ti permetteranno di utilizzarlo ma prima di introdurti ai molteplici componenti che sono già pubblicati all’interno del sito del progetto, voglio mostrarti il codice completo di questa nostra pagina web.

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="utf-8"> 
		<title>Piovono Emoji</title> 

		<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> 
		<link rel="import" href="bower_components/emoji-rain/emoji-rain.html"> 
	</head> 

	<body> 
		<emoji-rain active></emoji-rain> 
	</body> 

</html>

Fino ad ora hai utilizzato il componente che ti ho presentato in questo articolo, <emoji-rain>, ma sapevi che esistono già centinaia di elementi che non aspettano altro di essere utilizzati e (ancora meglio) migliorati attraverso le Pull Request che potrai fare sui repository GitHub?

Ebbene per iniziare il primo passo da fare è andare sul sito webcomponents.org che è il principale motore di ricerca per cercare il componente necessario al nostro lavoro. Una volta entrato sul sito noterai che, oltre alla documentazione, è disponibile un motore di ricerca che permette di trovare l’elemento cercato che può essere raccolto in una delle seguenti categorie: Toolbar, Layout, Media, Image, Calendar e Form.

Queste non sono le uniche categorie perché gli sviluppatori di questi componenti oggi possono pubblicare delle vere e proprie collezioni che aiutano lo sviluppatore a creare con minor sforzi (e dipendenze) gli elementi necessari alla propria applicazione.

Conclusioni

Sei giunto alla conclusione di questo primo articolo introduttivo sui Web Component, che ne pensi?

Inizierai a utilizzare questi elementi?

Te lo chiedo perché, nonostante sia comodo avere una libreria di oltre 1000 elementi tra i quali navigare, da bravo sviluppatore dovresti sapere che è possibile anche crearne di nuovi in grado di rispondere alle proprie necessità. Cosa che però non ti ho mostrato in questo articolo perché il mio interesse era quello di introdurti a questa nuova tecnologia.

In tutta onestà l’argomento Web Components mi interessa molto, in gran parte perché sono elementi che si possono usare per la creazione delle nostre applicazioni e questo è sicuramente un vantaggio. Pochi semplici elementi HTML che si trasformano in componenti completi e funzionali nei device dei nostri visitatori.

Desideri scoprire come sia possibile creare il tuo primo componente e sfruttare le conoscenze di ES6 che hanno semplificato la sintassi JavaScript?

Allora lascia un commento qua sotto e fammi conoscere il tuo interesse, se siamo in diversi a voler approfondire questo argomento non esiterò a scrivere articoli più completi e dettagliati sulle caratteristiche di questo nuovo modo di sviluppare.