Svelte.js : introduction au “compilateur en guise de framework”

6 min readNov 12, 2019

Depuis la sortie de sa version 3 en avril 2019, le “framework” Svelte fait de plus en plus parler de lui. De par sa légèreté et son approche à contre-pied des incontournables comme React ou Angular, l’étoile montante développée par Rich Harris, vous promet simplicité et rapidité, pour une meilleure expérience utilisateur et développeur. Et vous, vous laisserez-vous tenter par Svelte.js ?

Note : Cet article se focalise sur l’aspect non-technique de Svelte.js. Pour des points plus techniques, vous pouvez vous référer à la conférence d’Alexis Jacomy, au Crash Course ou à mon POC d’application Pomodoro (liens en fin d’article).

Un peu d’histoire pour commencer

Rich Harris, développeur Front au New York Times, dans sa quête de performance et de bonne expérience utilisateur, suite à un Tweet de Mike Taylor publié en 2012, a finalement réalisé que “supprimer un JPEG pour économiser du temps de chargement” n’est pas équivalent à supprimer la même taille de JavaScript.

Il a donc commencé en 2016 une petite expérience, 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. Tout va alors très vite : mi-novembre 2016, il réalise son premier commit, 4 jours plus tard, la première beta est disponible, et 10 jours après cette beta, le 26 novembre 2016, il publie le premier article de blog détaillant son concept : Svelte était né. La v1.0.0 arrive 3 jours après ce billet. Ensuite, à l’occasion d’un gros nettoyage, la v2.0.0 est publiée en avril 2018, et un an plus tard, en avril 2019, une refonte complète permet la sortie de la version 3.0.0.

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

Mais alors ? Est-ce un framework ou un compilateur ?

Bonne question. A vrai dire c’est un peu entre les deux, du moins par rapport à la définition actuellement répandue de “framework”.

Svelte propose un véritable cadre de développement léger, avec des fonctionnalités puissantes et du “sucre syntaxique” pour faciliter le travail du développeur, ce qui en fait donc une sorte de “framework”.

Cependant Svelte a sa syntaxe propre, ce qui n’a pas manqué de créer de l’ironie sur Twitter avec l’idée satirique de SvelteScript lancée par Evan You, le créateur de Vue.js. Mais ce “code Svelte” est ensuite compilé en JavaScript “vanilla” par Svelte (ce qui en fait donc un compilateur). Bref, Svelte est à la frontière.

D’accord, mais en quoi Svelte peut-il être intéressant ?

Le plus gros avantage de Svelte est, comme son nom l’indique, le très faible poids de l’application une fois compilée, ce qui promet une vitesse de chargement impossible à atteindre avec des frameworks comme 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.

Cependant, Svelte est aussi rapide dans l’exécution du code. En effet, il compile votre code pour en faire quelque chose de probablement bien plus optimisé que ce que vous auriez fait seul de votre côté (tout en ayant vos fichiers source de “code Svelte” parfaitement lisibles et maintenables) et surtout : 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.

Ensuite, comme je l’ai mentionné dans le paragraphe précédent, Svelte vous permet du code plus lisible et maintenable, orienté composants. Pourquoi ? D’abord parce que vous regroupez tout ce qui concerne un composant dans un même fichier : logique (JavaScript), structure (HTML) et style (CSS), tout y passe ! Et ensuite car la philosophie de Svelte vous incite à écrire du code le plus concis et facile à comprendre possible.

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 ; et dernière petite chose, Svelte est compatible ES2018, donc oui, vous pouvez utiliser des “arrow functions”, des const et autres petites facilités fort agréables.

C’est bien beau tout ça, mais ton produit miracle, il a bien des défauts, non ?

Oui, rien n’est parfait dans la vie. Tout d’abord, le gros souci est son incompatibilité avec TypeScript (mon langage favori, c’est dire si j’ai mal !), cependant la communauté la réclame tellement que Rich Harris a prévu de l’intégrer dans ses développements futurs, et que certains membres ont pris le problème à bras le corps et ont commencé à essayer de concilier les deux dans des projets expérimentaux.

Edit 07/08/2020 : Svelte est enfin compatible officiellement avec TypeScript !

Ensuite, 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, c’est pas la joie.

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

Du coup, que peut-on attendre de Svelte à l’avenir ?

Le futur de Svelte c’est avant tout, à mes yeux, plus de maturité, une plus grande communauté et des ressources plus facilement disponibles.

Mais concrètement, quelques axes de travail sont déjà définis voire débutés pour certains.

Tout d’abord, Rich Harris a commencé à intégrer l’accessibilité web afin que les différents handicaps ne soient pas trop lésés en visitant une application réalisée grâce à Svelte (ce qui au passage améliore le référencement naturel, d’ailleurs). Mais il a également demandé l’aide de la communauté pour d’autres gros chantiers : Internationalisation (quelques projets issus de la communauté existent) ; une interface en ligne de commande, ou CLI dans le jargon, du genre Angular CLI ou create-react-app ; la compatibilité avec RxJS ; ou bien comme dit précédemment : l’intégration de TypeScript.

Enfin, quelques projets exotiques sortent Svelte du domaine de l’application Web classique. On peut citer :

Svelte Native, un effort pour faire tourner les applications Svelte sur smartphone à l’aide de NativeScript, pour un usage proche d’Ionic ou React Native
Sapper, un framework dérivé utilisant Svelte pour générer le rendu côté serveur
GL, une expérience pour utiliser WebGL dans Svelte

Edit 09/12/2020 : Sapper ne sortira jamais en v1.0, il est remplacé par SvelteKit, qui unifiera les développements de composants, d’applications SPA et d’applications SSR en un seul template au lieu de 2 différents.

Pour aller plus loin

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

[FR] La conférence d’Alexis Jacomy au DevFest Nantes 2019, qui aborde un angle orienté plutôt “Data Viz” : Vidéo, Slides. Je recommande vivement.
[FR] La conférence vidéo que j’ai présenté pour NiortWeb : Vidéo, Slides.
[FR] Une introduction rapide par la chaîne Dev Theory : Vidéo
[EN] Une Awesome List pleine de ressources très utiles
[EN] Le site officiel de Svelte, en particulier le tutoriel officiel (meilleur que la documentation), la doc, des exemples, une FAQ, le blog officiel et surtout, le meilleur bac à sable possible : la REPL !
[EN] Le repository GitHub officiel
[EN] Le Svelte Crash Course de Xiaoru Li : Article, Vidéos. Très instructif.
[EN] Le compte Twitter de Rich Harris
[FR] La formation Svelte.js 3 de CodeConcept. Un complément facultatif mais intéressant.
[EN] Une application Pomodoro que j’ai réalisé en guise de POC : GitHub, Démo
[EN] Un guide de Svelte sur Medium, abordant un point de vue plus technique : Article
[EN] Une comparaison technique avec React sur Medium : Article
[FR] Un RemoteClazz de Zenika plus similaire à mon point de vue : Vidéo. Je recommande.
[EN] Le Svelte Summit 2020, 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.

Conclusion

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.

En somme, cette technologie fondamentalement très différente des “frameworks stars du moment” de par sa philosophie, son approche et ses techniques employées, me passionne et me fait l’effet d’un outil à très grand potentiel, à surveiller.

Et vous, vous laisserez-vous tenter ?