Introduzione

Svelte è uno degli ultimi arrivati nel mondo frontend e mi ha colpito per la sua semplicità e leggerezza. In realtà Svelte è nato già da qualche anno, ma solamente dalla sua versione 3 ha iniziato ad attrarre l’ attenzione degli sviluppatori frontend. A differenza dei suoi “concorrenti” (Angular, React, VueJs) in Svelte il codice viene compilato in anticipo in JavaScript nativo . Tutto questo si traduce in meno codice da inviare alla pagina web per performance e leggerezza incredibili.

Premessa

Ho utilizzato Svelte per alcune applicazioni recentemente e così volevo condividere con voi la mia esperienza. Oggi andremo a creare un’applicazione Svelte base, ma è chiaro che questo è solo l’inizio. La mia volontà sarebbe quella di approfondire l’argomento e creare contenuti più avanzati, d’altra parte però ci tenevo a non precludere nessuno in questo percorso e così ho preferito partire dalle basi.

COME INIZIARE

Iniziare a scrivere la nostra prima applicazione Svelte è abbastanza agevole perchè abbiamo a disposizione dei template di partenza che ci toglieranno il grosso del lavoro, ma procediamo per gradi…

L’unico requisito iniziale è quello di avere NodeJs installato nella nostra macchina, se ne sei sprovvisto, puoi seguire le istruzioni che troverai nel sito ufficiale NodeJS

NodeJs mette a disposizione il comando npx che ci tornerà utile per il primo comando che andremo ad eseguire.

inizializzione progetto

Digitiamo nel terminale il seguente comando

npx degit sveltejs/template primaApp

andremo così ad eseguire il comando degit che ci permetterà di scaricare l’ultimo codice disponibile dal repository GitHub https://github.com/sveltejs/template dentro una nuova cartella chiamata primaApp.

Digitiamo poi il comando per spostarci dentro alla cartella appena creata

cd primaApp

possiamo notare che dentro alla cartella abbiamo alcuni file, quelli scaricati automaticamente del repository citato in precedenza, tra questi file troviamo anche il file package.json. Questo file al suo interno riporta le dipendenze del progetto e per installarle andiamo ad eseguire il comando

npm install

ora finalmente è tutto pronto.

Avvio applicazione

Eseguiamo il comando seguente per far partire la nostra applicazione

npm run dev

questo comando farà partire la compilazione (eseguita da rollup) e al termine della procedura vedremo questa scritta nel terminale.

Your application is ready~! 🚀
- Local: http://localhost:5000

La nostra applicazione quindi servita su localhost alla porta 5000 (porta di default). Andando quindi all’indirizzo http://localhost:5000 troveremo la nostra applicazione.

La nostra applicazione è davvero base e visualizza la scritta “hello world”, ma da dove arrivano queste informazioni?

struttura applicazione

Se andiamo nella nostra cartella primaApp e poi all’interno della cartella src, troveremo un file App.svelte, il nostro file di partenza. Qui abbiamo definite le informazioni che vediamo poi a video nella nostra applicazione. La struttura del file è molto simile a quella usata in VueJs, si può definire lo stile all’interno dei tag <style></style>, l’html all’interno dei tag <main></main> e il JavaScript, per aggiungere la logica all’interno del tag <script></script>

Conclusioni

Per quanto riguarda Svelte è solo l’inizio, spero comunque che questo articolo vi sia comunque piaciuto e se l’iniziativa è di vostro gradimento fatemelo sapere tramite commento. In base ai vostri feedback pianificherò man man articoli più approfonditi e mirati.

https://italiancoders.it/svelte-performance-e-semplicita-i-suoi-punti-di-forza/