Svelte, un framework JavaScript inégalé sur sa rapidité

Partager

Article mis à jour le 7 juillet 2022 | Publié le 31 janvier 2020

Un framework JavaScript est apparu il y a quelques temps, faisant face directement à React et VueJs. Il s’agit du framework Svelte, qui concurrence ses aînés sur plusieurs points que nous allons vous détailler dans cet article.

Sachez que Svelte n’est pas tout nouveau, il a commencé à se faire connaître depuis sa dernière mise à jour, Svelte 3.0.

Ayant pour slogan “Cibernetically enhanced web apps”, Svelte se veut plus simple, plus réactif et moins chronophage dans son code.

Commençons par comprendre ce qu’est Svelte

Svelte, est défini comme un framework JavaScript, utilisé dans la création d’interfaces utilisateur réactives. Son objectif est de réduire considérablement le temps de chargement des applications.

Svelte, un framework ? Pas si sûr ! C’est aussi un compilateur JavaScript

Si on devait le classer plus précisément, Svelte serait un peu à part des frameworks JavaScript tels qu’on les connaît. En effet, son fonctionnement intègre un compilateur, l’élément important qui lui permet de se différencier de React, VueJs ou Angular par exemple.
Dans le cas de Svelte, il ne s’agit pas d’inclure une librairie dans son code pour permettre la compilation puisqu’elle est déjà présente.
Svelte est un framework dans un compilateur.

Pour être plus précis, des analyses comparatives ont nommés Svelte comme, le framework JavaScript le plus performant par rapport à React et VueJs.

Utilisation du “framework compilateur”

Pour programmer avec ce framework JavaScript, il faut utiliser l’extension de fichier crée pour lui : .svelte. Mais pas que ! En effet, Svelte a pour base de code le HTML, ce qui lui permet d’être tout aussi bien supporté dans un fichier de type .html.
Plus besoin de se prendre la tête, c’est comme bon vous semble !

Exemple d’un rendu avec Svelte

Framework JavaScript Svelte

Svelte va compiler ces lignes de code. Le fichier est envoyé au navigateur sous forme compilée dans une version de distribution afin d’obtenir le rendu.

Exemple d’une compilation JavaScript avec Svelte

Compilation Framework JavaScript Svelte

Les avantages de Svelte :

Son poids et sa vitesse de chargement

Un des gros avantages du framework Svelte est, comme son nom l’indique, son poids très léger. En effet, une fois le code compilé, l’application pèse 3 à 4 fois moins qu’avec une compilation sous React ou VueJs. Cela engendre sans surprise une amélioration de la vitesse de chargement de l’application pour l’utilisateur.

Au moment de l’écriture de cet article, un benchmark révèle que le framework est 35 fois plus rapide que React et 50 fois plus que VueJs. C’est déjà pas mal, mais qui sait, des changements peuvent encore venir pour, améliorer toujours plus ces résultats !

Un code différent pour répondre à certaines problématiques

En principe, moins on écrit de code, moins on a de chance de rencontrer de bugs n’est-ce pas ? Svelte est pensé sur cette idée. Le framework se veut simple et lisible.
L’écriture syntaxique diffère un peu de ce que l’on a l’habitude de voir, mais rien d’insurmontable, on s’y fait rapidement ?
Par exemple, les { } dans le HTML servent à indiquer que l’on veut récupérer le contenu de la variable.
En fait, Svelte veut vous permettre de réduire vos lignes de code pour que vos programmes restent lisibles. Et c’est réussi ! En moyenne, pour une fonction, le framework JavaScript aura besoin de 40% de lignes en moins que React.

L’utilisation de l’impératif plutôt que le déclaratif est aussi un paramètre qui différencie le framework.
Lorsque nous développons en langage déclaratif (HTML), Svelte prend les composants pour les traduire en langage de style impératif afin de les injecter directement dans le DOM. Mais si le code de l’application est impératif, comment Svelte peut-il détecter qu’il y a eu un changement ? Autrement dit, en reprenant le même exemple, comment le framework peut-il détecter que le champ de remplissage est complété ? Tout se joue au moment de la compilation.

Rendu Svelte

La compilation du framework JavaScript

Pour répondre à la question, Svelte est bien entendu, capable de savoir qu’un changement a eu lieu grâce à une variable qui lui est propre : variable = variable.
À première vue on peut se demander quel sens ça a. En effet, en faisant cela on demande à une variable de s’assigner à elle-même mais, cela va indiquer au framework qu’il faut relancer les vérifications afin de détecter d’éventuels changements à prendre en compte.

La compilation du code est faite automatiquement par le framework JavaScript, permettant au navigateur de ne pas avoir à faire tout le travail. C’est ce qui permet à Svelte d’obtenir des vitesses de chargement imbattables. Le code est compilé dans des petits modules JavaScript autonomes injectés dans le DOM directement.

Cette compilation se fait en temps réel, pendant l’écriture du code. Svelte ne demande donc aucune dépendance au navigateur pour se lancer. Encore un bon moyen de réduire le poids de l’application et d’améliorer son temps de chargement !

Le DOM

Le créateur de Svelte, Rich HARRIS, explique qu’il n’a pas voulu inclure de DOM virtuel pour la simple raison que cela représentait une couche de plus à exécuter lors du chargement de l’application.

Le DOM n’est donc plus manipulé directement par l’auteur du programme, mais par le framework JavaScript directement.

Pour résumer, Svelte, c’est une communauté qui s’agrandit depuis la mise en ligne de la version 3. Un créateur à l’écoute qui, suite aux demandes de la communauté, a prévu d’intégrer dans une prochaine mise à jour du framework une compatibilité avec TypeScript

Ce qu’on peut donc espérer pour les prochaines améliorations du framework JavaScript :

Les frameworks JavaScript vous intéressent ? Nous avons pleins d’autres articles : Localstack, Sylius Plus, Kendo UI ou encore Vue Js, rendez-vous sur notre blog, rubrique framework !

Vous serez peut-être aussi intéressé par ces articles

Image CSS Grid Layout vs Flexbox
Mis à jour le 7 juillet 2022

CSS Grid Layout vs Flexbox

Après de multiples changements et améliorations du CSS (Cascading Style Sheets), la dernière nouveauté est le CSS Grid Layout. Un grand...

Vignette Dot Js pour blog Numendo

L’événement DotJs n’en n’est plus à ses débuts. Populaire et toujours attendu, il fait partie des plus grandes conférences JS au...

Image LocalStack pour blog Numendo

LocalStack est un framework permettant aux développeurs de tester leur application Cloud sans passer par un environnement Cloud. Eh oui, du Cloud...

Ce site web stocke des données telles que les cookies pour activer les fonctionnalités nécessaires du site, y compris l'analyse. Vous pouvez modifier ces paramètres à tout moment ou accepter les paramètres par défaut.
Préférences en matière de dépôt de données

Lorsque vous visitez des sites Web, ils peuvent stocker ou récupérer des données dans votre navigateur. Ce stockage est souvent nécessaire pour la fonctionnalité de base du site Web.
L’analyse peut être utilisée comme stockage. La confidentialité est importante pour nous, vous avez donc la possibilité de désactiver ce type de stockage qui n’est pas être nécessaire pour le fonctionnement de base du site Web. Le blocage de l’analyse peut avoir un impact sur votre expérience sur le site Web.

Nous utilisons des cookies pour personnaliser votre expérience sur Numendo.