Comment Svelte prépare l'avenir de JavaScript

Frameworks JavaScript traditionnels : explications

Les frameworks JavaScript traditionnels reposent sur un système de bundling permettant de livrer les fichiers de l'application au navigateur. Cela implique de transformer et regrouper les fichiers sources en bundles optimisés à l'aide d'un outil de bundling, traditionnellement Webpack. Ainsi, les fichiers JavaScriptLangage de scripting orienté objet sont regroupés en bundles qui seront livrés aux navigateurs. Cependant, les frameworks JavaScript traditionnels nécessitent des bibliothèques d'exécution (comme React DOM ou AngularAngular est un framework de développement JavaScript populaire basé sur TypeScript. Runtime) pour interpréter et exécuter le code source reçu dans le navigateur. Les bundles générés incluent donc non seulement le code source de l'application, mais aussi les bibliothèques d'exécution, ce qui a progressivement alourdi la taille des bundles.

Qu'est-ce que Svelte ?

L'un des objectifs de Svelte est d'optimiser l'approche des frameworks traditionnels en allégeant la taille des bundles, notamment en se débarrassant des bibliothèques d'exécution. Au lieu de créer du JavaScript qui sera interprété par une bibliothèque d'exécution dans le navigateur, Svelte compile les fichiers en code JavaScript pur lors du build. Contrairement à ses homologues, Svelte est donc plus un compilateur qu'un framework. Il produit des applications plus légères et performantes à partir de son propre langage. 

SvelteKit, le framework officiel Svelte !

SvelteKit est à Svelte ce que Nuxt est à Vue, un framework vous permettant d'exploiter pleinement le potentiel de Svelte dans des applications plus ambitieuses et complexes. Parmi les fonctionnalités essentielles de SvelteKit, on peut compter :

Gestion du routage

Le système de routage est basé sur l'arborescence des fichiers. Cela signifie que l'arborescence constatée dans les fichiers de code représente exactement l'arborescence des pages disponibles pour l'utilisateur. Ainsi, chaque fichier avec la syntaxe +page.svelte représentera une nouvelle page de votre application. 

Par défaut, SvelteKit gère le routage côté client, comme un framework SPA, au lieu de se reposer sur le navigateur, il intercepte lui-même les actions de navigation et gère le chargement des modules. En revanche, il s'en sert aussi pour apporter de la flexibilité au moteur de rendu de l'application.

Méthodes de rendu

La gestion du chargement d'une page est entièrement personnalisable. L'une des grandes forces de SvelteKit est de proposer une modularité des méthodes de rendu. Il en existe plusieurs et il est possible de les combiner :

• CSR (Client Side Rendering) : Rendu côté navigateur, offre une meilleure réactivité mais est moins optimisé et moins adapté au SEO.
• SSR (Server Side Rendering) : Rendu côté serveur à la demande, privilégié pour le référencement et l'accessibilité des pages web.
• SSG (Static Site Generation) : Rendu de page statique à l'étape de build côté serveur. Un site entièrement généré de cette façon ne dépend plus d'un serveur mais simplement d'un CDN pour délivrer ses pages. 
  

Globalement, SvelteKit offre la possibilité d'utiliser le pre-rendering sur chaque page de votre application.

Hydratation

Svelte propose également une mécanique activée par défaut lors de l'utilisation du SSR appelée Hydration. Lors du chargement d'une page côté client, le fonctionnement traditionnel consiste à récupérer la page HTMLHTML (HyperText Markup Language) est un langage permettant de décrire le découpage d'une page web., qui va elle-même requêter le contenu dynamique au serveur une fois reçue par le navigateur. Le SSR transforme ce double aller-retour en un seul en envoyant une page et ses données en un seul appel. L'hydratation permet d'ajouter la réactivité dans la page une fois le contenu réceptionné par le client. 

Performances

SvelteKit est plein de fonctionnalités conçues pour améliorer la performance de votre application. Parmi certaines fonctionnalités, certaines offrent un avantage structurel comme le code splitting ou le link preloading. L'architecture de Svelte est pensée pour charger le strict minimum et va donc créer une architecture constituée de morceaux de codes à la granularité la plus petite possible.

Sveltekit : notre avis

SvelteKit est un représentant du nouveau paradigme instauré par les frameworks JavaScript modernes. Son architecture a été pensée avant tout pour la performance et l'optimisation du FCP (First Contentful Paint) et autres métriques impactant le ressenti des développeurs et utilisateurs. Le succès de Svelte fait également écho à la popularité grandissante de Vite.js comme nouvel outil de bundling. Cette petite révolution est déjà suffisamment engagée pour que même de très gros frameworks comme Angular repensent entièrement leur architecture afin d'optimiser les performances. Les différences de performances entre SvelteKit et Next ont été étudiées dans un papier de recherche qui inclut également Astro. Il existe également un benchmark javascript comparant les performances de Svelte et ses concurrents dans de nombreux domaines de rendu.

Vous avez un projet de développement ? N'hésitez pas à contacter nos experts !