Come forse saprai, negli ultimi anni sono emersi rapidamente numerosi framework JavaScript. Ma questo porta sul tavolo un paradigma di rendering completamente nuovo. Non è altro che Qwik.

Qwik è come sembra, super veloce. Afferma il framework front-end più veloce in questo momento. Offre tempi di caricamento della pagina rapidissimi, indipendentemente dalle dimensioni e dalla complessità del tuo sito. È considerata una complessità O(1) in quanto può ottenere prestazioni costanti su larga scala.

La versione stabile di Qwik 1.0 è stata rilasciata molto recentemente. È un progetto open-source con licenza MIT. Puoi esplorarlo sul loro sito Web ufficiale e sul repository GitHub pubblico .

Quindi questo articolo ti guida attraverso questo meraviglioso framework, le sue caratteristiche e la sua strategia sotto il cofano. Immergiamoci.

Prima di passare a Qwik, dobbiamo prima capire come avviene il rendering nei framework JavaScript. Sono disponibili due opzioni di rendering: rendering lato client e rendering lato server.

Rendering lato client

Come suggerisce il nome, il browser esegue il rendering di tutti i dati nel file HTML sul lato client nel rendering lato client.

Quando un utente visita un sito Web, il browser invia richieste al server per recuperare file HTML, CSS e JS. Dopo aver ricevuto questi file, il browser li esegue e visualizza il sito web. In modo che gli utenti possano vedere e interagire con il contenuto.

Ciò comporta l'esecuzione di tutta la logica, il recupero dei dati, l'instradamento e la creazione di modelli sul lato client. Gli utenti di solito vedono una pagina vuota fino a quando non si verifica l'intero processo.

Lo svantaggio significativo di questo approccio è che man mano che un'applicazione cresce, aumenta il tempo necessario per eseguire il rendering della pagina iniziale.

Rendering lato server

Nel rendering lato server, il server invia l'HTML sottoposto a rendering come risposta.

Anziché dedicare tempo all'esecuzione di file JavaScript come nel rendering lato client, il browser può visualizzare immediatamente il sito Web utilizzando questa risposta.

Ciò accelera notevolmente il tempo del rendering iniziale. Pertanto, gli utenti possono visualizzare rapidamente il contenuto del sito Web senza fissare uno schermo vuoto.

Tuttavia, la pagina è solo visualizzabile e non interattiva finché i file JavaScript non vengono caricati nel DOM. Dopo che il JS è stato caricato, la pagina sarà interagibile con l'utente.

Il processo di idratazione

Come abbiamo discusso in precedenza, la pagina che il browser ci mostra inizialmente non è ancora interagibile. Per interagire con la pagina web, JavaScript deve essere caricato nel DOM. Questo processo è chiamato idratazione.

Ciò comporta il collegamento di listener di eventi, il ripristino dello stato dell'applicazione e la ricostruzione dell'intero albero dei componenti da zero.

Questa tecnica è utilizzata oggi da quasi tutti i meta framework come Next.js, Nuxt.js, Angular ecc. (Tranne Astro: utilizza l'idratazione parziale)

Lo svantaggio di questo processo di idratazione è che sebbene la pagina venga visualizzata sullo schermo dell'utente, non è interattiva fino a quando il codice non viene scaricato ed eseguito di nuovo.

Quando è necessario eseguire una quantità significativa di codice JavaScript, ciò può rallentare l'applicazione Web.

La maggior parte di questi framework JavaScript scarica ed esegue tutto il codice contemporaneamente. Di conseguenza, il tempo di caricamento (tempo di interazione) diventa più lento e segue una progressione lineare O(n).

Quindi i framework basati su questa tecnica osserveranno un ritardo nell'interazione con la pagina web.

Questo è esattamente il problema risolto da Qwik.

Perché Qwik è così veloce?

Il motivo principale per cui Qwik è super veloce, ha rimosso questo processo di idratazione.

Porta sul tavolo un paradigma di rendering completamente nuovo chiamato Resumability che elimina totalmente la necessità di idratazione. (Zero idratazione)

Che cos'è la ripristinabilità?

La ripresabilità si riferisce alla possibilità di sospendere l'esecuzione sul server e riprenderla sul client senza dover riprodurre o scaricare tutta la logica dell'applicazione.

L'app Qwik può essere completamente serializzata come HTML. In qualsiasi momento, puoi premere un'azione e acquisire tutti i dati e le chiusure nell'applicazione e rappresentarli tutti come una stringa HTML.

Quindi il browser può riprendere da dove il server si era interrotto senza dover eseguire alcun JavaScript.

Quindi, ci sarà un enorme intervallo di tempo tra Qwik e altri framework.

Discutiamo come questo è stato possibile in dettaglio con le sue strategie.

Strategie di Qwik

Qwik raggiunge questo obiettivo attraverso due strategie principali:

1. Ritarda l'esecuzione e il download di JavaScript il più a lungo possibile. (tranne il codice di inizio)
2. Serializza lo stato di esecuzione dell'applicazione e del framework sul server e riprendilo sul client. (Nota: Qwik serializza solo i dati necessari per la pagina corrente.)

In Qwik, tutto è caricabile in modalità lazy:

• Componente sul rendering (blocco di inizializzazione e blocco di rendering)
• Componente sull'orologio (effetti collaterali, scaricato solo se gli input cambiano)
• Ascoltatori (scaricati solo su interazione)
• Stili (scaricati solo se il server non li ha già forniti)

Procedura dettagliata del codice

Diamo un'occhiata ad alcuni esempi di codice per una migliore comprensione del caricamento lento e della serializzazione.

Ho creato un componente di base che ha solo un pulsante che, se cliccato, avviserà il mio nome. Non devi preoccuparti della sintassi in Qwik poiché è molto simile a React.

Conosci React? Conosci Qwik.

— Documenti ufficiali

// the `$` suffix for `component` indicates that the component should be
// lazy-loaded.
const Test = component$(() => {
  const store = useStore({ name: "Yasas"});

  // the `$` suffix for `onClick` indicates that the implementation for
  // the handler should be lazy-loaded.
  return <button onClick$={() => alert(`Hi! ${store.name}`)}>Click Here</button>;
});

Noterai una cosa speciale qui. SÌ! Il simbolo del dollaro.

Cos'è questo $?

Qwik ha un ottimizzatore. È simile a un compilatore. Questo simbolo del dollaro indica all'ottimizzatore che la funzione che lo segue deve essere caricata in modo pigro.

Ciò significa che JS non verrà caricato fino a quando non faremo clic sul pulsante. Questo pacchetto JS lazy-loaded contiene il codice che vogliamo eseguire.

Inoltre, questo ha accesso all'ambiente lessicale per aggiornare lo stato che potrebbe essere condiviso da altri componenti che provengono da un altro bundle a caricamento lento.

Qwik gestisce tutta quella suddivisione del codice e il caricamento pigro per noi fuori dagli schemi. Questo è molto vantaggioso perché come sviluppatori non abbiamo nemmeno bisogno di pensarci. È il comportamento predefinito di Qwik.

Cosa succede sotto il cofano?

Ora sei consapevole della ripresabilità. Ma come funziona davvero? Scaviamo più a fondo in esso.

Se vai alla scheda HTML dell'esempio precedente, vedrai molti q due punti. (Q:)

Qwik sta inserendo informazioni aggiuntive nell'HTML. È noto come serializzazione delle informazioni nell'HTML. In modo che possa prendere decisioni in seguito.

Qwik serializza il listener di eventi in DOM nel seguente formato:

<button on:click="./chunk.js#handler_symbol">Click Here</button>

Questo viene fatto da Qwik Optimizer. Come ho descritto in precedenza, Qwik Optimizer è in un certo senso un compilatore.

Sta prendendo il codice che ho scritto (quei file JS) esaminandolo e creando nuovi file basati sul codice. Quindi dove è stato lasciato il nostro codice, lo sostituisce con un riferimento a quel nuovo file.

Questo ottimizzatore è stato scritto in Rust e puoi vederlo qui . Controlla il parse.rsfile nella cartella core src. Indica come avviene l'analisi.

Quindi abbiamo il Qwik Loader .

Dopo che abbiamo tutti questi file separati che sono pronti per essere caricati in modalità lazy, dobbiamo essere in grado di rispondere agli eventi che fa l'utente e quindi caricare in modo lazy quei file.

Questo è ciò che fa Qwik Loader.

Sta aggiungendo listener di eventi globali e cerca eventi utente ovunque nel documento.

Una volta attivato l'evento on-click, importa il relativo file chunk.js.

Successivamente, avrà il modulo con la parte del nome del simbolo. (#handler_symbol) È pigro caricato in un file separato. Quindi il caricatore porterà quel file e lo eseguirà.

Gli stati/valori saranno vincolati secondo i qwik/jsonrif. (vedi l'allegato sopra)

Ecco come è stata eseguita la funzione evento al clic. Puoi trovare questo comportamento del caricatore nel repository GitHub qui .

Installa ed esegui Qwik in ambiente locale

Installiamo questa piccola bestia sulla nostra macchina.

Prerequisiti: è necessario che sia installato Node.js ≥v16.8.

Puoi utilizzare l'interfaccia a riga di comando di Qwik per avviare facilmente un'applicazione Qwik.

npm create qwik@latest

Bene. Costruiamo questa cosa usandonpm run build

Ora noterai una tonnellata di minuscoli blocchi di meno di un kilobyte ciascuno invece di un singolo enorme pacchetto. Questa è la procedura di caricamento lento. Ciò fornisce a Qwik la possibilità di ridimensionare all'infinito quanto più JavaScript possibile.

Bene! Ora puoi avviare l'app utilizzando npm run devIl sito Web predefinito è disponibile all'indirizzohttp://localhost:5173/

Vediamo come sta caricando il bundle JS dell'evento on-click nel pulsante Time to celebrate usando inspect.

Se apriamo la scheda rete troveremo solo i bundle JS iniziali. Dopo aver fatto clic sul pulsante, verrà caricato il pacchetto JS relativo al pulsante.

Inoltre, Qwik è intuitivo per gli sviluppatori in quanto possiamo premere Alt e fare clic ovunque per aprirne il codice dal tuo IDE preferito.

Bonus: se vai su http://localhost:5173/demo/flower?pride=truee vedrai un fiore colorato rotante.

Qwik ti consente di aggiungere integrazioni per semplificare la connessione ai tuoi strumenti e servizi come React, Tailwind CSS, ecc. utilizzando npm run qwik addil comando. Le integrazioni supportate sono elencate nei loro documenti ufficiali qui .

Qwik offre anche un eccellente tutorial interattivo per aiutarti a familiarizzare con i loro concetti. Spero che tu possa usarlo per imparare rapidamente Qwik.

Risorse

• Web ufficiale —https://qwik.builder.io
• Qwik GitHub —https://github.com/BuilderIO/qwik
• Documenti —https://qwik.builder.io/docs/overview/
• Demo di StackBlitz —https://stackblitz.com/edit/qwik-todo-demo

Il nuovo approccio innovativo di Qwik (Resumability) offre una nuova via per i framework JavaScript front-end.

Sicuramente questo sarà un quadro rivoluzionario per il mondo. Sarà interessante vedere dove andranno le cose da qui.

Spero che questo articolo ti abbia aiutato a comprendere i principi fondamentali del framework Qwik. Non vedo l'ora di portare gli aggiornamenti di Qwik anche nei prossimi articoli.

Grazie per aver letto, lascia un commento su Qwik. Buona codifica!

Codifica di livello superiore

Grazie per far parte della nostra comunità! Prima che tu vada:

• Batti le mani per la storia e segui l'autore
• Visualizza altri contenuti nella pubblicazione Level Up Coding
• Corso di colloquio di codifica gratuito ⇒ Visualizza il corso
• Seguici: Twitter | Linkedin | Notiziario