In questa lezione ci concentreremo sull’uso di costrutti condizionali e dell’Each statement , che ci consente di gestire cicli e ripetizioni all’interno delle nostre applicazioni web. Nello specfico: Costrutti condizionali (If) Utilizzo di else if Applicare stili condizionali Reattività con le variabili Each Statement, sintassi di base Gestire Dati Complessi: Array di Oggetti Utilizzo delle Keys nell’Each Statement Mescolare i Nomi: Libreria Lodash Vantaggi delle Chiavi in Situazioni Dinamiche Costrutti condizionali (If) Svelte permette di usare blocchi condizionali if direttamente nel markup HTML. Per avviare un blocco if, si utilizza #if seguito dalla condizione, e per chiuderlo si utilizza /if. Per aggiungere condizioni alternative, possiamo usare {:else}. Esempio di base: determinare se un utente è maggiorenne o minorenne. <script> //Lezione 3 – App 1 let age = 10; // Variabile che rappresenta l’età </script> <main> {#if age >= 18} <h2>Sei maggiorenne</h2> {:else} <h2>Sei minorenne</h2> {/if} </main> In questo esempio, se age è maggiore o uguale a 18, visualizzeremo il messaggio “Sei maggiorenne”, altrimenti “Sei minorenne”. Utilizzo di else if Con Svelte, possiamo gestire più condizioni utilizzando {:else if}. Un esempio potrebbe essere la verifica se un numero è positivo, negativo o pari a zero. <script> let number = 0; </script> <main> {#if number > 0} <h2>Il numero è positivo</h2> {:else if number < 0} <h2>Il numero è negativo</h2> {:else} <h2>Il numero è pari a 0</h2> {/if} </main> Applicare stili condizionali Possiamo anche applicare classi CSS condizionali in base alla logica dei nostri blocchi if. Ad esempio, cambiamo il colore del testo a seconda che un utente sia maggiorenne o minorenne. In questo caso, age viene utilizzato per determinare se la classe CSS sarà “green” o “red”. Reattività con le variabili In Svelte, possiamo rendere una variabile “reattiva” utilizzando il simbolo $:. Questo significa che la variabile aggiornerà automaticamente il suo valore ogni volta che una delle variabili da cui dipende cambia. La reattività è un aspetto cruciale per rendere dinamiche le interfacce utente. In questo caso, ogni volta che age cambia, il valore di color sarà automaticamente aggiornato e, di conseguenza, il colore del testo cambierà. Questo meccanismo consente di semplificare la gestione degli aggiornamenti dinamici senza dover scrivere codice complesso. Costrutto Each intassi di base Il costrutto each permette di iterare su array o liste di dati, creando dinamicamente gli elementi corrispondenti nel DOM. In questo esempio, ogni voce dell’array nazioni viene iterata e visualizzata come un elemento <h2>. Questo è un modo efficiente per gestire liste di elementi dinamici senza dover scrivere manualmente ogni elemento nel codice HTML. Gestire Dati Complessi: Array di Oggetti Se lavoriamo con dati più complessi, come array di oggetti, possiamo accedere alle proprietà di ogni oggetto all’interno del blocco each. In questo esempio, utilizziamo la “dot notation” per accedere alle proprietà di ciascun oggetto all’interno dell’array capitali. Inoltre, aggiungiamo un indice index per numerare automaticamente ogni elemento. Utilizzo delle Keys nell’Each Statement L’uso delle chiavi (key) è fondamentale per garantire che Svelte gestisca correttamente le modifiche in una lista di elementi dinamici, soprattutto quando gli elementi vengono rimescolati, aggiunti o eliminati. Senza una chiave univoca, Svelte potrebbe riutilizzare o rimuovere elementi in modo inefficiente. In un ciclo each, se non si fornisce una chiave, Svelte utilizzerà automaticamente l’indice dell’array come chiave. Tuttavia, questo può causare problemi in situazioni dinamiche, come la riorganizzazione degli elementi. Per risolvere questo, è consigliabile utilizzare una chiave personalizzata. Ecco un esempio in cui utilizziamo la libreria Lodash per mescolare una lista di nomi: n questo esempio, usiamo il nome di ogni calciatore come chiave. Questo garantisce che, quando i calciatori vengono mescolati, Svelte riesca a mantenere correttamente il collegamento tra i dati e gli elementi visivi. Mescolare i Nomi: Libreria Lodash Per dimostrare ulteriormente l’importanza dell’uso delle chiavi, possiamo installare la libreria Lodash e utilizzare la funzione shuffle per mescolare una lista di nomi. Installiamo la libreria eseguendo il seguente comando da terminale: npm install lodash npm install –save-dev @types/lodash Una volta installata la libreria, possiamo importare la funzione shuffle per mescolare i nomi tramite un pulsante. Vantaggi delle Chiavi in Situazioni Dinamiche L’utilizzo delle chiavi è essenziale anche in altre situazioni dinamiche, come: Eliminare elementi dalla lista. Aggiungere nuovi elementi. Inserire elementi in posizioni specifiche. Grazie alle chiavi, Svelte può mantenere il corretto collegamento tra i dati e la loro rappresentazione visiva, garantendo che gli elementi vengano aggiornati o riordinati correttamente. In questo modo, possiamo evitare errori nella gestione delle liste dinamiche, come campi di input che rimangono associati ai valori sbagliati dopo un rimescolamento.

In questa lezione affronteremo i seguenti argomenti: Le variabili Iniettare codice HTML dinamico Gestire attributi dinamici Disabilitare un bottone dinamicamente Gestire classi CSS dinamiche anche tramite operatore ternario Le Variabili computed Le variabili Per lavorare con contenuti dinamici, nella nostra applicazione web dobbiamo sfruttare la parte <script> di un file Svelte, dove possiamo dichiarare variabili e inserire la logica dell’applicazione. Per dichiarare una variabile utilizzeremo let. Ecco un esempio: <script> //Lezione 2 – App 1 let nome = ‘Daniele’; </script> <h1>Ciao {nome}</h1> In questo caso, stiamo dichiarando una variabile nome e visualizzandola nel nostro HTML utilizzando le parentesi graffe {}. Le parentesi graffe { } in Svelte hanno un ruolo molto importante percè vengono utilizzate per interpolare JavaScript all’interno del markup HTML, permettendo di rendere dinamica l’interfaccia utente. Se vario il valore della variabile in “Tiziano”, la pagina si aggiorna automaticamente mostrando il nuovo valore. Svelte è in grado di interpretare espressioni all’interno delle parentesi graffe. Ad esempio: <h1>{7 * 7}</h1> Visualizzerà “49”, poiché tutto ciò che è racchiuso tra parentesi graffe vien e interpretato come codice JavaScript. Iniettare codice HTML dinamico Svelte consente anche di iniettare codice HTML dinamico. Supponiamo di avere una variabile che contiene una stringa HTML: <script> //Lezione 2 – App 1 let codice = ‘<strong> <h1>Benvenuto nella piattaforma</h1> </strong>’; let nome = ‘Daniele’; </script> <main> <div>{@html codice}</div> <h2>Ciao {nome}</h2> </main> In questo caso, il contenuto della variabile codice verrà renderizzato come HTML, grazie alla direttiva {@html}. Questo è utile se si ha la necessità di iniettare codice HTML dinamicamente, ma attenzione a non utilizzare questa tecnica con contenuti non sicuri, poiché può esporre l’applicazione a vulnerabilità di tipo XSS (cross-site scripting). Gestire attributi dinamici Possiamo anche aggiungere attributi dinamici agli elementi HTML. Supponiamo di voler impostare dinamicamente l’ID di un elemento: <script> //Lezione 2 – App 1 let codice = ‘<strong> <h1>Benvenuto nella piattaforma</h1> </strong>’; let nome = ‘Daniele’; let headingID = ‘heading1′; </script> <main> <div>{@html codice}</div> <h2>Ciao {nome}</h2> <h2 id={headingID}>Questo è il mio primo heading</h2> </main> In questo esempio, il valore dell’attributo id viene assegnato dinamicamente dalla variabile headingID. Se modifichiamo il contenuto della variabile, l’attributo verrà aggiornato automaticamente.È possibile visualizzare dalla console di Chrome il niovo valore dell’ID Svelte ci permette di scrivere meno codice grazie a una sintassi abbreviata. Se il nome della variabile coincide con il nome dell’attributo, possiamo scrivere il codice in modo più compatto: <h2 {headingID}>Questo è il mio primo heading</h2> Disabilitare un bottone dinamicamente Un altro esempio pratico di gestione degli attributi è disabilitare o abilitare un bottone dinamicamente: <script> //Lezione 2 – App 1 let codice = ‘<strong> <h1>Benvenuto nella piattaforma</h1> </strong>’; let nome = ‘Daniele’; let headingID = ‘heading1’; let disabled = true; </script> <main> <div>{@html codice}</div> <h2>Ciao {nome}</h2> <h2 id={headingID}>Questo è il mio primo heading</h2> <button {disabled}>Cliccami</button> </main> Se il valore di disabled è true, il bottone sarà disabilitato. Se cambiamo disabled a false, il bottone sarà abilitato. Gestire classi CSS dinamiche Svelte ci permette di gestire dinamicamente anche le classi CSS. Possiamo associare una classe a un elemento in base al valore di una variabile. Ad esempio: <script> //Lezione 2 – App 1 let codice = ‘<strong> <h1>Benvenuto nella piattaforma</h1> </strong>’; let nome = ‘Daniele’; let headingID = ‘heading1’; let disabled = true; let color = ‘red’; </script> <main> <div>{@html codice}</div> <h2>Ciao {nome}</h2> <h2 id={headingID}>Questo è il mio primo heading</h2> <button {disabled}>Cliccami</button> <h2 class={color}>Questo è un testo colorato</h2> </main> <style> .red { color: red; } </style> Se colore è impostato su “red”, il testo sarà rosso. Se cambiamo il valore della variabile a “green”, il testo diventerà verde. Possiamo rendere l’assegnazione della classe ancora più dinamica usando l’operatore ternario: <script> //Lezione 2 – App 1 let codice = ‘<strong> <h1>Benvenuto nella piattaforma</h1> </strong>’; let nome = ‘Daniele’; let headingID = ‘heading1’; let disabled = true; let color = ‘red’; let controllo = true; </script> <main> <div>{@html codice}</div> <h2>Ciao {nome}</h2> <h2 id={headingID}>Questo è il mio primo heading</h2> <button {disabled}>Cliccami</button> <h2 class={color}>Questo è un testo colorato</h2> <h2 class={controllo ? ‘green’ : ‘white’}>Testo dinamico</h2> </main> <style> .red { color: red; } .green { color: green; } .white { color: white; } </style> In questo esempio, se controllo è true, il testo avrà la classe “green”. Se è false, avrà la classe “white”. Questo permette di applicare stili diversi in base a una condizione logica. Gestione degli Eventi in Svelte Per lavorare con la gestione degli eventi in Svelte useremo come esempio un semplice con un contatore che può essere incrementato o decrementato tramite dei pulsanti. Step 1: Setup di base Partiamo con un semplice setup: Creiamo una variabile per il contatore e visualizziamola nel nostro browser. Aggiungiamo due pulsanti: uno per incrementare e uno per decrementare il valore del contatore. <script> //Lezione 2 – App 2 let count = 0; </script> <main> <p>{count}</p> <button>Incrementa</button> <button>Decrementa</button> </main> Abbiamo creato una variabile count inizializzata a 0 e la stiamo mostrando in un elemento <p>. Ora vediamo come gestire l’evento click sui pulsanti. Step 2: Aggiunta degli Eventi click Cliccando su un pulsante, vogliamo che il valore del contatore cambi. Svelte ci permette di gestire gli eventi utilizzando la sintassi on:evento. Per il pulsante decrementa, possiamo usare una funzione inline che diminuisce il valore del contatore. <button on:click=”{() => count -= 1}”>Decrementa</button> Questa è una soluzione funziona ma non è ideale, infatti è meglio evitare di scrivere il codice inline all’interno dell’attributo on:click perché rende il codice difficile da mantenere. Per uil pulsante incrementa per una migliore gestione, possiamo definire una funzione separata per il pulsante incrementa. <script> //Lezione 2 – App 2 let count = 0; function incrementa() { count += 1; } </script> <p>{count}</p> <button on:click=”{incrementa}”>Incrementa</button> <button on:click=”{() => count -= 1}”>Decrementa</button> Step 3: Passaggio di Parametri alle Funzioni Gestite dagli Eventi Ora vogliamo aggiungere un pulsante che incrementi il contatore di un valore specifico, ad esempio 5. Per farlo, dovremo passare dei parametri alla funzione gestita dall’evento. Aggiungiamo una variabile che rappresenta il valore di incremento: <script> //Lezione 2 – App 2 let count = 0; […]

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". Crea una nuova cartella: all'interno di Visual Studio Code, crea una nuova cartella chiamata "lezione_1". Apri il terminale: Posizionati nella cartella appena creata usando il terminale. Puoi farlo con il comandocd lezione_01 Usa Vite (tool per inizializzare progetti frontend) per creare il progetto:npm create vite 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. Dopo aver creato il progetto, spostati nella cartella "app_01" e installa le dipendenze con il comando:cd app_01npm install Installate le dipendenze, avvia il server di sviluppo con:npm run devQuesto 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 [...]