Cos’è Qwik?

Qwik.js è un nuovo framework progettato per creare applicazioni web veloci e leggere, con un'attenzione particolare alla velocità di caricamento e dell'interattività.
Il framework mira a risolvere i problemi di prestazioni e di esperienza utente spesso associati alle applicazioni web complesse, specialmente quando si tratta di velocità di caricamento iniziale, grazie al suo approccio innovativo, alla suddivisione del codice, al lazy loading e al rendering dell’applicazione.

Le principali caratteristiche che distinguono Qwik dai framework più “tradizionali”, come React o Vue, sono il Lazy Executing ed il processo di Resumability.
Grazie a questo nuovo metodo le applicazioni saranno estremamente performanti, soprattutto da un punto di vista mobile.

Resumability vs Hydration

Come abbiamo appena detto Qwik introduce il concetto di Resumability, ma di cosa si tratta?
Si tratta di un nuovo metodo che va a sostituire quello utilizzato di norma da tutti gli altri framework ovvero l’Hydration (idratazione), perciò saltando il processo di idratazione le applicazioni vengono caricate molto velocemente.

Hydration

Quando si carica una pagina web, i framework moderni spesso eseguono una fase iniziale di rendering lato server. Questo significa che una parte dell'interfaccia utente viene pre-renderizzata sul server e inviata al browser come HTML statico.
Poiché l'HTML è pre-renderizzato sul server si ha una rapida costruzione del template, però c’è un periodo di tempo in cui la pagina non sarà completamente caricata e interattiva finché tutto il JavaScript non sarà scaricato ed eseguito, questo processo si chiama Hydration.

In sintesi l'Hydration è la fase che comporta il completamento dell'HTML pre-renderizzato con la logica fornita dai componenti JavaScript, quindi il DOM (Document Object Model) generato dal lato client viene “idratato” e diventa a tutti gli effetti una pagina interattiva.

Resumability

Il framework Qwik invece fa sì che il server non mandi al browser un template HTML statico ma bensì una pagina con del codice serializzato (serialized) al suo interno.
Il codice serializzato contiene informazioni extra come per esempio Listeners, Component Tree e Application State.
Questo significa che Qwik sospende l’esecuzione sul server e la riprende lato client senza dover scaricare e riprodurre tutta la logica (JavaScript) dell’applicazione.
Il JS verrà scaricato solo al momento dell’interazione con i singoli componenti presenti nella pagina, quindi la quantità di codice scaricato sul client sarà proporzionale alla complessità dell'interazione dell'utente. Per questo motivo le applicazioni non si idratano ma riprendono (resume) da dove si erano interrotte server-side.

Esempio di come appare il codice serializzato ispezionando la pagina:

Controllando la sezione Network si può notare che nessun codice JavaScript è stato scaricato al caricamento della pagina e vedere che effettivamente ogni pezzetto viene scaricato nel momento in cui interagiamo con esso.

Lazy Executing

Si tratta dell’altro aspetto fondamentale alla base di Qwik, strettamente collegato al precedente processo di Resumability.
Grazie alla serializzazione delle informazioni sulla pagina, non è necessario scaricare l'intero codice JavaScript all'inizio, invece, verrà scaricato solo il codice relativo all'interazione dell'utente. Questo significa che l'esecuzione del codice viene posticipata fino al momento in cui l'utente compie un clic o un'altra interazione con un componente. Questo procedimento è chiamato "Lazy Execution" (Esecuzione Ritardata).

Un aspetto rilevante è che il download del JS non avviene completamente al momento dell'interazione. Qwik sfrutta le informazioni generate durante il rendering lato server per avviare la precompilazione della cache, includendo solo i segmenti di codice interattivo presenti sulla pagina, in modo da averlo già memorizzato nella cache quando serve.

Optimizer

Per effettuare il Lazy Executing viene utilizzato un trasformatore di codice chiamato Optimizer.
Questo è scritto in Rust e svolge un ruolo cruciale nell'ottimizzazione del codice suddividendolo in blocchi.
In poche parole cerca nel codice il simbolo del dollaro $ e applica una trasformazione che estrae l'espressione che segue il simbolo stesso e la trasforma in un blocco importabile e caricabile in modo ritardato (lazy-loading). Questa metodologia consente ai componenti di Qwik di essere automaticamente suddivisi in blocchi lazy-loaded. Di conseguenza, ogni blocco può essere caricato indipendentemente dagli altri.

Grazie all'Optimizer, non è più necessario che gli sviluppatori vadano a creare manualmente componenti lazy-loaded, poiché quelli forniti da Qwik lo saranno già di default.

Qwik City

Si tratta del meta-framework di Qwik, per fare un esempio è quello che Next è per React e quello che Nuxt è per Vue.
Qwik City contiene l'API per supportare i componenti con funzionalità comuni incentrate sul server (routing, layouts, endpoint, middleware ecc.).

Cos’è un meta-framework?

Un "meta-framework" è un termine che si riferisce a un tipo di framework che fornisce una struttura o un insieme di strumenti (moduli e librerie) per la creazione di framework più specifici o personalizzati.
Questo tipo di meta-framework potrebbe offrire i blocchi di base per gestire il routing, l'interazione con il database, la gestione delle autenticazioni e altro ancora.
In sostanza offre un livello di astrazione superiore rispetto ai framework tradizionali e consente agli sviluppatori di creare framework adattabili alle esigenze di uno specifico progetto.

Conclusioni

In definitiva, Qwik sembrerebbe rappresentare un passo avanti significativo nell'evoluzione dei framework JavaScript e potrebbe essere uno dei prossimi filoni di sviluppo di applicazioni web, promettendo di offrire applicazioni più veloci, efficienti e reattive.

Il suo approccio innovativo va tenuto d’occhio facendo test e verificando se, tempi alla mano, sarà in grado di mantenere ciò che promette in confronto ai suoi diretti contendenti.Se confermerà nel tempo queste promesse e che già in parte sta dimostrando, non potrà certamente essere ignorato nel panorama dello sviluppo web.