Introduzione

Negli ultimi anni abbiamo assistito ad un interessante crescendo di
strumenti, sotto forma di librerie e framework, per lo sviluppo di
interfacce Web: da Angular a React, da Vue a Ember, solo per citarne alcuni
tra i più noti. Ciascuna libreria o framework ha i suoi punti di
forza e le debolezze e non è raro assistere a veri e propri scontri su
quale sia lo strumento migliore. Nell'ambito di ciascuna libreria, inoltre,
sono nati innumerevoli progetti che mettono a disposizione componenti Web
pronti all'uso. Citiamo ad esempio Kendo, che fornisce componenti per React,
Angular e Vue, ma anche React-Toolbox, React-Bootstrap, Angular
Material, NG Bootstrap e molte altre ancora.

In questo universo così variegato, lo sviluppatore che si affaccia per la
prima volta a questi framework rimane disorientato. Ma anche lo
sviluppatore esperto fa fatica a districarsi tra le innumerevoli offerte di semplificazione del proprio lavoro. Al di là della
validità della singola libreria o dello specifico framework, è indubbio che
una volta fatta una scelta, è difficile tornare indietro, se non altro per
i costi di riscrittura del codice sviluppato per una libreria per adattarlo
a quello di un'altra. Un datepicker per React che abbiamo sviluppato noi o
che abbiamo scaricato dal Web, non funzionerà all'interno di
un'applicazione Angular, a meno di assurdi artifici, nè tantomeno in
un'applicazione scritta in puro JavaScript.

Col senno di poi, l'effetto involontario generato dalle librerie e dai
framework JavaScript per semplificare la creazione di interfacce Web è
stato, sotto certi aspetti, proprio quello di complicarla. Gli elementi
delle nostre interfacce sono spesso legati indissolubilmente alla libreria
o al framework che ci ha semplificato la vita per realizzarle.

Cosa possiamo fare allora per evitare questa complessità? C'è un modo per
realizzare componenti Web tali che possano essere utilizzati in qualsiasi
applicazione indipendentemente dalla libreria o framework utilizzato?

In effetti la risposta a questa domanda esiste ed è positiva. E per quanto
strano possa sembrare, questa possibilità esisterebbe ormai da alcuni anni
ed è rappresentata dai Web Component.

Cosa sono i Web Component

I Web Component sono un insieme di specifiche standard per la creazione di
elementi HTML personalizzati e riutilizzabili in pagine ed applicazioni
Web. Il
primo accenno
ai principi di questa tecnologia risale al 2011, e il primo
Working Draft del W3C
è del 2012. Da allora l'iter della standardizzazione ha introdotto diverse
variazioni sull'idea originaria, tanto da dare origine a versioni diverse
delle specifiche, identificate con v0 e v1. Allo stato
attuale i Web Component non si basano più su specifiche a se stanti, ma
fanno riferimento agli standard di HTML e DOM, di cui ormai fanno parte
integrante.

Oltre alla possibilità di creare elementi HTML personalizzati, i Web
Component supportano
un meccanismo di incapsulamento che consente il loro riutilizzo all'interno
di una qualsiasi applicazione Web o framework senza rischio di interferenze
con il codice esistente.

I Web Component si basano essenzialmente su tre funzionalità:

• Custom element
  :
  rappresentano un insieme di API JavaScript per la creazione di
  elementi del DOM personalizzati associati ad uno specifico tag HTML
• Shadow DOM
  :
  un insieme di API JavaScript che consentono di gestire un DOM
  specifico per un componente, indipendente dal DOM della pagina Web,
  realizzando il meccanismo di incapsulamento a cui accennavamo prima
• HTML template
  :
  si tratta di un'integrazione alle specifiche dell'HTML che consente
  di definire porzioni di markup che non viene interpretato al
  caricamento della pagina Web, ma che viene istanziato a runtime

In questa guida inizieremo ad esplorare le caratteristiche dei Web
Component partendo dal loro utilizzo e proseguendo con la creazione di un
nostro componente.

Supporto e compatibilità

I Web Component mettono a disposizione l'infrastruttura per il supporto
nativo di elementi HTML personalizzati da parte di un browser standard.
Purtroppo, nonostante la disponibilità delle specifiche ormai da qualche
tempo, non tutti i browser le supportano. Basta dare uno sguardo alla
seguente tabella (tratta da caniuse.com) per
rendersi conto dello stato embrionale in cui si trova l'implementazione di
queste specifiche al momento in cui scriviamo questa guida:

Possiamo vedere come praticamente soltanto Chrome supporta pienamente i Web
Component, mentre altri browser basati su WebKit hanno un supporto
parziale. Vediamo inoltre come il supporto da parte di Firefox è in via di
sviluppo ed allo stato attuale Edge lo sta prendendo in considerazione per
l'implementazione.

La situazione quindi sembrerebbe ancora lontana dalla maturità e quindi
dall'impiego dei Web Component in produzione. Tuttavia, possiamo ricorrere
ad una
raccolta di
polyfill, cioè di implementazioni che simulano il supporto nativo su quei browser
che non lo implementano.

Grazie a questa libreria possiamo utilizzare i Web Component già da oggi ed
avere le nostre applicazioni pronte nel momento in cui le specifiche
saranno universalmente supportate.