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.
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:
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.
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.
Il modello dei Web Components si basa su quattro specifiche fondamentali, che vi illustriamo nel dettaglio con alcuni esempi.
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:
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>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.
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'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);Gli esempi riportati funzionano solo se si combinano tra loro i singoli componenti del modello Web Components. Lo schema seguente semplifica la procedura:
Il seguente tutorial fornisce un’introduzione semplice alla programmazione dei Web Components:
Per tutelare la vostra privacy il video si caricherà dopo aver cliccato.
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ì |
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.
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,...
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.
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...
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...
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ò...
Offri ai tuoi clienti servizi professionali e affidabili con l'hosting di IONOS.
Scopri i pacchetti
Dominio omaggio per un anno