Svelte — Cheat Sheet

Tag: svelte, frontend, reactivity, framework, compiler, store

Livello: intermedio

TL;DR: Svelte è un compilatore che trasforma componenti dichiarativi in codice JavaScript imperativo ottimizzato. Non usa il Virtual DOM e gestisce la reattività nativamente.

Concetti chiave

Compilatore, non framework a runtime: genera codice JS altamente ottimizzato per manipolare il DOM direttamente.

Nessun Virtual DOM: aggiornamenti chirurgici al DOM senza overhead di diffing in memoria.

Reattività basata sull'assegnazione: cambiare il valore di una variabile innesca l'aggiornamento dell'interfaccia.

Dichiarazioni reattive ($:): ricalcolano valori o eseguono blocchi di codice al variare delle dipendenze.

Scoping CSS automatico: gli stili definiti dentro un componente non inquinano il resto dell'applicazione.

Store nativi (svelte/store): moduli writable, readable e derived per gestire facilmente lo stato globale.

Ciclo di vita: hook principali come onMount, onDestroy, beforeUpdate, afterUpdate.

Context API: setContext e getContext per condividere dati nell'albero dei componenti senza prop drilling.

Actions (use:azione): funzioni a livello di elemento DOM per agganciarsi al suo ciclo di vita.

Binding bidirezionale: direttiva bind: per collegare automaticamente input dell'utente e stato del componente.

Domande tipiche e risposte pronte

Q: Qual è la differenza principale tra React e Svelte?R: Svelte fa il lavoro pesante in fase di compilazione, generando codice JS che aggiorna il DOM in modo diretto. React usa il Virtual DOM per calcolare le differenze a runtime.

Q: Come funziona la reattività con array e oggetti in Svelte?R: Poiché la reattività scatta sull'assegnazione, metodi come push non aggiornano il DOM. Devo sempre riassegnare il valore, ad esempio facendo arr = [...arr, newItem].

Q: A cosa serve il prefisso $ quando si usano gli store?R: È syntactic sugar che permette di leggere il valore dello store e gestisce in automatico l'iscrizione e la cancellazione della sottoscrizione quando il componente viene distrutto.

Insidie e errori comuni

Modificare oggetti o array (es. obj.prop = 1) senza poi effettuare una riassegnazione alla variabile di partenza.

Includere logica asincrona direttamente dentro i blocchi reattivi $: senza un'adeguata gestione dello stato intermedio.

Usare gli Store globali quando basterebbe la Context API per dati specifici di una porzione dell'albero dei componenti.

Snippet e comandi

<script>
  import { onMount, onDestroy } from 'svelte';
  import { writable } from 'svelte/store';

  // Stato locale
  let count = 0;

  // Blocco reattivo e variabili derivate
  $: double = count * 2;
  $: if (count > 5) {
    console.log("Count ha superato 5");
  }

  // Store
  const user = writable({ name: 'Guest' });

  function increment() {
    count += 1;
  }

  function addItem() {
    // Array: riassegnazione obbligatoria per reattività
    items = [...items, items.length + 1];
  }
</script>

<style>
  /* Stile isolato per questo componente */
  button {
    background-color: blue;
    color: white;
  }
</style>

<h1>Contatore: {count}</h1>
<p>Doppio: {double}</p>

<button on:click={increment}>Incrementa</button>

<!-- Sottoscrizione automatica allo store con $ -->
<p>Utente corrente: {$user.name}</p>

<!-- Binding di un input allo stato -->
<input bind:value={$user.name} />
Jarvis Interviews
Jarvis