Alla scoperta di Svelte (pt. 1/2)
In questa mini-guida, suddivisa in due parti, parlerò di Svelte: in questa parte farò una panoramica del framework, i punti di forza e debolezza che ho riscontrato e delle differenze da React.
La seconda parte sarà più pratica e mostrerò come è semplice creare una piccola applicazione in Svelte.
Introduzione — Come ho scoperto Svelte
Ogni anno, State of Javascript pubblica i risultati di un sondaggio che esplora l’attuale panorama di JavaScript.
Coprono praticamente tutti gli ambiti. Dai framework front-end al back-end, dai dispositivi mobili e desktop ai test, fino alle risorse migliori.
Se ami sviluppare utilizzando JavaScript, ti consiglio vivamente di leggere il report, perché, come me, potresti trovare tante piccole chicche da poter poi approfondire.
Mi trovavo nella classifica generale per i migliori framework front-end (basati su consapevolezza, interesse e soddisfazione), e stranamente noto il nome di Svelte in seconda posizione.
Proprio lì, dietro React e di fronte a framework ben consolidati come Vue.js, Preact, Angular ed Ember.
La prima cosa che faccio é approfondire, così ho scoperto un piccolo nuovo mondo.
Cos’è Svelte?
Svelte è un framework relativamente nuovo (3 anni circa), sia per età che per paradigma che punta a ribaltare lo status quo dei framework front-end.
Se vuoi approfondire ti consiglio questo video di Rich Harris (creatore di Svelte)
Svelte tecnicamente, al contrario di React e affini, usa un vero e proprio compilatore.
Addio Virtual DOM.
Il compilatore di Svelte trasforma il componente dichiarativo in codice efficiente, indispensabile e di basso livello, che manipola direttamente il DOM stesso, eliminando tutto l’overhead non necessario.
Panoramica su Svelte
- DOM, non Virtual DOM
- I file del framework hanno l’estensione .svelte
- Un componente in Svelte si basa esclusivamente sui web standards (HTML, CSS, JS)
- Ogni componente può accedere agli eventi del DOM o a dei CustomEvent creati ad hoc
- Usa un template system per rappresentare la logica di vista del componente
Come creo la mia prima applicazione Svelte
Creare uno scheletro di applicazione Svelte è un gioco da ragazzi.
Ci bastano pochissimi comandi:
# Se non abbiamo degit installato
npm i degit --global# Creiamo il nostro skeleton
npx degit sveltejs/template my-svelte-project# installiamo le dipendenze
cd my-svelte-project
npm i# start dev
npm run dev
Il pacchetto “degit”, usato sopra, effettua una copia dell’ultimo commit del progetto github che gli viene passato (nel nostro caso “sveltejs/template”). In questo modo ritroveremo lo scheletro della nostra applicazione pronto all’uso nella cartella “my-svelte-project”.
Siamo pronti per iniziare a creare la nostra prima applicazione!
Vedremo come fare i nostri primi passi (pratici) nella seconda parte della nostra guida.
Conclusione
Abbiamo fatto una panoramica rapida su Svelte.
Prima di concludere questa fase teorica ho preparato un piccolo esempio di componente Svelte che racchiude tutte le cose di cui ho parlato in questo articolo.
Lo puoi editare direttamente online e quindi iniziarti a farti un’idea precisa di quello che saràla seconda parte:
Se hai dubbi o semplici domande, lascia pure un commento!
Alla prossima!
