Indice
Ogni anno il sito the State of JavaScript rilascia statistiche sull'andamento dei framework di frontend. Inutile dire che React, Vue.js e Angular continuano a dominare la classifica dei framework più utilizzati (e parte anche del nostro stack tecnologico).
Tuttavia è interessante notare come di anno in anno appaiono, crescono o scendono nell'interesse tecnologie più recenti, se non nuove. Dell'ascesa di Svelte, Solid e Qwick ne avevamo già parlato in un apposito articolo. Oggi invece ci vogliamo concentrare su altri framework che, entro una certa misura possono essere ancora definiti minoritari. Stiamo parlando di Stencil, HTMX e Lit.
HTMX
HTMX è una libreria JavaScript rilasciata nel 2020, creata in risposta alla crescente complessità nella gestione delle richieste asincrone e degli aggiornamenti dinamici dei contenuti. Lo sviluppo di HTMX da intercooler.js, una libreria per semplificare le richieste AJAX, segna un passo importante nell'evoluzione dello sviluppo web.
Il creatore di HTMX, Carson Gross, mirava a sviluppare un metodo più efficiente per la creazione di pagine web dinamiche che si basasse sui punti di forza dell'HTML, riducendo al contempo la dipendenza dal pesante JavaScript. HTMX infatti si basa sul principio di estendere l'HTML con attributi speciali per consentire contenuti e interazioni dinamiche.
Il creatore di HTMX, Carson Gross, mirava a sviluppare un metodo più efficiente per la creazione di pagine web dinamiche che si basasse sui punti di forza dell'HTML, riducendo al contempo la dipendenza dal pesante JavaScript. HTMX infatti si basa sul principio di estendere l'HTML con attributi speciali per consentire contenuti e interazioni dinamiche.
Vantaggi
- Meno JavaScript, più HTML: HTMX permette di creare interazioni avanzate senza bisogno di scrivere codice JavaScript complesso.
- Leggero e veloce: con un file di soli 14 KB, è estremamente più leggero rispetto a React, Vue o Angular.
- Perfetto per architetture server-side: si integra benissimo con linguaggi backend come Python, Ruby, PHP o Go.
- Facile da adottare: basta aggiungere HTMX a una pagina HTML esistente per iniziare a usarlo.
Svantaggi
- Framework incompleto: non gestisce lo stato dell’applicazione come React o Vue.
- Inadatto per SPA complesse: per applicazioni molto interattive con molteplici stati dinamici, potrebbe risultare limitato.
- Comunità contenuta: sebbene in rapida espansione, ha una base utenti più piccola rispetto ai framework più affermati.
Lit
Il framework Lit, rilasciato per la prima volta nel 2018 tramite il team Polymer, è stato sviluppato appositamente per la creazione di componenti web nativi. Ciò che caratterizza Lit è il ridotto peso dei componenti web generati, che si aggira intorno ai 5 KB. Questo aspetto, unito al fatto che possono essere utilizzati framework di componenti web in modo trasversale, rende Lit un buon candidato per lo sviluppo di componenti generici o librerie di componenti.
Un'importante caratteristica di Lit è il concetto di “aggiornamento istantaneo”. Ciò significa che vengono aggiornati solo gli elementi interattivi dell'interfaccia utente che sono effettivamente cambiati. A differenza della maggior parte degli altri framework JavaScript che gestiscono lo stato del browser in un albero dom virtuale, Lit aggiorna direttamente gli elementi dom dinamici, risparmiando il costoso confronto tra alberi dom virtuali e reali. Questo riduce la necessità di aggiornamenti estesi e migliora le prestazioni dell'applicazione. Per il rendering dell'HTML, Lit utilizza dei modelli con tag, che richiedono poco boilerplate. Queste funzioni consentono di scrivere i nomi delle funzioni direttamente davanti ai template letterali, migliorando la leggibilità e la struttura del codice.
Un'importante caratteristica di Lit è il concetto di “aggiornamento istantaneo”. Ciò significa che vengono aggiornati solo gli elementi interattivi dell'interfaccia utente che sono effettivamente cambiati. A differenza della maggior parte degli altri framework JavaScript che gestiscono lo stato del browser in un albero dom virtuale, Lit aggiorna direttamente gli elementi dom dinamici, risparmiando il costoso confronto tra alberi dom virtuali e reali. Questo riduce la necessità di aggiornamenti estesi e migliora le prestazioni dell'applicazione. Per il rendering dell'HTML, Lit utilizza dei modelli con tag, che richiedono poco boilerplate. Queste funzioni consentono di scrivere i nomi delle funzioni direttamente davanti ai template letterali, migliorando la leggibilità e la struttura del codice.
Vantaggi
- Super leggero: occupa meno di 10 KB, rendendolo molto più piccolo di framework come React o Angular.
- Aggiornamenti DOM efficienti: usa template literals per aggiornare il DOM in modo ottimizzato e performante.
- Standard Web Components: funziona nativamente nei browser moderni e non richiede librerie aggiuntive.
- Compatibilità con altri framework: i componenti creati con LIT possono essere utilizzati in qualsiasi progetto, anche in React, Vue o Angular.
Svantaggi
- Community più piccola: anche se supportato da Google, non ha l’enorme ecosistema di React o Vue.
- Più codice boilerplate: rispetto a framework come React, richiede più configurazione iniziale.
- Meno strumenti e plugin: il suo ecosistema è ancora limitato rispetto ai framework più consolidati.
Stencil
Stencil è un compilatore per componenti web open source, creato dal team Ionic e rilasciato nel per la prima volta nel 2017. Si tratta di uno strumento molto potente e versatile, nato dall'esigenza di risolvere requisiti funzionali comuni per i componenti Ionic in modo generico, piuttosto che individualmente in ogni componente.
L'obiettivo, infatti, è quello di generare componenti web altamente ottimizzati e compatibili con qualsiasi framework o senza framework.
I componenti si scrivono nella sintassi di Stencil e lo si usa per compilare e generare componenti web conformi agli standard. Stencil è dotato di alcune funzionalità integrate, ad esempio per la reattività, il lazy loading e il data binding. Per utilizzarle, è sufficiente aggiungere alla libreria dei componenti un piccolo footprint code (circa 6kb) contenente tutte le funzionalità di Stencil.
L'obiettivo, infatti, è quello di generare componenti web altamente ottimizzati e compatibili con qualsiasi framework o senza framework.
I componenti si scrivono nella sintassi di Stencil e lo si usa per compilare e generare componenti web conformi agli standard. Stencil è dotato di alcune funzionalità integrate, ad esempio per la reattività, il lazy loading e il data binding. Per utilizzarle, è sufficiente aggiungere alla libreria dei componenti un piccolo footprint code (circa 6kb) contenente tutte le funzionalità di Stencil.
Vantaggi
- Componenti web riutilizzabili: i componenti creati con Stencil possono essere usati ovunque, in React, Angular, Vue o persino senza un framework.
- Performance elevate: Stencil usa il lazy loading e il pre-rendering per caricare i componenti solo quando necessario, riducendo il tempo di caricamento delle pagine.
- Supporto TypeScript e JSX: permette uno sviluppo più tipizzato e leggibile per chi ha esperienza con React.
- Ottimo per design system: è ideale per la creazione di librerie di componenti riutilizzabili a livello aziendale.
Svantaggi
Richiede una buona conoscenza dei componenti web: non è immediato per chi è abituato a framework tradizionali.
Meno plugin rispetto ad altri framework: essendo focalizzato sui componenti web, non offre un ecosistema di plugin ampio come React o Vue.
Comunità ristretta: rispetto a framework più famosi, Stencil ha una community meno vasta, il che può rendere più difficile trovare supporto.
Meno plugin rispetto ad altri framework: essendo focalizzato sui componenti web, non offre un ecosistema di plugin ampio come React o Vue.
Comunità ristretta: rispetto a framework più famosi, Stencil ha una community meno vasta, il che può rendere più difficile trovare supporto.
Conclusione
Nel mondo dello sviluppo web, dominato da framework come React, Angular e Vue, esistono alternative meno conosciute ma altrettanto interessanti. Stencil, HTMX e LIT offrono approcci diversi per migliorare le performance, la modularità e l'interattività delle applicazioni web, senza il peso di librerie più complesse.
Queste tecnologie dimostrano che non esiste un’unica strada nello sviluppo web: l'importante è scegliere lo strumento giusto in base alle esigenze del progetto. Se cerchi maggiore leggerezza, semplicità o modularità, esplorare alternative meno diffuse può rivelarsi una scelta interessante.
Queste tecnologie dimostrano che non esiste un’unica strada nello sviluppo web: l'importante è scegliere lo strumento giusto in base alle esigenze del progetto. Se cerchi maggiore leggerezza, semplicità o modularità, esplorare alternative meno diffuse può rivelarsi una scelta interessante.
.jpg)
