Article

Svelte.js : une solution pour des applications web rapides

Depuis la sortie de sa version 3 en avril 2019, Svelte.js, l’étoile montante développée par Rich Harris, fait de plus en plus parler d’elle pour le développement d’applications web rapides. A mi-chemin entre framework et compilateur, Svelte vient bousculer les autres frameworks Javascript tels que Angular, Vue, Ractive ou React en permettant la création d’interfaces utilisateurs réactives avec : un code simple en HTML et CSS, exécuté rapidement pour des applications plus légères. Simplicité et rapidité sont la promesse de Svelte pour une meilleure expérience utilisateur et développeur. Nous vous détaillons tout dans la suite de cet article.

Comment est né Svelte.js ?

Commençons par un rapide point historique. C’est en 2012, à la suite d’un Tweet de Mike Taylor, que Rich Harris, développeur Front au New York Times, part du principe que supprimer un JPEG pour économiser du temps de chargement n'est pas équivalent à supprimer la même taille de Javascrit en raison du temps d'interprétation et d'exécution du code.

Toujours en quête de performance et de bonne expérience utilisateur, il se lance dans une expérience en 2016. Son idée ? Écrire un compilateur JavaScript qui produirait du code de qualité, le plus léger possible et sans abstraction du DOM, pour un chargement hyper court et des performances très rapides.

Dans la même année, il réalise son premier commit, sort la version beta et commence à parler de son projet avec un premier article de blog détaillant son concept. La v1.0.0 est alors disponible fin novembre 2016. Deux ans plus tard et après un gros nettoyage, la v2.0.0 est publiée en avril 2018. 

C’est avec la version 3.0.0, sortie en avril 2019, que Svelte.js commence à prendre de l’ampleur, à faire parler de lui, et à amorcer doucement un changement en profondeur dans le monde JavaScript.

En quoi Svelte peut-il être intéressant pour mes applications web ?

• Une application légère : le plus gros avantage de Svelte est, comme son nom l’indique, le très faible poids de l’application une fois compilée. Cela promet une meilleure vitesse de chargement par rapport à Angular, Vue.js ou React, qui embarquent un “runtime” en plus du code logique de l’application. Avec Svelte, vous n’avez que votre code avec juste ce qu’il faut de Svelte pour ne pas trop charger la balance !

• Du code concis et facile à comprendre : Svelte permet d’exploiter du code plus lisible et maintenable, orienté composants, en regroupant dans un même fichier : logique (JavaScript), structure (HTML) et style (CSS). La particularité est que tous ces éléments sont compilés dans un fichier .svelte

• Une exécution du code plus rapide : Il n’a pas de DOM virtuel, et ça, c’est une couche de moins à exécuter pour répercuter un changement sur la page.

Enfin, quelques avantages mineurs mais néanmoins appréciables : avec Svelte, peu de risques d’effets de bord graphiques car le style de chaque composant est isolé pour n’affecter que le composant, pas ses parents ni ses enfants.

Dernière petite chose, Svelte est compatible ES2018, donc oui, vous pouvez utiliser des “arrow functions”, des const et autres petites facilités fortes agréables.

Techniquement, comment ça se traduit ?

L'architecture Svelte est plus simple que d'autres librairies, par exemple : 

Svelte :

• Ouvrir un site web
• Afficher la page en utilisant du code JS pur

D’autres librairies :

• Ouvrir un site web
• Attendre que le code de construction du virtual DOM soit chargé
• Afficher la page en utilisant la librairie

Prenons l'exemple de Svelte versus React :

Source : Keshav Kumaresan via blog.bitsrc.io/

Comment se matérialise un code réalisé avec Svelte ? 

Pour une démonstration plus concrète, Thibault a réalisé une intervention lors d'un Meetup Niort Web que nous vous proposons de visionner : Vidéo, Slides.

Svelte a aussi ses petits défauts…

Il faut l’avouer, la communauté Svelte est moins importante que celles d’Angular, React ou Vue.js. Ça ne paraît pas grand-chose dit comme ça, mais pour se sortir d’une embûche, trouver des plugins ou composants déjà faits, ou avoir des ressources pour progresser, la tâche est plus complexe.

Enfin, la syntaxe peut être déroutante pour les aficionados des frameworks plus classiques. 

Finalement, Svelte.js est-il un framework Javascript ou un compilateur ?

Bonne question ! À vrai dire c’est un peu les deux, du moins par rapport à la définition actuellement répandue de “framework”, qui désigne un ensemble d'outils et de composants autonomes qui sert de base au développement d’un site web ou d’une application.

D’abord présenté et écrit comme un compilateur, Svelte propose un véritable cadre de développement (framework) léger, avec des fonctionnalités puissantes et du “sucre syntaxique” pour faciliter le travail du développeur. A la différence de React.js ou Vue.js, Svelte n’est pas une librairie.

Il permet ainsi de créer des applications web beaucoup plus performantes et plus légères en créant des composants, avec une syntaxe propre .svelte et en les compilant en JavaScript. En somme, Svelte est à la frontière entre un framework et un compilateur.

Que peut-on attendre de Svelte.js pour l’avenir ?

Ce que l’on peut souhaiter à Rich Harris pour l’avenir de Svelte, c’est : plus de maturité, une plus grande communauté et des ressources plus facilement disponibles.

En résumé, Svelte.js est un framework de plus en plus populaire, bien qu’encore jeune et pas totalement mature, qui est ouvert à contribution et qui offre légèreté, simplicité et performances.

Il tend à sortir du simple cadre des applications Web dans un avenir plus ou moins proche, et, ce que beaucoup de développeurs s’accordent à dire : il sera probablement une source d’inspiration pour de futurs frameworks.

Cette technologie fondamentalement très différente des “frameworks stars du moment” est à surveiller et à tester sur des projets de petite taille. Pour des projets d’envergure, il vous est tout de même plutôt conseillé de vous orienter vers des technologies plus fiables et éprouvées comme React ou Angular.

Alors, vous laisserez-vous tenter ?

--

Pour aller plus loin

Afin d’explorer le sujet plus profondément, voici quelques liens intéressants :

• [FR] Consultez le test Pomodoro réalisé par Thibault, une technique de gestion du temps qui se base sur l'usage d'un minuteur permettant de respecter des périodes de 25 minutes pour conserver votre concentration. Le repository sur Github.
• [FR] La conférence d’Alexis Jacomy au DevFest Nantes 2019, qui aborde un angle orienté plutôt “Data Viz” : Vidéo, Slides. 
• [EN] Le site officiel de Svelte, en particulier le tutoriel officiel (meilleur que la documentation), la doc, des exemples, une FAQ, le blog officiel, un lien vers le repository, et surtout, le meilleur bac à sable possible : la REPL !
• [EN] Le Svelte Crash Course de Xiaoru Li : Article, Vidéos. Très instructif.
• [EN] Un guide de Svelte sur Medium, abordant un point de vue plus technique : Article
• [EN] Le Svelte Summit, un événement virtuel et gratuit d’une journée où les spécialistes de Svelte ont présenté des sujets pointus et où Rich Harris a évoqué le futur de Svelte : Vidéos.