Nel precedente articolo abbiamo parlato del nuovo framework React chiamato Remix e se non hai avuto il tempo di leggerlo, ti consiglio di farlo cliccando qui. Nel caso te ne fossi innamorato e stai pensando di migrare un progetto sviluppato con Angular, ad esempio, ti renderai conto quanto lungo e tedioso sarebbe lo sviluppo di tutti i componenti dell'interfaccia già creati. Ma non temere perché l'obiettivo di oggi sarà comprendere cosa sono i Web Components e come possono aiutare a esternalizzare la parte visuale di un'applicazione per essere agnostica alla tecnologia utilizzata nel Front End.
La nostra lettura partirà dal capire le necessità per arrivare alla soluzione finale che ci permetterà di comprendere in dettaglio cosa sono i Web Components.
Cosa sono i Web Components: le necessità
Esistono diversi frameworks JavaScript o librerie che ci permettono di sviluppare la logica e l'interfaccia di un'applicazione. E molto spesso all'interno di un'azienda, in particolare se di grandi dimensioni, possono coesistere diverse tecnologie allo stesso tempo. Questo comporta la duplicazione di alcune componenti che vengono utilizzate per costruire la UI, come ad esempio i seguenti elementi: pulsanti, inputs, tabelle, etc.
Di conseguenza, se si adottano due tecnologie non compatibili, per mantenere lo stesso stile, si riscrive il codice del componente adattandolo alla tecnologia utilizzata. Ciò si traduce in:
- spreco di denaro e di tempo;
- ridondante manutenzione del codice;
- duplicazione dello sviluppo di nuove funzionalità.
Inoltre, nel caso in cui volessimo cambiare la tecnologia di una piattaforma, dovremo sempre riscrivere l'intera applicazione se il codice non è compatibile.
Queste sono le necessità e quindi i problemi che attualmente ci sono. Adesso cerchiamo di comprendere più in dettaglio il perché utilizzare i Web Components e così avremo un'immagine più generale di cosa sono i Web Components.
Perché utilizzare i Web Components?
Come soluzione a questi problemi sono nati i Web Components, che preciso nel sottolineare che non sono una tecnologia recentissima e che se ne discusse per la prima volta nel 2011. Anche se la loro prima implementazione è assai più recente. Questo indica che sin da subito si era sentita la necessità di avere dei componenti visuali che potessero essere riutilizzati in modo trasversale di progetto in progetto.
Per fare un esempio più concreto, per sviluppare un elemento di tipo Button, avendo due applicazioni costruite con due diverse tecnologie, possiamo utilizzare un Web Component e importarlo come se fosse un normale elemento HTML. Non ci preoccupiamo quindi di costruire un elemento duplicato per ogni tecnologia ma lo esternalizziamo, costruendo la nostra libreria di componenti UI in un progetto separato.
Da un piccolo esempio, possiamo già dare una valutazione ai vantaggi che otteniamo da una libreria di Web Components:
- gestione centralizzata (nuove funzionalità, aggiornamenti);
- i componenti sono riutilizzabili di progetto in progetto;
- indipendenza dalla tecnologia utilizzata;
- visione unica (in un unico posto, abbiamo tutti i componenti che necessitiamo)
Questo sottolinea il perché utilizzare i Web Components e come sono determinanti per un risparmio di costi ed energie legato alla riutilizzabilità degli elementi visuali di un'applicazione.
Adesso, dovendo quindi rispondere alla domanda cosa sono i Web Components, possiamo affermare quanto sotto:
I Web Components sono elementi visuali riutilizzabili che non dipendono da una tecnologia in concreto
Terminata la parte più noiosa, ovvero la teoria, passiamo allo sviluppo di un Web Component, e alla sua integrazione all'interno di un progetto sviluppato con NextJS.
Come implementare i Web Components
Prima di iniziare, ti introduco tre concetti fondamentali che ci aiuteranno a capire come funzionano i Web Components e che rivedremo nell'esempio a seguire:
- customElements: la API JavaScript per costruire il componente;
- shadow dom: permette di isolare l'esecuzione del componente (stile, etc);
- HTML templates: API HTML per mostrare l'elemento.
Passando alla pratica, ti ricordo che puoi consultare il codice finale sulla mia pagina Github del progetto qui.
L'obiettivo è creare un tag HTML che possa gestire in autonomia lo stile della tipografia della nostra piattaforma sulla base del componente che vogliamo mostrare. Di seguito un esempio di un suo futuro utilizzo:
<web-typography component="h1" data-text="I am an h1 tag" /> <web-typography component="p" data-text="I am a paragraph" />
In questo caso, possiamo già notare un vantaggio: non definiamo lo stile perché sarà lo stesso Web Component a gestirlo.
Vediamo a seguire come creare un Web Component che ci permetta di fare questo.
Per prima cosa ho creato una classe, chiamata Typography, che gestirà l'elemento di tipo testo sulla base di due attributi principali:
- component: definisce il tipo di tag da mostrare (h1, h2, h3, p, etc);
- data-text: definisce il contenuto testuale.
Infine, all'interno della stessa classe definisco lo stile che avrà ogni tipo di elemento di testo, così da evitare la ridondanza che otterrei aggiungendo le classi ogni qualvolta vado a creare un tag individualmente.
// Create a class for the element class Typography extends HTMLElement { constructor() { // Always call super first in constructor super(); /* With mode === closed, you cannot access to the shadow dom from outside */ const shadow = this.attachShadow({ mode: 'closed' }); // Get tag type const tag = this.getAttribute('component') || 'span'; const wrapper = document.createElement(tag); // Take attribute content and put it inside the tag const text = this.getAttribute('data-text'); wrapper.textContent = text; // Create some CSS to apply to the shadow dom const style = document.createElement('style'); style.textContent = ` h1 { font-size: 3rem; font-weight: 700; } h2 { font-size: 2rem; font-weight: 600; } p { font-size: 1.2rem; font-weight: 400; } `; // Attach the created elements to the shadow dom shadow.appendChild(style); shadow.appendChild(wrapper); } } // Define the new element (name must contain hyphens) customElements.define('web-typography', Typography);
La funzione constructor verrà eseguita non appena viene mostrato il componente HTML. All'interno accediamo agli attributi, definiamo lo stile e infine inseriamo gli elementi creati al DOM assegnato, lo shadowDom. Quest'ultimo è un DOM isolato al quale possiamo accedere o no, in base al parametro mode.
Una volta definito il comportamento basico, utilizziamo l'API customElements presente nella maggior parte dei browser, per definire un Web Component e così rendere possibile il suo utilizzo come un normale tag HTML.
Abbiamo appena visto i concetti fondamentali di un Web Component e non ci resta che utilizzarlo.
Nel successivo esempio ho integrato un Web Component all'interno di un'applicazione costruita con NextJS, che quindi utilizza ReactJS.
Per prima cosa dobbiamo importare il file JS:
useEffect(() => import('../components/Typography/index.js'), []);
Qui ho utilizzato lo useEffect, dato che è un'applicazione in ReactJS, e ho utilizzato il dynamic import per non pubblicare all'interno della cartella public di NextJS lo stesso componente. In un altro articolo vedremo come utilizzare i Web Component come tag JSX importandoli e utilizzandoli direttamente.
Poi passiamo all'utilizzo vero e proprio del nostro componente che verrà mostrato come qualsiasi tag HTML con lo stile che abbiamo definito al suo interno:
<web-typography data-text="I am a Web Component" component="h1" />
Niente di più semplice! Potremo utilizzare questo componente anche in un'applicazione scritta con Angular, VueJS o in puro JavaScript.
Il risultato sarà il seguente:
Cosa sono i Web Components - Esempio
Compatibilità con i browser
Attualmente la maggior parte dei browser supportano i Web Components. Per verificare la matrice di compatibilità puoi far riferimento a questo link. Nel caso volessi supportare un browser che non è compatibile nativamente con i Web Components, puoi sempre installare un polyfill seguendo il procedimento descritto qui.
Direi che abbiamo terminato questo nostro viaggio che ci ha fatto comprendere cosa sono i Web Components. In un successivo articolo parleremo di come utilizzarli come semplici import ES6, e ti introdurrò la libreria StencilJS. Questa rappresenta uno strumento fondamentale molto potente per la creazione dei Web Components. Se vuoi anticipare i tempi, ti consiglio di dare un'occhiata alla documentazione sulla pagina ufficiale.
Sei interessato/a a diventare Front End Developer? Ho creato un corso per aiutarti a entrare in questo mondo o per approfondire il linguaggio di programmazione JavaScript con maggiori dettagli. Puoi acquistare il corso completo qui adesso con il 40% di sconto. Sarà un viaggio dalle basi di JavaScript fino ad un livello più avanzato. Parleremo di testing, del protocollo HTTP, delle diverse versioni di ECMAScript e tante altre cose che puoi consultare sulla web. Nella versione completa avrai la mia assistenza a disposizione, tanti quiz, il materiale in PDF e un meeting finale. Se non fossi interessato alla versione completa, avrai la possibilità di acquistare la versione più economica che non comprende questi ultimi citati vantaggi. Puoi acquistare la versione Basic qui.
Ora è il momento di concludere. Ti ricordo che se ti è piaciuto questo articolo e vuoi supportarmi, puoi seguire questi semplici passaggi facili e gratuiti:
- Lascia un mi piace cliccando sull'icona del cuore qui sotto;
- Condividi questo post sui tuoi account social o con i tuoi amici;
- Seguimi su Instagram, Facebook, Twitter e su Github;
- Iscriviti alla newsletter qui sotto per non perderti nessun articolo, sconto o gossip (ce ne saranno tanti).
Grazie mille per l'attenzione e ti auguro una buona giornata!
