Innovazione senza compromessi: come SvelteKit ridefinisce le performance delle applicazioni web

È supportata anche la generazione ibrida delle pagine, combinando la pre-renderizzazione statica con il rendering dinamico prendendo il meglio di entrambi i mondi: quello che SvelteKit fa per ottimizzare le prestazioni anche in questo scenario è identificare quali punti della pagina possono subire delle modifiche e segnalare al browser di "mettersi in ascolto" solo su quei punti evitando di dover tenere in memoria l'intera pagina alla ricerca di quale elemento subirà una qualsiasi modifica. Questo, unito al fatto che il codice finale generato è JavaScript puro, riconosciuto nativamente dal browser, fa sì che il concetto di shadow-dom con SvelteKit scompaia rimuovendo un ulteriore layer di decodifica per il dispositivo dell'utente. Nella maggior parte degli altri framework di frontend lo shadow-dom è l’anello di congiunzione tra il framework e la pagina web. Quest’ultima riflette le modifiche fatte allo shadow-dom per aggiornare ciò che vede l’utente. Ovviamente questo passaggio ha un costo a livello di performance che cresce man mano che l’applicazione diventa più complessa. 

Di seguito sono riportate delle metriche riguardo i tempi di avvio dell’applicazione web e l’impatto sulla memoria del dispositivo utente. Avendo il codice generato una dimensione molto ridotta ed essendo codice JavaScript, l’avvio di un’applicazione sviluppata con SvelteKit è paragonabile a un’applicazione realizzata senza alcun framework! Come menzionato precedentemente, non dovendo il browser dedicarsi al rilevamento di un qualsiasi cambiamento, l’occupazione di memoria di una web app SvelteKit è nettamente inferiore a quella degli altri framework.

Da non sottovalutare, la Search-engine-optimization (SEO), resa molto più semplice e veloce grazie alla struttura del framework. I meta tag sono elementi HTML che forniscono informazioni ai motori di ricerca sul contenuto della pagina. Con SvelteKit, è possibile specificare e personalizzare i meta tag per ciascuna pagina dell'applicazione, inclusi il titolo, la descrizione e le parole chiave. Attenzione però. Non si parla solo di meta tag statici! SvelteKit, tramite la direttiva “svelte:head” permette di generare la pagina finale - quella mostrata all’utente e ai motori di ricerca per intenderci - inserendo all’interno dei tag relativi alla SEO qualsiasi tipo di informazione, anche generata dinamicamente. Va da sé che le pagine che non hanno un contenuto statico possono essere ottimizzate per i motori di ricerca alla stregua di pagine statiche. Questa flessibilità permette di ottimizzare i meta tag per migliorare la visibilità e la pertinenza dell'applicazione nei risultati di ricerca con un investimento di sviluppo bassissimo rispetto ad altri framework.

Avere un’esperienza di sviluppo soddisfacente è un altro aspetto su cui si fonda SvelteKit che infatti si distingue per la sua sintassi intuitiva e facile da imparare, che ricorda JavaScript (con supporto a TypeScript) e HTML tradizionali. Questo lo rende accessibile anche a sviluppatori con poca esperienza nei framework più complessi. Inoltre, SvelteKit offre tutta una serie di strumenti e convenzioni che semplificano l'ottimizzazione del codice, animazioni built-in, svariati adapter per il deploy su diversi ambienti e altro ancora. Queste caratteristiche riducono il tempo di apprendimento e migliorano la produttività degli sviluppatori, consentendo alle aziende di sviluppare soluzioni performanti in tempi più rapidi. 


Inoltre, SvelteKit supporta nativamente il routing basato su file-system, che consente agli sviluppatori di gestire facilmente la navigazione all'interno dell’applicazione senza necessità di dover configurare manualmente il routing. Benché questo forzi un determinato modo di organizzare i file all’interno di un progetto, il risultato è comunque quello di avere una struttura facilmente navigabile e che rispecchia al 100% quello che vedrà l’utente finale. Ovviamente è supportato anche il routing basato su parametri - per la generazione di pagine dinamiche - che possono essere configurati facilmente.