Svelte: Introduzione al Framework (Lez. 1)

Svelte (svelte.dev)è un framework JavaScript che sfrutta Node.js per la gestione dell’infrastruttura di sviluppo. A differenza dei framework tradizionali come React o Vue.js, Svelte si comporta più come un compilatore. Durante la fase di build, trasforma i componenti in codice JavaScript altamente ottimizzato, eseguito direttamente nel browser. Questo approccio riduce significativamente il carico computazionale rispetto ai framework che utilizzano il Virtual DOM.

Le principali caratteristiche distintive di Svelte

• Compilato: Svelte sposta il carico di lavoro dal browser alla fase di compilazione. Questo consente di avere applicazioni più leggere e veloci, poiché non è necessario mantenere e aggiornare un layer aggiuntivo come il Virtual DOM durante l’esecuzione dell’applicazione.
• Compatto: Permette di scrivere componenti in modo estremamente conciso, utilizzando linguaggi semplici come HTML, CSS e JavaScript. Le dimensioni dei bundle risultano notevolmente ridotte, migliorando ulteriormente le prestazioni complessive.
• Completo: Integra funzionalità native come stili con scope isolato, gestione dello stato, animazioni e binding tra moduli, eliminando la necessità di cercare pacchetti esterni su npm per queste funzionalità di base.

L’assenza del Virtual DOM

Una delle caratteristiche distintive di Svelte è che non utilizza il Virtual DOM. Mentre framework come React o Vue.js mantengono una copia virtuale del DOM per aggiornare selettivamente le parti modificate, Svelte genera direttamente codice che aggiorna il DOM reale. Questo approccio elimina il bisogno di processi come il diffing e la reconciliation, riducendo il carico computazionale nel browser.

Il DOM e il Virtual DOM

Il DOM (Document Object Model) rappresenta la struttura di un documento HTML o XML sotto forma di albero. Il browser costruisce il DOM quando carica una pagina e, grazie a JavaScript, è possibile manipolarlo dinamicamente. Ad esempio, è possibile cambiare il contenuto di un elemento <p> con il seguente codice:

javascriptCopia codicedocument.getElementById("testo").innerHTML = "Testo modificato dal DOM";

Nel DOM esistono vari tipi di nodi:

• Nodo Elemento: Ogni tag HTML, come <div>, <p>, <h1>, rappresenta un nodo di tipo elemento.
• Nodo Testo: Il contenuto testuale di un elemento HTML è un nodo di tipo testo.
• Nodo Attributo: Gli attributi come id o class sono rappresentati come nodi.

Il Virtual DOM, una versione astratta del DOM reale speculare ad esso, che viene utilizzato da framework come React e Vue.js per capire quali porzioni del DOM sono cambiate e ottimizzare le operazioni di aggiornamento delle interfacce utente. Tuttavia, il processo di “diffing”, necessario per confrontare il Virtual DOM con il DOM reale e aggiornare solo le parti modificate, può essere computazionalmente dispendioso, soprattutto per applicazioni complesse.

Il vantaggio di Svelte

Svelte adotta un approccio diverso: anziché calcolare le differenze tra il DOM reale e quello virtuale, tutte le ottimizzazioni vengono effettuate durante la fase di compilazione. Questo permette a Svelte di generare codice che sa già quali parti del DOM devono essere aggiornate, rendendo l’esecuzione nel browser molto più leggera e rapida.

La Reattività di Svelte

Svelte semplifica anche la gestione dello stato attraverso una reattività nativa. Gli “store” di Svelte sono strumenti potenti che permettono di gestire lo stato globale o condiviso tra i componenti in modo intuitivo, eliminando la necessità di implementare soluzioni complesse come nei framework concorrenti. Svelte rende la gestione dello stato particolarmente intuitiva attraverso la sua reattività nativa. Questo significa che quando una variabile o uno store viene aggiornato, l’interfaccia utente si aggiorna automaticamente per riflettere le modifiche, senza che lo sviluppatore debba esplicitamente indicare come e quando aggiornare il DOM (come accade in altri framework).

Oltre alla gestione dello stato, Svelte facilita la reattività degli input, la gestione delle animazioni e l’applicazione di stili CSS isolati per ciascun componente, prevenendo conflitti nello spazio globale del progetto.

Bundle più piccoli e prestazioni migliori

Svelte genera bundle notevolmente più piccoli rispetto a React o Vue.js, grazie all’assenza del Virtual DOM e alle ottimizzazioni effettuate durante la compilazione. Questo si traduce in tempi di caricamento più rapidi e un minor consumo di risorse da parte del browser.

Stili con scope nativo

Svelte include la possibilità di applicare stili con scope nativo, garantendo che ogni componente abbia i propri stili isolati, evitando conflitti con altri componenti o stili globali. In altri framework, questa funzionalità richiede configurazioni aggiuntive.

Configurazione degli strumenti di sviluppo

Se seguissimo le indicazioni ufficiali dal sito di Svelte,dovremmo installare SvelteKit, che include anche la possibilità di gestire un backend, ma questo può risultare più complicato per il nostro obiettivo che è quello di creare una semplice applicazione frontend. Per semplificare, invece di utilizzare SvelteKit, creeremo un’applicazione usando Svelte puro, senza un backend. E’ consigliabile installare alcune estensioni per l’IDE di sviluppo:
In Visual Studio Code per facilitare lo sviluppo con Svelte, suggerisco le seguneti estensioni:

• Svelte for VSCode: per migliorare il supporto a Svelte
• Svelte Intellisense: per suggerimenti di codice più precisi
• Svelte Transpiler: per una compilazione efficiente
• Svelte Auto Import: per importare automaticamente i componenti

La prima applicazione Svelte

Creiamo una cartella di progetto chiamandola “svelte” e al suo interno creiamo una sottocartella chiamata “my-app”.

1. Crea una nuova cartella: all’interno di Visual Studio Code, crea una nuova cartella chiamata “lezione_1“.
2. Apri il terminale: Posizionati nella cartella appena creata usando il terminale. Puoi farlo con il comando
   cd lezione_01
3. Usa Vite (tool per inizializzare progetti frontend) per creare il progetto:
   npm create vite
4. Segui le istruzioni e dai un nome al progetto, ad esempio “app_01“. Quando viene chiesto di selezionare il framework, scegli Svelte e imposta il linguaggio su JavaScript.
5. Dopo aver creato il progetto, spostati nella cartella “app_01” e installa le dipendenze con il comando:
   cd app_01
   npm install
6. Installate le dipendenze, avvia il server di sviluppo con:
   npm run dev
   Questo avvierà l’applicazione che sarà accessibile tramite un indirizzo locale, mostrato nel terminale (ad esempio, http://localhost:3000).

Struttura del progetto

Diamo un’occhiata alla struttura del progetto:

• Public: Cartella che contiene risorse statiche come immagini o file che verranno serviti direttamente.
• Src: Cartella dove si trova il codice sorgente dell’applicazione.
• src/App.svelte: Componente principale della tua applicazione.
• src/app.css: Contiene lo stile globale dell’applicazione.
• src/main.js: File di ingresso, indica dove viene inserita l’applicazione nel DOM (in questo caso nel div con id “app” definito nel file index.html).

Rimuovere componenti non necessari
Nel progetto creato automaticamente, troverai un esempio di componenate chiamato Counter.svelte. Se questo componente non ti serve, puoi semplicemente eliminarlo.

Vai in App.svelte, rimuovi il riferimento al componente Counter e salva le modifiche. L’applicazione si aggiornerà automaticamente e non mostrerà più il componente eliminato.

Struttura di un componente Svelte
Ogni componente in Svelte è composto da tre parti principali:

• Script: Dove viene definita la logica e lo stato del componente.
• Markup (HTML): La struttura del componente, che può essere racchiusa tra tag come , ma non è obbligatorio.
• Stile (CSS): Definisce lo stile specifico del componente. Puoi aggiungere stili direttamente nel componente, oppure usare il file App.css per stili globali.

Ecco un esempio semplice di come potrebbe apparire il codice in App.svelte:

<script>
  // Qui va lo script
</script>

<main>
  <h1>Ciao Mondo!</h1>
</main>

<style>
  /*  Qui va lo stile */
  h1 {
    color: red;
  }
</style>

Salvando il file,l’applicazione renderizzerà il messaggio “Ciao Mondo!” in rosso per lo stile applicato.