Svelte è un modo completamente nuovo di pensare ad un framework di sviluppo web: si potrebbe definire un “framework senza framework”.
Tutti i framework di sviluppo attualmente in circolazione (angular, vue, react, ecc) per quanto di piccole dimensioni, si portano dietro il framework.
Svelte invece va pensato un po’ come un compilatore: lo sviluppatore scrive i propri web component in HTML, CSS e Javascript, e il compilatore trasforma il codice in puro Javascript. Questo vuol dire che il browser non perde nemmeno un secondo a interpretare il framework, ma interpreta ed esegue solo il Javascript risultante dalla compilazione.
Nella pratica questo significa, non solo meno peso in Kb da scaricare, ma anche una velocità incredibilmente maggiore, maggiore reattività dei componenti e un’iniziale avvio dell’applicazione quasi istantaneo.
Penso che ogni sviluppatore abbia provato l’esperienza di vedere il proprio browser bloccato all’avvio di una web application, sia per il tempo di download del framework e dei componenti, sia per il bootstrap in memoria di tutto il codice che poi va ad interpretare i vari moduli. Con svelte tutto questo non succede più, e l’applicazione è pronta e reattiva non appena la pagina si apre.
Andiamo a fare un veloce esempio di questa rivoluzionaria tecnologia.
Per iniziare bisogna andare sulla pagina del framework e scaricare questo file zip: https://github.com/sveltejs/template/archive/master.zip
Ebbene si, niente npm install iniziale di framework, niente CLI per il setup del progetto, solo un piccolissimo zip che contiene già il necessario per iniziare. Basta entrare nella cartella dello zip, lanciare un npm install e un npm run dev. Io ho usato node V12.19.0 per questo test.
Aprire il file scr/app.svelte ricorderà a qualcuno un file Vue 2.0: c’è la sezione di script, l’HTML e la sezione di styling. È molto semplice capire come una variabile nella sezione script sia poi renderizzata nell’HTML.
Visto che, come sviluppatore, una delle cose più abituali è leggere dei dati da una qualche fonte e rappresentarli sulla pagina, ho deciso di scrivere un piccolo componente che legge una API pubblica, e ne scrive il contenuto sulla pagina di esempio.
Ho creato una cartella src/components, e al suo interno un file DataRead.svelte.
Questo è il contenuto della sezione di script
Come si può notare, non c’è nessun concetto nuovo: l’import di un hook di lifecycle da svelte, e al suo interno il fetch di un json pubblico che rappresenta i prezzi correnti del bitcoin.
La sezione HMTL è “implicita”, non ci sono tag da dichiarare, la pagina stessa è già HTML.
I tag script e style sono usati da sempre nelle pagine html standard ed è quello che continuiamo a fare, per cui il resto della pagina apparirà così:
Gli elementi #if e #each sono propri di svelte, e non c’è bisogno di commentarli, essendo cose viste più volte in ogni framework di sviluppo. Quello che facciamo, in pratica, è scrivere un titolo, una data di ultimo update dei dati, e infine stampare i tassi di conversione del bitcoin nelle tre valute disponibili.
Scritto il nostro bellissimo componente, non ci resta che importarlo sulla pagina principale della nostra applicazione. Aggiungo nella sezione script di App.svelte il seguente import:
A questo punto io ho a disposizione nella mia pagina il componente DataRead e posso usarlo semplicemente in questo modo:
Ovviamente, mentre faccio cambiamenti alla pagina, l’hot reload di svelte si preoccupa di aggiornare la build e la pagina sul browser, ed ecco apparire i nostri dati di cambio valuta.
La cosa migliore? se io volessi integrare questo componente in un’altra applicazione, scritta in Vue, o Angular, avrei bisogno di includere nell’HTML solo il Javascript generato da npm run build e nient’altro. Il compilatore di svelte creerà un file di puro javascript, interpretabile senza altre dipendenze.
