Introduzione a Svelte

Cos’è Svelte

Svelte è un framework per la creazione di interfacce utente che adotta un approccio radicalmente diverso rispetto a React, Vue o Angular. Invece di eseguire il grosso del lavoro nel browser utilizzando un Virtual DOM, Svelte sposta quel lavoro in fase di compilazione: il compilatore trasforma i componenti .svelte in codice JavaScript vanilla altamente ottimizzato che aggiorna il DOM in modo chirurgico.

Il risultato è un’applicazione con zero overhead di framework a runtime, bundle più piccoli e performance eccellenti fin dal primo caricamento.

<!-- Un componente Svelte 5 minimo -->
<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Cliccato {count} {count === 1 ? 'volta' : 'volte'}
</button>

Questo codice viene compilato in puro JavaScript che aggiorna direttamente il nodo di testo nel DOM quando count cambia, senza diffing, senza Virtual DOM, senza scheduler.

La Filosofia Compiler-First

La differenza fondamentale di Svelte si riassume in una parola: compilatore.

Come funzionano gli altri framework

React e Vue eseguono nel browser un runtime che:

Mantiene una rappresentazione virtuale del DOM (VDOM)
Confronta il vecchio VDOM con il nuovo ad ogni aggiornamento (diffing)
Applica solo le differenze al DOM reale (patching)

Questo processo è costoso in termini di CPU e memoria, specialmente su dispositivi mobili.

Come funziona Svelte

Svelte compila i tuoi componenti in codice imperativo che sa esattamente quali nodi del DOM aggiornare quando lo stato cambia:

// Output semplificato del compilatore Svelte
// Quando count cambia, aggiorna SOLO il testo nel bottone
if (dirty & COUNT) {
  set_text(text_node, count);
}

Non c’è overhead di Virtual DOM, non c’è riconciliazione, non c’è garbage collection di oggetti temporanei. Il compilatore genera il codice minimo necessario.

Svelte 5: L’Era delle Runes

Svelte 5 introduce le runes, un nuovo sistema di reattività basato su segnali (signals) che sostituisce la “magia” del compilatore di Svelte 4 con primitive esplicite e componibili.

Le rune principali

<script>
  // $state - stato reattivo
  let nome = $state('Mario');
  let items = $state([1, 2, 3]);

  // $derived - valori calcolati (sostituisce $: di Svelte 4)
  let lunghezza = $derived(items.length);
  let saluto = $derived(`Ciao, ${nome}!`);

  // $effect - effetti collaterali (sostituisce $: con side effects)
  $effect(() => {
    console.log(`Il nome è cambiato: ${nome}`);
    // Cleanup automatico al prossimo esecuzione
    return () => console.log('cleanup');
  });
</script>

<p>{saluto}</p>
<p>Hai {lunghezza} elementi</p>

Confronto con Svelte 4

<!-- Svelte 4 -->
<script>
  let nome = 'Mario';            // reattivo per "magia"
  $: saluto = `Ciao, ${nome}!`;  // derivato
  $: console.log(nome);          // effetto
</script>

<!-- Svelte 5 -->
<script>
  let nome = $state('Mario');
  let saluto = $derived(`Ciao, ${nome}!`);
  $effect(() => console.log(nome));
</script>

Le runes di Svelte 5 offrono vantaggi importanti:

Esplicite: è chiaro cosa è reattivo e cosa no
Componibili: funzionano in file .svelte.ts fuori dai componenti
Fine-grained: la reattività è granulare a livello di proprietà degli oggetti
TypeScript-friendly: migliore integrazione con i tipi

Vantaggi rispetto a React e Vue

Bundle size

Framework	Min+gzip runtime
React + ReactDOM	~42 KB
Vue 3	~33 KB
Svelte 5	~2 KB

Svelte include quasi zero runtime nel bundle. Il codice del framework diventa parte del tuo codice compilato.

Meno boilerplate

<!-- Svelte: binding bidirezionale nativo -->
<script>
  let email = $state('');
</script>
<input bind:value={email} />

<!-- React richiederebbe useState + onChange handler -->

Performance reale

Niente Virtual DOM diffing: aggiornamenti diretti al DOM
Bundle più piccoli: meno JavaScript da scaricare e parsare
Reattività fine-grained: solo i nodi che devono cambiare vengono toccati
Compilazione ottimizzata: il compilatore elimina il codice morto

CSS scoped di default

<style>
  /* Questi stili si applicano SOLO a questo componente */
  p { color: blue; }
  .header { font-size: 2rem; }
</style>

Non servono CSS modules, styled-components o altre librerie: il CSS scoped è integrato nel linguaggio.

L’Ecosistema Svelte

SvelteKit

SvelteKit è il meta-framework ufficiale per Svelte, equivalente a Next.js per React o Nuxt per Vue. Offre:

Routing file-based: la struttura delle cartelle definisce le route
Server-Side Rendering (SSR): rendering lato server per SEO e performance
Static Site Generation (SSG): generazione di siti statici
API routes: endpoint server integrati
Form actions: gestione form con progressive enhancement
Adapter multipli: deploy su Vercel, Netlify, Node, Cloudflare, ecc.

my-app/
├── src/
│   ├── routes/
│   │   ├── +page.svelte        # Home page
│   │   ├── +layout.svelte      # Layout condiviso
│   │   └── about/
│   │       └── +page.svelte    # Pagina /about
│   ├── lib/
│   │   └── components/         # Componenti riutilizzabili
│   └── app.html                # Template HTML
├── static/                     # Asset statici
├── svelte.config.js
└── vite.config.ts

Librerie dell’ecosistema

Svelte Stores: gestione dello stato built-in
Svelte Transitions: animazioni dichiarative integrate
svelte-headlessui: componenti accessibili headless
Skeleton UI / shadcn-svelte: librerie di componenti UI
Superforms: gestione avanzata dei form con validazione
Paraglide: internazionalizzazione (i18n)
Drizzle / Prisma: ORM per database (usati spesso con SvelteKit)

Quando Scegliere Svelte

Svelte è particolarmente indicato per:

Applicazioni web performanti: dove ogni KB e ogni ms contano
Widget embeddabili: il bundle minimo lo rende ideale per widget di terze parti
Siti content-driven: blog, documentazione, landing page (con SvelteKit)
Progetti nuovi: nessun bagaglio legacy, API moderna e pulita
Sviluppatori che apprezzano la semplicità: meno boilerplate = meno bug

Quando NON scegliere Svelte

Ecosistema enterprise: React ha più librerie e supporto aziendale
Team molto grande con turnover: React e Vue hanno un bacino di sviluppatori più ampio
App mobile native: React Native domina; Svelte non ha un equivalente maturo

Risorse Utili

Documentazione ufficiale Svelte
Tutorial interattivo
SvelteKit docs
Svelte REPL per sperimentare nel browser
Svelte Society per librerie e risorse della community

Prossimi Passi

Nelle prossime sezioni esploreremo in dettaglio ogni aspetto di Svelte 5, dalla sintassi base alle runes, dai componenti a SvelteKit. Ogni guida include esempi pratici e best practice per costruire applicazioni reali.