Cosa sono i Web Components
Con i framework JavaScript, come React e Angular, gli sviluppatori sono in grado da tempo di definire elementi Web riutilizzabili. Tuttavia, ogni framework utilizza uno standard diverso, che in molti casi impedisce l’uso incrociato di pratici frammenti di codice. I cosiddetti Web Components sono la soluzione, in quanto si tratta di componenti HTML riutilizzabili che possono essere utilizzati indipendentemente dal framework. Standardizzato nel 2012, questo modello è supportato oggi da tutti i browser più comuni.
Cosa sono i Web Components?
I Web Components sono blocchi di codice che racchiudono la struttura interna di elementi HTML, compresi CSS e JavaScript, e consentono di applicare il codice relativo in una qualsiasi posizione di siti e applicazioni Web. Il concetto è stato sviluppato da un gruppo di lavoro del World Wide Web Consortium (W3C), fondato nel 1994 dall’inventore del Web Tim Berners-Lee, che da sempre si è impegnato attivamente per standardizzare tutte le tecnologie Web elementari. Il modello dei Web Components, pubblicato come standard nel 2012, prevede principalmente le quattro specifiche seguenti per la creazione di componenti HTML funzionali:
- Custom Elements: set di API JavaScript per la definizione di elementi personalizzati
- Shadow DOM: set di API JavaScript per l’inserimento di elementi DOM
- ES Modules: moduli per l’inserimento e il riutilizzo di documenti JavaScript
- HTML Templates: modelli di markup che non sono mappati sulla pagina visualizzata e possono essere utilizzati come base per elementi personalizzati.
Lo standard Web Components è attualmente supportato da tutti i browser più comuni. In tutti i framework JavaScript e le librerie che lavorano con HTML si possono utilizzare codici HTML incapsulati.
Perché utilizzare i Web Components?
Librerie e framework come Angular o jQuery sono stati per anni gli strumenti più utilizzati da qualsiasi programmatore Web. Per quanto pratiche e versatili, queste strutture di base del codice, che permettono di risparmiare molto lavoro nello sviluppo di progetti, si rivelano troppo rigide per un utilizzo dei progetti di tipo trasversale. Non è raro che gli sviluppatori debbano riscrivere o revisionare il codice quando, ad esempio, è previsto un cambiamento del framework. Per questo motivo, il World Wide Web Consortium (W3C) ha introdotto i Web Components e quindi un framework universale per il riutilizzo semplice e transettoriale del codice HTML, CSS e JavaScript.
Poiché gli elementi universali del Web sono caratterizzati da una sintassi semplice e veloce da apprendere, anche i programmatori alle prime armi beneficiano dello standard W3C. Negli ultimi anni Google ha lavorato nell’ambito del “Polymer Project”, al fine di sviluppare librerie e template per la programmazione dei Web Components e metterli a libera disposizione.
Elementi dei Web Components in sintesi
Il modello dei Web Components si basa su quattro specifiche fondamentali, che vi illustriamo nel dettaglio con alcuni esempi.
Custom Elements
I Custom Elements (elementi personalizzati) sono tag HTML che incapsulano contenuti HTML, compresi istruzioni CSS e script; essi sono dichiarati nel CustomElementRegistry. Ecco quali sono le caratteristiche più importanti:
- Terminano con un tag di chiusura.
- Il loro nome è una stringa DOM e contiene sempre un trattino.
- Il loro nome può comparire una sola volta all’interno del CustomElementRegistry.
Per creare un Custom Element, sono necessari JavaScript e il metodo define. L’esempio seguente di Web Components mostra un Custom Element che può essere utilizzato per inserire un singolo pulsante:
customElements.define('mio-pulsante', MioPulsante, { extends: 'p' });Il codice seguente è sufficiente per utilizzare questo elemento in un’applicazione Web:
<mio-pulsante></mio-pulsante>Shadow DOM
La caratteristica più importante dei Web Components è la loro capacità di incapsulare elementi HTML. L’API Shadow DOM consente di allegare alberi DOM nascosti ad un albero di documenti. Dal momento che solo il tag HTML del Shadow DOM è visibile, il DOM nascosto può essere esteso con elementi HTML senza dover cambiare il DOM principale ogni volta. Per informazioni più dettagliate ed esempi pratici su questo tipo di tecnologia potete leggere il nostro articolo di approfondimento sui Shadow Doms e il loro funzionamento.
ES Modules
Gli ES Modules sono moduli che esportano oggetti, funzioni o variabili da un file JavaScript. Questa proprietà consente di suddividere le variabili all’interno di un file in gruppi e di farvi riferimento. Attualmente esistono due sistemi ES Modul: mentre CommonJS originariamente era incluso in Node.JS, il sistema più recente è già compreso in JavaScript ES6.
Per esportare una funzione da una libreria JavaScript, utilizzate il metodo export. L’esempio riporta l’esportazione di una funzione che riproduce due volte una stringa di input.
// ? lib.bib1
export const ripeti = (string) => `${string} ${string}`;
}
Con import è possibile richiamare la funzione esportata tutte le volte che si desidera.
main.mjs
import {ripeti} from './lib.mio';
ripeti ('Buongiorno');
// → 'Buongiorno Buongiorno'
Template HTML
Un template HTML è un modello per file HTML. Gli elementi contenuti rimangono inattivi e non vengono resi noti fino a quando non sono chiamati esplicitamente. Ciò significa che non hanno alcun effetto negativo sul tempo di caricamento di una pagina Web. Sono quindi un’utile alternativa ai metodi JavaScript convenzionali.
Per definire un template HTML si usa il tag <template>. Nell’esempio seguente viene creato un template chiamato “mio elemento”.
<template id="mio-elemento">
<p>Mio elemento</p>
</template>
Per utilizzare il template in una pagina Web, richiamatelo con i metodi JavaScript getElementbyId e content e allegatelo al DOM.
let template = document.getElementById('mio-elemento');
let templateContent = template.content;
document.body.appendChild(templateContent);
Come si utilizzano i Web Components?
Gli esempi riportati funzionano solo se si combinano tra loro i singoli componenti del modello Web Components. Lo schema seguente semplifica la procedura:
- Create una classe o funzione JavaScript o esportatela da un file JavaScript esistente utilizzando gli ES Modules.
- Dichiarate il nuovo Custom Element utilizzando il metodo CustomElementRegistry.define().
- Se necessario o desiderato, aggiungete un Shadow DOM nascosto per inserire elementi figli al vostro Custom Element.
- Definite un template HTML con i tag <template> e <slot>.
- Usate il Custom Element generato all’interno della vostra pagina Web come un normale elemento HTML.
Il seguente tutorial fornisce un’introduzione semplice alla programmazione dei Web Components:
Compatibilità dei Web Components con le diverse versioni del browser
La compatibilità dei Web Components non era ancora disponibile nelle versioni precedenti del browser. Oggi, tutti i comuni browser supportano Custom Elements, Shadow DOM, ES Modules e HTML Templates. La seguente tabella fornisce una panoramica sulla compatibilità dei vari Web Components.
| Compatibile? | Firefox | Chrome | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Custom Elements | Sì | Sì | Sì (dalla versione 76) | Sì | Sì |
| Shadow DOM | Sì | Sì | Sì (dalla versione 75) | Sì | Sì |
| ES Modules | Sì | Sì | Sì | Sì | Sì |
| Template HTML | Sì | Sì | Sì | Sì | Sì |
Librerie, modelli ed esempi di Web Components
La programmazione dei Web Components può essere complicata, specialmente per i principianti. Sul Web, tuttavia, troverete numerose librerie con modelli e funzioni standard, nonché esempi pratici per facilitare il vostro lavoro.
- Lit Element: classe di base semplice per la creazione di Web Components.
- Polymer Project: nell’ambito del Polymer Project, Google offre vari strumenti per lavorare con i Web Components, tra cui un kit iniziale per la programmazione di applicazioni con Web Components, una libreria di template HTML per JavaScript e vari elementi pronti all’uso.
- Hybrids: fornisce una semplice libreria di interfaccia utente per la creazione di Web Components.
- Slim.js: libreria con proprietà avanzate per i Web Components che utilizza l’eredità di JavaScript ES6 basata su classi.
Articoli simili
BEST-BACKGROUNDSShutterstock CSS Less: presentazione e tutorial
Il CSS è uno dei linguaggi più importanti del World Wide Web. Ma lavorare con il linguaggio dei fogli di stile può rivelarsi complicato, perciò molti sviluppatori preferiscono usare Less. Il preprocessore CSS non solo semplifica la scrittura del codice del foglio di stile, ma estende le potenzialità CSS a diversi elementi come variabili, funzioni o mixin. Il nostro tutorial vi rivelerà come…
Alternative a Bootstrap: una panoramica dei migliori framework per front end
Bootstrap è conosciuto per essere la soluzione framework più amata per la concezione e la creazione di superfici web altamente funzionali. La raccolta costituita da componenti HTML, CSS e JavaScript, pubblicata da Twitter nel 2011 sotto licenza libera MIT, può vantare senza dubbio di avere una grande community come anche un grande numero di estensioni, interfacce per sistemi di content management,…
REDPIXEL.PLShutterstock Linguaggi di programmazione web: i linguaggi più indicati per il web
Desiderate imparare uno o diversi linguaggi di programmazione web? La prima sfida è decidere quale. Infatti esistono centinaia di linguaggi di programmazione, ma non tutti sono idonei allo sviluppo web. Per consentirvi di scegliere più facilmente e di potervi occupare del vostro progetto web vi presentiamo i linguaggi di programmazione web più conosciuti.
spainter_vfxShutterstock Ingegneria inversa di un software
Il reverse engineering in ambito software può aiutare a scoprire e comprendere il funzionamento e la struttura di un software. L’“ingegneria inversa” di un software fino al suo codice sorgente permette non solo di scandagliarne i bug, ma anche di analizzare i programmi della concorrenza. Il reverse engineering è quindi molto versatile. Ma come è applicato il reverse engineering nel campo dei…
Polyfill: stringhe di codice per moderne funzioni web
I siti Internet e le app sono soggetti a continui cambiamenti. Le nuove caratteristiche e funzioni promettono spesso un progetto web di maggior qualità, più sicuro o con migliori performance, perciò la loro implementazione in molti casi non è altro che pura formalità. Molti browser però non riescono a tenere il passo quando si tratta di supportare moderne tecnologie web, un problema a cui si può…
