Svelte — Cheat Sheet

Tag: svelte, frontend, compiler, reactive, javascript

Livello: intermedio

TL;DR: Svelte è un compilatore frontend che trasforma i componenti in codice JavaScript imperativo ed efficiente, eliminando la necessità del Virtual DOM e offrendo reattività nativa tramite assegnazioni.

Concetti chiave

Svelte non usa il Virtual DOM, aggiorna direttamente il DOM reale al cambio di stato

I componenti sono scritti in file .svelte contenenti script, markup e style

La reattività è basata sull'assegnazione (=), non su hook o setter specifici

Le dichiarazioni e computazioni reattive si definiscono con la label $:

Il CSS definito all'interno dei componenti è scoped di default

Le funzioni del ciclo di vita principali sono onMount, onDestroy, beforeUpdate, afterUpdate

Lo stato globale viene gestito tramite gli store (writable, readable, derived)

La composizione dei layout e dei componenti genitore-figlio utilizza gli <slot>

Fornisce direttive integrate per gestire le transizioni (es. transition:fade)

Sposta il grosso del lavoro a build-time producendo bundle finali molto leggeri

Domande tipiche e risposte pronte

Q: Qual è la differenza principale tra Svelte e React?R: Svelte è un compilatore. Sposta il lavoro al momento della build generando codice JS che aggiorna chirurgicamente il DOM, mentre React calcola le differenze sul Virtual DOM a runtime.

Q: Come si gestisce lo stato globale e come ci si iscrive in un componente?R: Utilizzo gli store di Svelte, come writable. Nei componenti posso gestire la sottoscrizione e disiscrizione automatica aggiungendo il prefisso $ davanti al nome dello store.

Insidie e errori comuni

Modificare un array o un oggetto con metodi mutanti (es. push()) senza riassegnare la variabile; la riassegnazione è necessaria per innescare la reattività

Dimenticare che il blocco di codice dentro onMount non viene eseguito lato server (SSR)

Non includere correttamente le dipendenze in un blocco reattivo $:; Svelte traccia solo le variabili a sinistra dell'uguale o esplicitamente usate nell'espressione

Snippet e comandi

<script>
  import { onMount } from 'svelte';
  let count = 0;

  // Dichiarazione reattiva: ricalcolata in automatico se 'count' cambia
  $: double = count * 2;

  function increment() {
    // La riassegnazione scatena l'update del DOM
    count += 1;
  }
</script>

<button on:click={increment}>
  Clicks: {count} (Double: {double})
</button>

<style>
  /* Questo stile è limitato al button di questo componente */
  button {
    font-weight: bold;
    cursor: pointer;
  }
</style>

Da ripassare

[ ] Context API (setContext, getContext) vs l'utilizzo degli Store globali

[ ] Implementazione di transizioni custom e della direttiva lifecycle use:action

Riferimenti

Documentazione ufficiale Svelte (svelte.dev/docs)

Tutorial ufficiale interattivo (learn.svelte.dev)

Jarvis Interviews
Jarvis