Svelte - Compiler pour mieux régner ?

Florent Bergé 16 déc. 2020

Svelte est un framework permettant de créer des Single Page Applications avec la promesse d’accélérer le rendu des pages web, tout en simplifiant les développements.

Fort de 37500 stars sur Github, nous allons voir s’il tient ses promesses.

Introduction

En 2020, il est difficile pour un framework de venir concurrencer les colosses que sont Angular, React ou encore Vue. Pourtant, j’ai découvert il y a peu un challenger qui pourrait bien jouer des coudes dans cette bataille : Svelte.

La première version de Svelte a été écrite en JavaScript et est sortie en novembre 2016. Depuis sa version 3, Svelte est développé en TypeScript et de nouvelles versions sortent régulièrement.

Bien que toujours peu connu, il est utilisé chez Spotify, Apple et bien sûr le New York Times, entreprise pour laquelle travaille Rich Harris et d’où viennent les besoins de créer Svelte.

Philosophie

Svelte prend le marché des frameworks web à contre-courant, en étant plus un compilateur qu’un framework. Ainsi, les traitements qui sont d’ordinaire effectués côté client au runtime, le sont à la compilation.

En effet, contrairement à React ou Vue, Svelte n’utilise pas de Virtual Dom mis à jour par identification des différences. Il utilise son propre mécanisme de détection des changements et agit directement sur le DOM visuel.

Le code compilé permet de gérer la création des composants, la génération d’évènements ou encore la mise à jour du DOM, dans un JavaScript natif. Ce qui le rend nativement interprétable par les navigateurs.

Au niveau des développements, plutôt que d’incorporer du HTML dans du JavaScript, Svelte retourne aux sources du développement Web, en incorporant du JavaScript dans les pages HTML.

Ces fichiers comportent l’extension .svelte, et sont basés sur la syntaxe d’un fichier HTML.

Svelte a été créé avec en tête les appareils tels que les smartwatches, smartTVs ou encore les smartFridges, ce qu’on appelle désormais Embedded Web; Ces objets qui font tourner des interfaces web, avec des capacités à peine suffisantes pour supporter les SPA créées avec des outils tels que React ou Angular.

D’après son créateur, il faut voir Svelte comme un langage à part et non pas comme un framework.

Par cela, il indique qu’il faut être prêt à se confronter à une courbe d’apprentissage différente, et à une nouvelle façon de penser ses développements.

Étant de base bien plus intéressé par les technologies Back-end que Front-end, je me suis surpris à “jouer” avec Svelte car sa philosophie et sa simplicité de mise en œuvre viennent à l’encontre des frameworks dont j’ai l’habitude.

Développer avec Svelte

Anatomie d’un fichier svelte

Un fichier source Svelte est découpé en 3 parties distinctes : La logique (balises script), le template (code html) et le style (balises style).

<script>
    // logic goes here
</script>

<style>
    /* styles go here */
</style>

<!-- markup (zero or more items) goes here -->

Cet article n’étant pas un tutoriel, je vous invite à aller voir la doc qui est très bien rédigée et suffisante pour vous lancer dans votre premier projet.

Composant simple et scoped style

La grammaire Svelte pousse à utiliser des composants légers et réutilisables et créer des pages étant des agrégats de ces composants. Il existe d’ailleurs une bibliothèque de composants Svelte en libre accès et l’intégration d’un composant se fait très simplement : en ajoutant une balise HTML au nom de l’import effectué dans la partie script, en spécifiant les props si nécessaire.

Ce découpage en composants permet de conserver des pages lisibles et petites.

De plus, Svelte pousse à la philosophie du “scoped style”, ce qui signifie que chaque composant a son style défini.

Déclaration réactive

Il est aussi possible de définir une déclaration réactive, ainsi le bloc suivant :

<script>
	export let num;

	// we don't need to declare `squared` and `cubed`
	// — Svelte does it for us
	$: squared = num * num;
	$: cubed = squared * num;
</script>

indique que les valeurs de squared et cubed sont recalculées dès lors que la valeur de num change.

Ici, Svelte ajoutera la déclaration des variables squared et cubed à la compilation.

Store intégré par défaut

Svelte possède un store prêt à l’emploi, qui permet d’échanger simplement des données entre les différents composants de l’application.

Gestion du lifecycle

Bien sûr, Svelte permet aussi la gestion du lifecycle des composants. Il est ainsi possible d’effectuer des actions au premier chargement d’un composant, ou lors des différentes phases de son cycle de vie.

Conditions, boucles et autres possibilités du markup

Comme dans tout bon Framework web post-2000, nous pouvons utiliser des conditions, des boucles, gérer les promises, etc... dans le markup.

Cependant, contrairement à Vue et Angular, les balises de conditions se trouvent en dehors des balises de mise en page. Ainsi, une boucle sera définie de la façon suivante :

{#each todos as todo}
	<p>{todo.text}</p>
{:else}
	<p>No tasks today!</p>
{/each}

Je trouve cette façon d’écrire plus naturelle, et plus lisible. Ceci est cependant un point de vue totalement personnel, certains développeurs souhaitant mélanger le markup avec une autre syntaxe.

Autres points positifs

Dans ce dernier point je vais vous citer quelques petits points positifs que j’ai trouvé très appréciables, cette liste n’est ni exhaustive, ni triée dans un ordre de valeur :

Le live reload m’a semblé plus rapide que ce que j’ai pu expérimenter avec Vue ou Angular.
La prise en main est assez simple.
Finalement, les différences avec du javascript/html vanilla sont moindres que pour des framework tels que React, qui nécessitent de réapprendre une façon de travailler. (Encore une fois, un point de vue personnel)
Le template servant de starter kit est très léger. Cela aide à mieux appréhender la création d’un projet.
L’instruction {@debug} permet des logs de debug dans le markup, ce qui permet d’avoir, au niveau du markup, un log lorsqu’une variable est modifiée, et permet de mettre en pause l’exécution si des devtools sont utilisés.
Les tests peuvent être effectués avec différentes librairies, notamment svelte-testing-library qui ne déroutera pas les amateurs de la Testing Library for Angular.

Autour de Svelte

Svelte App Maker

Sapper est un projet permettant de bootstrapper l’init d’un projet Svelte, en mettant en place une arborescence, un routeur basé sur la hiérarchie des fichiers, etc…

Les routeurs

En effet, les routeurs au pluriel. Actuellement, Svelte n’a pas de routeur officiel.

Cependant, de nombreux routeurs ont été mis à disposition par la communauté, chacun étant spécialisé pour certains besoins. Je ne peux que vous conseiller d’aller voir cette page, qui décrit 3 des principaux routeurs disponibles pour Svelte.

On ajoutera à cette liste Routify que j’ai testé et qui offre (à la manière de Sapper) un routing basé sur la structure des dossiers et fichiers, avec un projet starter démontrant de nombreuses fonctionnalités, et j’ai trouvé que c’était une très bonne base pour un projet Svelte.

Svelte Native

Un framework permettant de créer des applis mobiles basées sur Svelte.

Le futur de Svelte

Depuis l’été 2020, Svelte supporte officiellement TypeScript, il est donc possible d’utiliser ce langage dans les balises <script>, cette nouveauté va sans nul doute renforcer l’intérêt des développeurs pour ce framework.

La communauté Svelte commence donc à grandir et de plus en plus d’entreprises commencent à l’incorporer dans leur écosystème, il faut cependant noter que les entreprises comme Spotify, Apple ou le New York Times n’utilise pour l’instant Svelte que pour certaines parties de leurs sites.

Des retours d’expériences de développeurs ayant avec succès utilisé Svelte en production fleurissent sur la toile, et Sapper permet de gérer les anciens navigateurs (notamment IE).

Ces points devraient rassurer les quelques frileux qui hésitent à changer leurs frameworks habituels pour quelque chose de plus léger et rapide, et nous allons sans nul doute voir de plus en plus de sites utiliser Svelte, vu l’intérêt porté à ce projet, notamment depuis sa V3.

Mon avis et utilisation

Dans un monde où les frameworks d’applications Web se ressemblent (presque) tous, Svelte à l’avantage de vouloir nous faire changer de point de vue et ramener un peu de légèreté dans les applications web qui, fut un temps, étaient développées en réponse aux clients “lourds”.

Bien sûr, la communauté Svelte est encore jeune et moins conséquente que les communautés Angular ou Vue, mais si cet article vous a donné envie de changer vos habitudes pour essayer un framework permettant des Single Page Applications plus rapides et légères, amusez-vous avec Svelte sur des petits projets afin de vous faire la main.

Pour ma part, je vais continuer à m’en servir sur des projets perso, et pourquoi pas le pousser sur des projets clients une fois que je l’aurai mieux expérimenté et vu ses limitations.

Je pense que Svelte est une technologie qui mérite d’être connue et utilisée pour des projets petits et moyens, mais il faut sûrement attendre qu’il gagne en maturité et que sa communauté continue de grandir pour pouvoir l’utiliser sur des projets complexes, ou alors prendre le temps de valider qu’il répond à tous les besoins nécessaires avant de se lancer sur des projets plus ambitieux.

Pour aller plus loin

Je vous laisse vous faire votre avis sur Svelte en expérimentant avec les liens suivants :

Sources :

https://gist.github.com/Rich-Harris/0f910048478c2a6505d1c32185b61934
https://www.numendo.com/blog/front/svelte-un-framework-javascript-inegale-sur-sa-rapidite/
https://svelte.dev
http://www.meanjs.fr/svelte-js-le-compilateur-qui-defie-les-frameworks-front/
https://github.com/sveltejs/svelte
https://www.youtube.com/watch?v=luM5uobewhA