Retour aux articles
  • 11.03.2021

Qu’est-ce que Svelte et comment fonctionne-t-il ?

Qu’est-ce que Svelte et comment fonctionne-t-il ?

Avant l'arrivée de React.js et Vue.js, la création de grandes applications web faciles à maintenir était encore assez difficile. Les fichiers JavaScript étaient difficiles à organiser et à déployer en production, et la manipulation du DOM était pénible.

React et Vue ont transformé les développeurs frontend en vedettes de la productivité, mais l'utilisation d'un DOM virtuel dans le navigateur entraîne des pénalités de performance. 

Svelte.js présente de nombreuses similitudes avec React et Vue, mais offre des avantages qui améliorent les performances tout en étant facile à apprendre et véritablement réactif.

Qu'est-ce que Svelte.js, comment fonctionne-t-il ?

 

 

Qu'est-ce que Svelte.js ?

Tout comme React et Vue, Svelte est un framework JavaScript offrant une approche productive pour faciliter la création d'interfaces frontend. Le principal avantage technique de Svelte est qu'il effectue la majeure partie de son travail lors de la compilation, ce qui se traduit par un JavaScript performant et convivial pour les navigateurs, avec des paquets de petite taille.

Si le processus de construction de Svelte est la plus grande innovation du framework, il est également très facile à apprendre, dispose d'une belle documentation et offre une excellente expérience aux développeurs.

Svelte.js : Les avantages

Voici les principaux avantages à l'utilisation de Svelte :

  • Le temps de construction est très rapide par rapport à React ou à d'autres frameworks. 
  • La taille des paquets est de plus en plus petite lorsqu'ils sont compressés par rapport à React. 
  • La logique personnalisée n'est pas nécessaire pour lier des classes.
  • L'utilisation du plugin rollup comme bundler.
  • L'intégration de CSS <style> dans le composant lui-même permet un style flexible
  • Lier des classes et des variables est relativement facile
  • La majeure partie de Svelte est constituée de JavaScript, HTML et CSS simples.
  • Mise en œuvre plus simple du magasin par rapport à l'API contextuelle de React, l'API contextuelle fournie plus de fonctionnalités, et Svelte pourrait être assez simple pour les scénarios courants.

Svelte.js : Les inconvénients

Voici les principaux inconvénients à l'utilisation de Svelte :

  • Le style d'utilisation des événements DOM peut également être gênant, car il faut suivre la syntaxe spécifique de Svelte au lieu d'utiliser la syntaxe JS prédéfinie. On ne peut pas utiliser directement onClick comme dans React, mais on doit utiliser une syntaxe spéciale
  • Svelte ne prend pas en compte les mises à jour de références et les mutations de tableaux. Les développeurs doivent y veiller activement et s'assurer que les tableaux sont réaffectés afin que l'interface utilisateur soit mise à jour.
  • Svelte est un framework jeune et récent avec un support minimal de la part de la communauté. Il ne prend donc pas en charge un large éventail de plugins et d'intégrations qui pourraient être nécessaires à une application de production lourde. 

Pourquoi choisir Svelte plutôt qu’un autre framework ?

Ce n'est pas parce que Svelte est nouveau qu'il remplace immédiatement tous les autres frameworks plus anciens et mieux établis. Il a cependant sa place sur le marché et peut s'avérer très utile pour de nombreux flux de travail.

  • Si la taille des paquets est un facteur important pour le développement de ton site, mais que tu as besoin de la réactivité offerte par les frameworks, Svelte est un très bon choix.
  • Si tu cherches quelque chose de simple qui t'aidera à comprendre les frameworks et te familiariser avec la manipulation des DOM.
  • Il est conçu pour fonctionner sur des appareils à très faible puissance/faible capacité.
  • Pour créer sa propre infrastructure, c'est-à-dire la gestion d'état et le routeur. 

Quand n'est-il pas opportun d'utiliser Svelte ?

  • Les équipes plus importantes qui ne veulent pas construire chaque fonctionnalité supplémentaire devraient pas songer à Svelte.js et se tourner par exemple vers Vue, car ils ont d'excellentes bibliothèques de routeurs et de gestion d'état.
  • Si tu as déjà un framework en place comme Vue ou React, il n'y a pas vraiment de raison de passer à Svelte car il n'offre aucune des fonctionnalités de ces frameworks.
  • Bien que Svelte soit plus proche de vanilla JS que tous les autres frameworks, il est toujours recommandé d'apprendre vanilla JS en premier afin de comprendre ce que Svelte et tous les autres frameworks font sous le capot.