Svelte: come usare uno starter pack

Breve introduzione

Svelte è un framework Javascript Open Source, il cui codice sorgente è accessibile a chiunque su Github. Nasce nel 2016 da Ractive.js e il nome “Svelte” fu scelto da Rich Harris - creatore di entrambi i framework - e dai suoi collaboratori. Nel 2019, Svelte si è affermato tra i framework più completi per lo sviluppo di web app integrando un supporto nativo a Typescript.

Rispetto agli altri framework Javascript, Svelte adotta un approccio innovativo e unico per lo sviluppo di app web. Ad esempio, con React - libreria Javascript - quando apportiamo delle modifiche ai dati o allo stato di un’applicazione, queste vengono applicate prima alla DOM virtuale (una copia virtuale della pagina web). Successivamente, React confronta la versione virtuale con la pagina interessata per le modifiche, così da capire cosa è cambiato, aggiornando solo le componenti necessarie. Sebbene sia un processo utile ai fini di un miglioramento delle performance di un’app o di una pagina, richiede comunque dei passaggi intermedi.

Al contrario, Svelte usa un approccio totalmente opposto. Al momento della compilazione, il framework in questione trasforma direttamente le componenti in codice JS e aggiorna il DOM reale del browser. Questo significa che c’è un’eliminazione dei passaggi intermedi descritti in precedenza, rendendo un’app scritta in Svelte più leggera e veloce e migliorando l’esperienza utente. Inoltre, Svelte risulta semplice da apprendere perché si basa su un approccio dichiarativo, integrando markup (HTML), stile (CSS) e comportamenti (Javascript). Il vantaggio è che ciascuno di questi componenti si trova in posti specifici, consentendo l’interazione tra gli stessi, ma assicurando una gestione e manutenzione semplice ed efficiente.

Caratteristiche principali

Per comprendere meglio quanto descritto fino ad ora, proponiamo qui un breve e conciso elenco che riassume gli aspetti più importanti che distinguono Svelte dagli altri framework:

• Compilazione: rispetto ad altri framework, Svelte compila i componenti JS al momento del build, eliminando il ricorso al virtual DOM e garantendo prestazioni superiori.
• Reattività dichiarativa: consente di ridurre la quantità di codice da scrivere, rendendolo al contempo più interattivo. In questo modo, i developers potranno progettare interfacce dinamiche con meno boilerplate.
• Community: vanta un'ampia, dinamica e collaborativa comunità di sviluppatori che propone strumenti, risorse ed elementi di supporto alla comprensione del framework.
• Semplicità nell'apprendimento: basandosi su un linguaggio che comprende HTML, CSS E JS, appare un framework semplice da imparare, soprattutto perché non richiede l'uso di sintassi avanzate.
• Transizioni ed animazioni: infine, per la sua natura flessibile, questo framework si integra perfettamente con librerie di animazione di terze parti, come, ad esempio, Svelte animate.

Questo risulta una scelta ideale per i front end developers in cerca di un framework tendenzialmente semplice, che garantisce prestazioni elevate e un’esperienza utente fluida.

Cos'è un starter pack di Svelte?

Una delle ragioni che si pone alla base del successo ottenuto da Svelte è sicuramente legata agli starter pack disponibili per i developers.
Possiamo facilmente intuire che questi sono dei pacchetti pre-configurati che contengono tutti gli elementi necessari per procedere con lo sviluppo di un'app.
Uno starter pack Svelte risulta essere, quindi, l’ideale per iniziare evitando la fase iniziale per la configurazione di un ambiente di sviluppo, saltando direttamente alla parte di codifica.

Cosa contiene uno starter pack Svelte?

Lo scopriamo qui:

• Una struttura di base dell'applicazione, caratterizzata da un file HTML: il punto di partenza per iniziare a sviluppare un'app;
• Un file CSS che fornisce gli stili di base dell'app;
• Il file JS principale che alimenta l'app;
• Configurazioni preimpostate che specificano dettagli quali il bundler (strumento che unisce diversi file in uno unico in formato JS);
• Documentazione: dovrebbero essere, infine, comprese delle linee guida dedicate sia ad una configurazione iniziale che per la build dell'applicazione.

Insomma, questi starter pack Svelte sono resi pubblici appositamente per supportare gli sviluppatori, snellendo il carico sia in termini di ore di lavoro che di risorse dedicate.

Come usare uno starter pack Svelte

1. Scarica lo starter pack

Il primo passo è quello di trovare lo starter pack Svelte più adatto alle proprie esigenze tra i molteplici disponibili su GitHub, dove gli sviluppatori di norma caricano i pacchetti.

Una volta trovato quello perfetto, potrai scaricarlo clonando il repository Git usando il seguente comando:

 git clone URL_DEL_REPOSITORY

*Url del repository va, ovviamente, sostituito con l’URL effettivo dello starter pack Svelte scelto.

2. Estrai lo starter pack

Nel caso in cui seguissi il passaggio appena descritto, non dovrai estrarre lo starter pack scaricato.

Se, invece, dovessi scegliere di scaricarlo come file compresso (formato .zip, ad esempio) non dovrai far altro che estrarre il contenuto del pacchetto attraverso uno dei software dedicati, di norma già preinstallati sul pc.

3. Installa le dipendenze

Prima di avviare l’applicazione, dovrai installare le dipendenze, ovvero le librerie e i pacchetti esterni necessari al suo funzionamento.

Per farlo, ti basterà aprire il terminale e inviare il seguente comando:

npm install

Questo legge il file .json incluso nello starter pack Svelte scelto e ne scarica tutte le dipendenze.

Avvia l’app

Ora puoi finalmente avviare l’app, digitando il seguente comando:

npm run dev

Molti starter pack Svelte presentano degli script che dovrebbero facilitare l’avvio dell’app in modalità sviluppo, consentendo anche il caricamento automatico nel momento in cui apporti delle modifiche al codice.

Se il comando non dovesse funzionare, consulta la documentazione dedicata o i file del pacchetto per capire quali nomi utilizza lo starter pack scaricato!</p

Inizia sviluppare!

Giunto a questo punto, con l’applicazione in esecuzione, non dovrai far altro che aprire l’editor e iniziare a scrivere per modificare/aggiungere componenti, agire sullo stile o estendere le funzionalità dell’app in base ai tuoi obiettivi.

Ti ricordiamo di dare sempre una lettura approfondita alla documentazione inclusa nel pacchetto iniziale Svelte per poter capire come sfruttare al meglio le potenzialità del framework.

Come scegliere uno starter pack Svelte

Ecco come scegliere uno starter pack:

• il tuo livello di esperienza: se fossi ancora un dev alle prime armi, sarebbe meglio optare per pacchetti semplici, caratterizzati da tutorial e documentazioni chiare. Se partissi già avvantaggiato, allora potresti scegliere starter pack più complessi con configurazioni personalizzabili;
• funzionalità: sono disponibili sia starter pack “minimalisti” per progetti semplici, che “completi”, dedicati a funzionalità avanzate come la gestione dello stato o il routing;
• supporto e community: anche la valutazione della qualità della documentazione e l’attività della community sono aspetti da considerare, poiché significherebbe saper affrontare eventuali difficoltà o problematiche durante lo sviluppo.

Prima di terminare, potrebbe esserti utile valutare anche le performance e le best practice dello starter pack scelto, ricordando che il codice dovrebbe essere pulito e basarsi su una struttura logica.

Insomma, se lo starter pack non rende efficiente e semplifica il tuo lavoro, hai sbagliato scelta!

Conclusioni

Sapere come utilizzare uno starter pack Svelte e capire come sceglierlo è un passo importante per sviluppare un’app responsive, user-friendly e in linea con le tue esigenze, avendo l’opportunità di contare su una base già solida e ben strutturata!