Introduzione a SvelteKit 1.0: il framework full stack per Svelte

Jun 29, 2023

Di Matthew Tyson

Architetto software, InfoWorld |

Come annunciato di recente, SvelteKit è arrivato al tanto atteso traguardo 1.0, dopo una lunga beta. SvelteKit 1.0 offre un framework applicativo completamente realizzato per la creazione di applicazioni JavaScript full-stack con front-end Svelte. Diamo un'occhiata.

Svelte è un framework reattivo front-end, paragonabile a React o Vue ad alto livello, ma con una propria prospettiva sulle cose. SvelteKit è il framework applicativo full-stack per Svelte, sulla falsariga di Next o Nuxt, ma ancora una volta con le proprie convenzioni.

La natura di un framework applicativo full-stack è che deve essere in grado di unire il front-end e il back-end dell'applicazione sotto un unico ombrello. Un framework full-stack deve rispondere a queste domande:

Al centro di ogni framework applicativo c'è il motore di routing, che associa il codice che genera le pagine agli URL nel browser. La maggior parte dei framework JavaScript come SvelteKit si sono adattati al layout generale utilizzato da Next.js, in cui i file e le directory sono mappati sul percorso URL.

La directory root di SvelteKit è /src/routes (per impostazione predefinita). Quindi /src/routes corrisponde all'URL root, ad esempio localhost:5173/ nel browser. Le sottodirectory vengono mappate al percorso dell'URL, quindi /src/routes/foo/bar diventa localhost:5173/foo/bar.

Diverse convenzioni di file all'interno delle directory definiscono le pagine e gli endpoint. Questi tipi di file iniziano con un segno più (+), che indica che hanno un significato speciale per il framework. (Tutti gli altri file verranno ignorati, quindi puoi inserire file di supporto nelle stesse directory.)

Ogni pagina è un componente Svelte, definito in un file +page.svelte. Un file su /src/routes/foo/bar/+page.svelte diventa la pagina web su localhost:5173/foo/bar, definita dal componente Svelte creato in quel file. (Fornendo la pagina predefinita sul percorso, questo file agisce in un ruolo simile a index.jsx in altri framework.) In altre parole, +page.svelte è solo un componente Svelte standard che segue la normale sintassi Svelte.

Sebbene +page.svelte sia solo un componente Svelte front-end, può fare affidamento su altri file speciali per svolgere il suo lavoro. SvelteKit ha anche alcune utili ottimizzazioni nella manica. Per impostazione predefinita, SvelteKit eseguirà il rendering lato server +page.svelte. Utilizza il file fratello +page.js (con estensione .js) per controllare questo processo. I due componenti, +page.svelte e +page.js lavorano insieme per definire il comportamento full-stack della pagina.

Il componente +page.js ci consente di definire una funzione di caricamento in grado di eseguire il lavoro iniziale di cui avrà bisogno il componente della pagina, oltre a controllare il modo in cui il framework tratta la pagina per quanto riguarda il comportamento di rendering. Questo componente supporta tre esportazioni const:

Puoi saperne di più sul rendering della pagina con queste opzioni dalla documentazione di SvelteKit. Qui ci concentreremo sulla funzione di caricamento esportata da +page.js. Per impostazione predefinita, viene eseguito insieme a +page.svelte sia sul server che sul client. La funzione di caricamento comunica con il componente Svelte con una variabile di dati. Qualunque cosa restituisca la funzione di esportazione di +page.js, verrà impostata sulla variabile dati di esportazione di +page.svelte.

Poiché la funzione di caricamento +page.js viene eseguita sia sul client che sul server, deve contenere funzionalità che funzioneranno sia nel browser che negli ambienti back-end. Quando hai bisogno di una funzione che venga eseguita solo sul server, puoi utilizzare +page.server.js. La funzione di caricamento viene eseguita solo sul back-end. Quando il rendering lato server (SSR) è sotto controllo, i dati possono essere integrati nel rendering; quando il rendering lato client è attivo, il codice verrà eseguito sul server e verrà serializzato e trasmesso. (Vedi la documentazione di SvelteKit per saperne di più sulla scelta tra una funzione di caricamento "universale" e una funzione di caricamento solo lato server.)

Oltre al caricamento, +page.server.js può definire una funzione di azioni per gestire i dati del modulo. (Questo è simile al modo in cui Remix crea i moduli e consente ai moduli di funzionare quando JavaScript non è disponibile.)