Let's talk
  • [ Tech ]
  • [ Svelte ]

Svelte : un framework léger et réactif

Antonin Savoie

Publié le 25 mars 2024

Le framework JavaScript Svelte suscite beaucoup d’intérêt dans la communauté tech. Créé en 2016 par Rich Harris, Svelte se positionne comme une alternative à d’autres frameworks comme React ou Vue.js. Ses particularités font de Svelte.js un outil performant et réactif.

Son fonctionnement s’apparente à celui d’un compilateur, ce qui le différencie de la concurrence. Relativement simple à prendre en main, Svelte demande tout de même un temps d’adaptation. Dans cet article, nous nous intéresserons au fonctionnement de Svelte, aux avantages liés à son usage et ses inconvénients.

Le fonctionnement de Svelte

Svelte, un compilateur de code

Contrairement à React ou Vue, Svelte n’utilise pas de DOM virtuel. Le navigateur a donc beaucoup moins d’interactions à calculer. Cela rend Svelte plus léger et plus performant. Il est capable de mettre n’importe quel morceau du DOM à jour. Ainsi, il fonctionne davantage comme un compilateur.

En effet, Svelte est basé sur la compilation du code lors de la construction de l’application . Il n’a donc pas besoin d’interpréter le code au moment de l’exécution. Il transforme les composants déclaratifs en code qui met automatiquement le DOM à jour.

Ce code compilé est transmis au navigateur dans un JavaScript natif. Aucun code supplémentaire ajouté n’a besoin d’être exécuté dans le navigateur quand l’application met à jour le DOM. Cela rend le travail avec Svelte rapide et réactif.

La création d’applications dans Svelte est assez simple et rapide. Par défaut, le framework supporte Typescript, Eslint, Prettier, Readywright et Vitest.

L’idéal est d’utiliser Svelte Kit framework sur Svelte. Il met à disposition le routing, le rendering, de la RWA et d’autres fonctionnalités embarquées par défaut.

Templating : variables et attributs

Les variables sont affichées entre brackets. Les attributs supportent certains raccourcis. Dans Svelte, il y a une partie en HTML pour l’ajout des balises. Les variables sont à entrer dans la partie script.

Templating : conditions et boucles

La syntaxe particulière diffère de ce que l’on peut trouver dans Vue.js.

Réactivité : variable et déclaration

Dès que la variable est modifiée, le template se met à jour.

Réactivité sur les statements

Svelte utilise le symbole “$:” Cela ouvre un bloc de code et permet de le rendre réactif en fonction des variables utilisées.

Réactivité : tableaux et objets

Elle est plutôt de bas niveau sur Svelte. Par défaut, un tableau n’est pas réactif.

Composants

Il faut ouvrir un fichier (components/Nested.svelte). Dans la page où l’on souhaite l’utiliser, on vient importer le composant comme un fichier classique. Il s’utilise ensuite comme une balise HTML. Les composants peuvent avoir des props et déclarer des props. Cela se fait avec l’export d’une variable.

Événements

La gestion des événements est assez semblable à Vue.js. Ils peuvent être déclarés sur n’importe quelle balise.

Événements de composants

Rien n’est fait par défaut. Il faut venir importer une fonction depuis Svelte et créer un dispatcher. Comme dans Vue.js, les événements ne remontent que d’un seul niveau et ne peuvent pas être propagés.

Binding

Le binding est souvent utilisé, par exemple, sur des éléments de formulaire. La maj est faite à tous les endroits où l’élément est utilisé.

Évènement du cycle de vie

C’est assez simple. Il faut se servir de la balise {onMount}.

Le context API

Il s’agit d’une façon de rendre les variables et les évènements disponibles dans un enfant ou un sous-enfant sans devoir propager en props sur 8 niveaux. Depuis Svelte, il faut récupérer la fonction “setContext” et dans cette fonction, ajouter les valeurs et fonctions.

Pour plus de détail, vous pouvez vous référer à la documentation disponible sur https://svelte.dev/examples/hello-world.

Les avantages et les inconvénients de Svelte

Les avantages de Svelte

  • Svelte est très léger. Grâce au code compilé, le poids de l’application développée est beaucoup moins lourd. Cela permet d’avoir un temps de chargement et d’exécution beaucoup plus rapide.
  • Le framework est également hyper réactif pour une performance élevée avec la rédaction du code JavaScript en temps réel. Cela apporte une meilleure expérience utilisateur.
  • Svelte est un framework moins verbeux que ses concurrents. Il y a moins de lignes de code à écrire, car certains concepts sont intégrés directement dans le code HTML.
    Il offre un bon environnement de travail avec un HMR et un débogueur Chrome.
  • Enfin, Svelte.js est facile à prendre en main malgré des différences de syntaxe qui peuvent surprendre au début. Comparé à React ou Vue.js, il ne manque rien pour développer un projet d’application avec Svelte.

Les inconvénients de Svelte

  • La réactivité du framework peut parfois être déstabilisante. Dans son fonctionnement, Svelte propose moins de cadre que ses concurrents et demande donc une très bonne organisation.
  • Svelte est sans doute plus adapté aux applications de petite taille ou de taille moyenne. Son utilisation sur un projet plus ambitieux avec de nombreuses fonctionnalités est peut-être plus problématique.
  • Si sa prise en main est relativement simple, l’apprentissage peut être freiné par la syntaxe spécifique au framework.
  • Il n’existe pas de gestion d’async dans les reactive statements.
  • La communauté Svelte est restreinte. Il y a donc beaucoup moins de documentation et de contribution que pour les autres frameworks. Cependant, pour travailler sur vos premiers projets, le site officiel de Svelte offre une documentation bien faite, notamment un tutoriel interactif.

Svelte, un outil performant

Si l’on compare Svelte aux frameworks JavaScript comme React et Vue.js, sa réactivité est impressionnante. En tant que compilateur de code, il s’avère léger. Le résultat est un gain de temps sur la vitesse de chargement et d’exécution des applications. Cela donne une meilleure expérience utilisateur.
Doté d’un bon environnement de développement, Svelte.js a toutefois quelques particularités. Sa syntaxe spécifique peut surprendre, mais il est malgré tout simple à prendre en main.
Ce framework semble idéal pour un travail sur des applications de petite taille. Néanmoins, sur des projets d’applications très ambitieux, ce n’est sans doute pas la meilleure option.

Sources :

Contenus similaires