Guida completa a Svelte

Nello sviluppo di un'applicazione web, il backend e il frontend svolgono due ruoli distinti. Il backend gestisce la logica applicativa, le operazioni sui dati, l'autenticazione e le API attraverso cui gli altri sistemi possono comunicare con il server. Il frontend, invece, è la parte con cui l'utente interagisce direttamente: pagine, pulsanti, form, menu, tabelle e tutti gli elementi che compongono l'interfaccia.

JavaScript permette da tempo di realizzare interfacce dinamiche direttamente nel browser. Tuttavia, quando un'applicazione cresce, gestire manualmente gli elementi HTML, aggiornare i dati visualizzati e coordinare le interazioni può diventare complicato. Modificare un valore potrebbe richiedere aggiornamenti in più punti dell'interfaccia, mentre la gestione degli eventi e dello stato può rendere il codice difficile da mantenere.

Per affrontare questi problemi sono nati diversi framework frontend, progettati per organizzare il codice in componenti e semplificare la costruzione delle interfacce. Tra questi troviamo React, Angular, Vue e Svelte. Ognuno propone un approccio differente, ma tutti cercano di rendere più gestibile lo sviluppo di applicazioni web moderne.

In questa serie approfondirò Svelte, utilizzando la versione 5 e TypeScript. Partiremo dai concetti fondamentali, costruiremo componenti interattivi, gestiremo form e dati e, successivamente, collegheremo il frontend a un backend REST realizzato con Node.js ed Express. Solo dopo aver compreso le basi di Svelte introdurremo SvelteKit, il framework che permette di organizzare applicazioni web più complete.

Che cos'è Svelte

Svelte è un framework JavaScript open source per la realizzazione di interfacce utente. Permette di costruire componenti che combinano markup, logica e stili in un unico file, rendendo più semplice organizzare il codice e riutilizzare le parti dell'interfaccia.

Un componente può rappresentare un elemento molto semplice, come un pulsante, oppure una parte più articolata dell'applicazione, come una scheda prodotto, un modulo di registrazione o una tabella contenente dati provenienti da un'API. I componenti possono essere combinati per costruire pagine complete, mantenendo separate le responsabilità delle diverse parti.

Svelte si distingue per il modo in cui utilizza la compilazione. Come gli altri framework, trasforma parte del codice durante la build, ma genera JavaScript specifico per gestire gli aggiornamenti dei componenti. React, Vue e Angular si affidano invece maggiormente ai rispettivi runtime per gestire la reattività e il rendering nel browser, pur utilizzando anch'essi compilatori e ottimizzazioni.

Questo approccio permette di utilizzare una sintassi relativamente semplice, mantenendo il codice vicino alle tecnologie fondamentali del web: HTML, CSS e JavaScript. Non significa che Svelte elimini ogni complessità dello sviluppo frontend, ma offre strumenti per affrontarla in modo strutturato.

Il problema che Svelte risolve

Immaginiamo di dover realizzare una pagina che visualizza il numero di prodotti presenti in un carrello. Quando l'utente aggiunge un prodotto, il numero deve aumentare; quando lo rimuove, deve diminuire. Il totale visualizzato deve rimanere coerente con i dati dell'applicazione.

Utilizzando esclusivamente JavaScript tradizionale, possiamo certamente realizzare questa funzionalità. Dobbiamo però occuparci direttamente degli eventi, dei dati e degli aggiornamenti del DOM, cioè della struttura HTML rappresentata dal browser. Man mano che l'interfaccia cresce, diventa più facile introdurre incongruenze tra lo stato effettivo dei dati e ciò che viene mostrato all'utente.

Svelte permette di descrivere lo stato dell'applicazione e il modo in cui questo viene rappresentato nell'interfaccia. Quando i dati reattivi cambiano, il framework aggiorna le parti interessate senza richiedere che scriviamo manualmente tutte le operazioni sul DOM.

Il vantaggio diventa più evidente quando l'applicazione contiene numerosi componenti, form, filtri, elenchi e dati provenienti da servizi esterni. Possiamo concentrarci sulla logica dell'interfaccia, lasciando al framework il compito di gestire gli aggiornamenti necessari.

Come funziona il modello a componenti

In Svelte l'interfaccia viene suddivisa in componenti indipendenti. Ogni componente può avere uno scopo preciso e può essere riutilizzato in più punti dell'applicazione.

Per esempio, in un'applicazione dedicata alla gestione dei prodotti potremmo realizzare un componente per visualizzare una singola scheda prodotto, uno per mostrare l'elenco dei prodotti e un altro per il modulo di inserimento. Una pagina principale potrebbe utilizzare tutti questi componenti senza dover contenere direttamente tutta la logica.

Questa organizzazione migliora la leggibilità e facilita la manutenzione. Se dobbiamo modificare l'aspetto di tutte le schede prodotto, possiamo intervenire nel componente dedicato invece di cercare e aggiornare manualmente ogni occorrenza nella pagina.

I componenti possono ricevere dati da altri componenti attraverso le props e possono comunicare le interazioni attraverso callback e altri meccanismi previsti dal framework. Impareremo a gestire questi aspetti dopo aver compreso la sintassi di base.

La reattività in Svelte 5

Uno dei concetti fondamentali di Svelte è la reattività. Un'interfaccia reattiva reagisce ai cambiamenti dei dati, aggiornando le informazioni visualizzate quando necessario.

Svelte 5 utilizza un sistema chiamato Runes, che introduce costrutti specifici per dichiarare e gestire la reattività. Tra quelli più importanti troviamo $state, $derived e $effect.

$state permette di dichiarare uno stato reattivo. Per esempio, possiamo utilizzarlo per conservare il valore di un contatore o il testo inserito in un campo di ricerca. Quando il valore cambia, Svelte può aggiornare gli elementi dell'interfaccia che dipendono da esso.

$derived serve a ottenere un valore calcolato a partire da altri dati reattivi. Se abbiamo il prezzo di un prodotto e la quantità acquistata, possiamo calcolare il totale senza dover aggiornare manualmente una seconda variabile ogni volta che cambia uno dei valori iniziali.

$effect permette invece di eseguire effetti collaterali in risposta alle dipendenze reattive utilizzate al suo interno. È uno strumento utile in situazioni specifiche, ma non deve essere utilizzato automaticamente per ogni calcolo: per i valori derivabili dallo stato è normalmente preferibile $derived.

Queste funzionalità saranno affrontate con esempi pratici. L'obiettivo è comprendere non soltanto la sintassi delle Runes, ma anche quando utilizzare ciascuna di esse per mantenere il codice semplice e prevedibile.

Svelte e TypeScript

TypeScript è un linguaggio che estende JavaScript con un sistema di tipi statici. Permette di dichiarare il tipo dei dati, individuare diversi errori durante lo sviluppo e rendere più comprensibile il codice, soprattutto nei progetti articolati.

Svelte può essere utilizzato con JavaScript oppure con TypeScript. In questa serie sceglieremo TypeScript fin dall'inizio, così potremo mantenere coerenza con il backend sviluppato nei tutorial precedenti.

Per esempio, TypeScript ci permette di definire la struttura di un prodotto, specificando che contiene un identificativo, un nome e un prezzo. Quando il frontend riceverà i dati da un'API, queste definizioni aiuteranno a documentare la struttura attesa e a individuare diversi errori di programmazione.

È importante ricordare che i tipi TypeScript non verificano automaticamente i dati ricevuti a runtime. Una risposta HTTP può contenere valori inattesi, quindi i dati provenienti dall'esterno devono essere validati quando la sicurezza o la correttezza dell'applicazione lo richiedono.

Il ruolo di Vite nello sviluppo con Svelte

Per iniziare a lavorare con Svelte utilizzeremo Vite, uno strumento che offre un ambiente di sviluppo e una procedura di build per le applicazioni frontend.

Vite permette di creare un progetto, avviare un server di sviluppo e vedere rapidamente nel browser le modifiche apportate ai file. Si occupa inoltre di elaborare i moduli e di preparare una versione ottimizzata dell'applicazione per la distribuzione.

Svelte e Vite non sono la stessa cosa. Svelte è il framework con cui scriviamo i componenti, mentre Vite gestisce gli strumenti necessari per sviluppare e compilare l'applicazione. La combinazione permette di iniziare con una struttura essenziale senza dover configurare manualmente ogni parte dell'ambiente.

Utilizzeremo inizialmente un progetto Svelte con Vite, evitando di introdurre subito ulteriori strumenti. In questo modo potremo imparare i fondamenti del framework prima di affrontare le funzionalità aggiuntive di SvelteKit.

Svelte e SvelteKit: quali sono le differenze

Svelte permette di costruire i componenti dell'interfaccia. Per molte applicazioni frontend possiamo utilizzare Svelte insieme a Vite e realizzare un'applicazione che gira principalmente nel browser.

SvelteKit è invece un framework costruito attorno a Svelte. Aggiunge funzionalità per organizzare un'applicazione web completa, tra cui routing basato sui file, caricamento dei dati, rendering lato server e gestione di richieste attraverso endpoint server.

Con SvelteKit possiamo organizzare le pagine in directory e file dedicati, anziché dover configurare manualmente un sistema di routing separato. Possiamo inoltre scegliere dove eseguire determinate operazioni, distinguendo il codice destinato al browser da quello che deve essere eseguito sul server.

Nella nostra serie non partiremo immediatamente da SvelteKit. Prima studieremo Svelte con Vite, così da capire i componenti, la reattività, le props, gli eventi e la gestione dei dati. Successivamente introdurremo SvelteKit e vedremo quali problemi aggiuntivi risolve e come integrare le sue funzionalità nel progetto.

Come collegheremo Svelte al backend Node.js

Un frontend moderno non deve necessariamente occuparsi direttamente dell'accesso al database. Nel nostro percorso manterremo il backend Express già realizzato, che espone API REST per la gestione dei prodotti e per l'autenticazione degli utenti.

Svelte potrà comunicare con queste API attraverso richieste HTTP, utilizzando strumenti come fetch. Il backend continuerà a gestire le operazioni MongoDB, la verifica delle credenziali e i permessi di accesso, mentre il frontend si occuperà di mostrare i dati e raccogliere le interazioni dell'utente.

Per esempio, una pagina prodotti potrà inviare una richiesta per recuperare l'elenco degli articoli, visualizzare i risultati e offrire un modulo per crearne uno nuovo. Quando l'utente invierà il modulo, il frontend trasmetterà i dati al backend e mostrerà l'esito dell'operazione.

Questa separazione permette di mantenere responsabilità chiare. Il frontend non deve contenere le credenziali di MongoDB e il backend non deve conoscere i dettagli grafici dell'interfaccia. Le due parti comunicano attraverso un contratto HTTP definito dalle API.

Quando collegheremo i due progetti, affronteremo anche la gestione degli errori, le richieste autenticate e le eventuali configurazioni necessarie per consentire al browser di comunicare con il server.