Rinnovamento User Interface parte 3 : il vantaggio dei Web Component

web-components-vantaggio

I web component sono una tecnologia emergente che si basa su una specifica web definita già dal 2011 dal W3C, ovvero dal World Wide Web Consortium . In base a tale specifica si possono scrivere componenti custom in puro codice html, css e javascript utilizzabili in qualsiasi applicazione. Avevamo già parlato di questo argomento nelle puntate precedenti: te le sei perse? Recupera subito la puntata 1 e la puntata 2.

Ritornando ai componenti web, un esempio chiaro può essere il web component google-map creato da Google. Inserendo il tag custom <google-map/> con gli attributi latitudine e longitudine nell’html della propria applicazione si visualizza automaticamente una mappa di Google.

<google-map latitude=”45.8529825″ longitude=”9.3900705″></google-map>

Tutto quanto serve per costruire il web component è incapsulato in un DOM (l’albero degli oggetti della pagina html) protetto chiamato Shadow DOM, in maniera tale che il codice del web component non interferisca con l’applicazione web o il framework di appartenenza.

I Web Component sono tag html a tutti gli effetti, quindi possono avere attributi, emettere eventi, contenere elementi figli, etc… Sono concettualmente uguali ad esempio al tag <video> di html5, con l’unica differenza che il codice del componente custom può essere messo a disposizione da chiunque voglia scriverlo.

<video width=”320″ height=”240″ controls>

  <source src=”movie.mp4″ type=”video/mp4″>

  <source src=”movie.ogg” type=”video/ogg”>

  Your browser does not support the video tag.

</video>

Si comprende chiaramente il vantaggio dei web component rispetto all’utilizzo di un framework specifico come può essere Angular, Vue o React nella scrittura di componenti riutilizzabili. Un web component può essere integrato in qualsiasi applicazione, sia in un’applicazione scritta in puro html, css e javascript, che in un’applicazione Angular o React o Vue.

La tecnologia di questi componenti è considerata da alcuni il futuro del web. A differenza dei framework javascript quali Angular, React e Vue non è però ancora vastamente diffusa. Una delle ragioni principali è che nonostante le specifiche siano disponibili da anni, non tutti i browser ancora le supportano. Esistono comunque delle librerie definite di polyfill che simulano il supporto nativo, permettendo quindi di utilizzare i componenti web su tutti i browser.

E’ comunque da sottolineare che la tecnologia dei web component è adatta a scrivere componenti ma non applicazioni web. Per la realizzazione di applicazioni web moderne (le cosiddette spa, ovvero single page application) sono indicati i framework javascript moderni, che forniscono facilitazioni aggiuntive, come il supporto agli sviluppatori nell’orchestrazione dei componenti web, nella gestione delle url, nella gestione dello stato dell’applicazione…


Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *