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…
Naviga per categoria:
Seleziona una categoria d’interesse dal nostro magazine
