Svelte, Solid e Qwik: l'ascesa dei nuovi framework front-end

Indice

Svelte
SolidJS
Qwik
Conclusione

framework frontend

Lo sviluppo front-end è un campo in costante evoluzione che è stato dominato da Vue, Angular e React. Eppure, negli ultimi anni vi è stato un vero e proprio boom di nuovi framework. Se osserviamo l’andamento dal sito State of JavaScript, possiamo notare come l’interesse per Vue, Angular e React è stato in costante calo negli ultimi anni. Questo trend viene tuttavia controbilanciato dall’ascesa di nuovi framework che mirano a migliorare la velocità, le prestazioni e la facilità d'uso delle applicazioni web.

Stato framework 2022 per interesse

In questo articolo andiamo ad esplorare tre framework recenti e sotto i riflettori, andandone a sviscerare le potenzialità. I framework in questione sono Svelte, Solid e Qwik.

Svelte

Svelte è un framework JavaScript progettato per creare applicazioni funzionali, facili da sviluppare e performanti. La prima versione è stata pubblicata su GitHub alla fine del 2016. L'autore è Richard Harris, il cui lavoro quotidiano è creare grafica interattiva e Svelte è nato proprio in questo contesto. Harris desiderava un framework per l'interfaccia utente veloce, semplice da imparare e capace di occupare il minor numero possibile di kilobyte nel browser consentendo anche animazioni fluide. Poiché nessuno dei framework esistenti soddisfaceva i suoi requisiti, Harris ha sviluppato Svelte. La versione 1 soddisfaceva già molto bene i requisiti di velocità e leggerezza, ma è stato solo con la versione 3, rilasciata nell'aprile 2019, che è stata raggiunta la svolta in termini di semplicità. In seguito Svelte ha guadagnato molta popolarità.

Svelte è speciale perché non è un framework classico, ma un compilatore. Framework come Angular, Vue e React forniscono le loro funzioni sotto forma di moduli aggiuntivi. Gli sviluppatori devono includerli in aggiunta al codice sorgente del progetto. Questo aumenta enormemente le dimensioni del file dell'applicazione, anche se l'applicazione successiva è semplice e piccola. Con Svelte, l'obiettivo è invece quello di mantenere piccole le dimensioni del file dell'applicazione. A questo scopo, il framework traduce i componenti con un compilatore nel cosiddetto Vanilla-JavaScript. Ciò significa che il codice può essere eseguito senza librerie o moduli aggiuntivi.

Con i framework classici, gli sviluppatori devono creare componenti e modelli che funzionano solo in combinazione con i moduli aggiuntivi del framework. I moduli possono elaborare i componenti e i modelli e creare automaticamente l'interfaccia utente a partire da essi. Il rispettivo framework solleva gli sviluppatori da tutto il lavoro sul Document Object Model (DOM) del browser. Se all'interno dell'applicazione cambiano dei dati che dovrebbero causare una modifica dell'interfaccia utente visualizzata, il framework lo rileva automaticamente e aggiorna gli elementi visualizzati. Spesso vengono eseguiti algoritmi complessi per confrontare i dati e apportare le modifiche.

Vantaggi

È facile da utilizzare anche per sviluppatori con poca esperienza di JS.
Il rendering è molto veloce grazie al dom rendering tramite programmazione reattiva ed è supportato sia lato client che lato server.
Tempi di sviluppo ridotti perché Svelte è basato su componenti consentendo di creare UI con componenti componibili e riutilizzabili.
È multipiattaforma e può essere utilizzato per sviluppare applicazioni web, mobili non native e desktop.

Svantaggi

Essendo ancora molto giovane, il framework ha poca maturità nel mercato.
Il numero di funzioni è ancora limitato quindi bisogna scrivere molto codice o utilizzare strumenti di terze parti per progetti di sviluppo più complessi.
La comunità e documentazione per Svelte è ancora in fase di sviluppo
Non supporta TypeScript.

SolidJS

SolidJS è un framework JavaScript relativamente nuovo di Ryan Carniato, un ingegnere eBay, che vuole aiutare a sviluppare interfacce ad alte prestazioni senza perdere il comfort degli altri framework. Il framework è progettato con un forte focus sulla modularità e scalabilità, consentendo agli sviluppatori di creare applicazioni web robuste e flessibili.

Anche se SolidJS presenta delle somiglianze con React, i due framework utilizzano diverse tecniche per aggiornare la UI in modo efficiente. In particolare, React utilizza una funzione chiamata "Virtual DOM" per gestire gli aggiornamenti della UI in modo efficiente. SolidJS invece utilizza un'altra tecnica chiamata "reconciliation algorithm". Entrambe le tecniche aiutano a ridurre il lavoro necessario per aggiornare la UI e migliorare le prestazioni delle applicazioni web.

Vantaggi

Il rischio di errori è molto basso perché SolidJS sfrutta molte delle caratteristiche ergonomiche di React
Il framework è molto leggero, è di soli 6,4kb con un runtime velocissimo - solo una frazione più lento di JS vanilla e migliore di Svelte o Preact.
Solid supporta Typescript, Hooks, funzioni simili a Suspense, SSR, SSG e può essere facilmente integrato con strumenti moderni.
Tutte le parti di Solid sono riutilizzabili in modo indipendente, il che rende possibile creare una varietà di progetti di tipo diverso.

Svantaggi

Ci sono poche librerie, strumenti e risorse Solid di terze parti perché il framework è molto nuovo.
In Solid, tutte le interazioni di rendering e DOM sono un effetto collaterale del sistema reattivo e quindi il framework non tiene traccia del DOM in modo accessibile al di fuori dei riferimenti dell'utente.
Solid fa meno differenze di qualsiasi altra libreria in circolazione, e questo è uno dei motivi per cui è così potente. Il rovescio della medaglia è che nei pochi casi in cui il diffing è effettivamente utile, come l'Hot Module Replacement (HMR), Solid può rendere più difficile lavorare con esso.
Il debug è complesso perché Solid è dichiarativo e quindi gli errori che non si verificano in relazione alle operazioni del DOM possono essere difficili da trovare.

Qwik

Qwik è un nuovo framework open source rilasciato per la prima volta nel 2020 da un team di sviluppatori Google per sviluppare applicazioni web in JavaScript e TypeScript. Il framework offre un approccio che si basa sui componenti, in cui ogni componente dell’applicazione viene sviluppato come un insieme di file HTML, CSS e JavaScript.

Una peculiarità di Qwik è dato dalla gestione automatica dello stato dell’applicazione, il che semplifica la gestione di informazioni e l’aggiornamento dell’interfaccia utente. Grazie anche alla possibilità di eseguire il rendering lato server, Qwik migliora notevolmente la velocità di caricamento e l’esperienza utente.

Pur essendo relativamente nuovo, ha guadagnato notevole popolarità sia perché è stato progettato proprio per essere facile da imparare e usare, sia perché la sua architettura modulare consente di integrare facilmente librerie esterne ed effettuare personalizzazioni.

Vantaggi

Facile da imparare e utilizzare, soprattutto per chi ha già esperienza con HTML, CSS e JavaScript.
Anche Qwik adotta un approccio basato sui componenti consentendo così di creare applicazioni web modulari e riutilizzabili.
Qwik offre la possibilità di memorizzare in cache i dati delle pagine, migliorando la velocità di caricamento e riducendo il carico sul server.
Rendering lato server: Qwik offre anche la possibilità di eseguire rendering lato server, che consente di migliorare la velocità di caricamento della pagina e l'esperienza utente.

Svantaggi

Qwik è stato progettato per applicazioni web di piccole e medie dimensioni e potrebbe presentare una serie di limitazioni per applicazioni di grandi dimensioni o complesse.
Assenza di supporto per una serie di funzionalità avanzate.
Essendo relativamente nuovo, la comunità di Qwik è ancora in crescita.

Conclusione

Solid, Svelte e Qwik sono framework relativamente nuovi che stanno guadagnando popolarità nella comunità di sviluppo front-end. Pur essendo tutti promettenti, la scelta del framework giusto dipende sempre dalle proprie esigenze e preferenze.

Svelte propone un'esperienza di sviluppo veloce e una buona performance, mentre Solid si concentra sulla scalabilità e la modularità. Se invece l'interesse riguarda la progettazione di applicazioni web semplici è veloce Qwik può rivelarsi una soluzione interessante. Come abbiamo visto, ognuno di questi framework ha i suoi punti di forza e i suoi limiti, ma tutti e tre rappresentano delle valide opzioni per gli sviluppatori che vogliono creare applicazioni web moderne ed efficaci.