Des applications légères et rapides avec Svelte
par Jérôme BOUKORRAS
Qu’est-ce que Svelte ? Encore un nouveau framework JS ? Pas vraiment.
Dans son approche, Svelte est différent. Techniquement déjà, il s’agit d’un compilateur et non d’un framework. Il permet de créer des applications web en pur JavaScript (surnommé Vanilla JS). La particularité de Svelte est qu’il s’efface lors du build de l’application. Ce qui signifie que le JavaScript envoyé à vos utilisat.eur.rice.s ne contient pas Svelte, mais juste du code Vanilla JS. Svelte permet de créer des applications légères et rapides sans bousculer vos habitudes de développement acquises avec React, Vue ou encore Angular.
Le projet Svelte et son pendant back-end Sapper ont été initiés par Rich Harris, un développeur New-Yorkais. Open source, ces projets sont maintenant constamment mis à jour par une importante communauté.
Afin de comprendre en quoi Svelte peut vous apporter beaucoup sur vos projets présents et futurs, une petite question s’impose :
Mais pourquoi utilise-t-on un framework JavaScript déjà ?
Le principe de base de la création d’une application web est le suivant : un serveur envoie au navigateur du contenu formaté en HTML, du CSS pour styler l’ensemble et du code JavaScript qui, une fois exécuté par le navigateur permet des interactions poussées pour l’utilisat.eur.rice. A chaque changement de page on recommence, ce qui peut, dans le cas d’applications lourdes, générer des chargements longs et désagréables.
Depuis quelques années maintenant, pour imiter le comportement des applications natives, nous créons de plus en plus de SPA (Single Page Application). Le principe est le suivant : le serveur n’envoie plus le contenu formaté en HTML mais juste une base en HTML qui appelle un fichier JavaScript. Ce dernier génère ensuite le template et le met à jour à chaque interaction de l’utilisat.eur.rice. Les chargements de pages ne sont donc désormais plus utiles dans ce genre d’application.
Il est tout à fait possible de créer ce genre d’application en pur JavaScript. Seulement cette tâche est assez pénible car il faut créer chaque élément puis le recréer à chaque événement tout en conservant les dits événement à chaque rafraîchissement du DOM. Un autre problème vient du fait qu’il existe des dizaines de manières différentes de faire ça en JavaScript, ce qui complique le déroulement d’un projet, chaque développeur ayant sa propre méthode. Des frameworks/librairies JS comme React, Vue ou encore Angular ont logiquement vu le jour pour compenser ces lacunes. Seulement, ces frameworks présentent des problèmes : Déjà, ils sont plutôt lourds à charger dans le navigateur.
Environ 30 KB Gzippé pour Vue, 40 KB pour React et 65 KB pour Angular. Ils sont aussi bien souvent accompagnés de dépendances plus ou moins indispensables comme par exemple Redux, Recompose ou RxJs qui alourdissent encore un peu le poids du fichier généré.
Ensuite, les librairies et frameworks populaires imposent une manière de penser l’application et guident les équipes de développement afin que tout le monde travaille de la même manière. C’est assurément un point positif pour le travail collaboratif, mais c’est également une manière de rendre compliquées certaines fonctions très simples à la base.
En quoi Svelte est différent des autres
Svelte tout en gardant la même utilisation est différent dans son approche. En effet, une application écrite avec Svelte, une fois compilée, ne contient pas Svelte ni de dépendance propre à Svelte. Le bundle JavaScript généré est donc plus léger que celui généré par un autre framework. Autre avantage, Svelte est beaucoup plus permissif dans la logique d’écriture du code. Seule la gestion du template, la partie réellement pénible de l’écriture d’une SPA, est réellement guidée.
Découverte de Svelte
Si l’on regarde attentivement le fichier package.json du Hello world fourni à l’installation d’un nouveau projet, on remarque que Svelte, à la différence de React ou encore Vue, est indiqué comme étant une devDependencies et non une dependencies, ce qui résume bien la manière de fonctionner de ce compilateur.
Svelte est également installé avec Rollup par défaut, qui est une alternative à Webpack conçue par les mêmes personnes que Svelte et en suivant la même vision concernant la légèreté, la simplicité et le minimalisme.
Le fichier main.js permet d’instancier notre application, de lui indiquer dans quel élément du DOM elle va s’insérer. On peut également lui donner des props qui seront injectées dans le premier composant. Ici on lui passe la propriété name avec la valeur world.
Composant
Ouvrons notre premier composant, App.svelte. À l’instar des composants Vue, il est découpé en trois parties : script, styles et enfin le template.
La partie script comporte les imports qui peuvent être des dépendances ou encore d’autres composants. Petite particularité de Svelte, les props importées dans un composant le sont à l’aide de l’expression export de JavaScript.
La partie script contient également tout le code JavaScript permettant à notre composant de fonctionner. Code utilisant l’API de Svelte ou alors du code maison.
La partie style contient du code CSS permettant de styler le composant. Ce code est scopé, les règles CSS que nous écrirons ici ne seront exécutées que sur notre composant et pas sur un autre. Svelte ajoute un hash devant chaque règle permettant cet isolement. Cette partie est facultative et personnellement, je préfère gérer mes styles dans un fichier à part pour éviter de « casser » la cascade. Mais cette fonctionnalité a le mérite d’exister et de proposer une solution pour gérer des styles au niveau du composant. Le compilateur propose également une bibliothèque d’animations et de transitions permettant rapidement de rendre une interface plus vivante sans y passer énormément de temps. Même si ça ne sera jamais aussi efficace que des animations écrites from scratch, cela peut s’avérer utile pour certains projets.
La partie template ressemble beaucoup à du JSX, il s’agit de code HTML « enrichi ». On peut ajouter des variables, des conditions, boucles et d’autres choses sympas que nous allons voir en détails.
Templating
Générer un template avec Svelte est vraiment très simple et intuitif. Voyons les principales fonctionnalités offertes par ce compilateur.
Afficher la valeur d’une variable ou le résultat d’une opération, se fait simplement avec des accolades (ex : {maVariable}).
Chaque fonction de boucle ou de condition commence par un # l’alternative par : et la fin par /. C’est un peu surprenant au début mais on s’y fait vite, la colorisation syntaxique aidant beaucoup. La fonction await est très agréable à utiliser et très pratique. Elle permet de conditionner l’affichage d’une partie de notre composant à la résolution d’une promise, une requête par exemple. Tant que cette promise n’est pas résolue, nous pouvons afficher un loader par exemple. On peut également faire un catch d’une erreur et afficher proprement une message d’erreur à nos utilisat.eur.rice.s. Et c’est une bonne chose pour la résilience de notre composant.
Les événements sont gérés avec “on:” suivi du nom de l’événement tel qu’il est nommé en JavaScript. Par exemple on:click, on:input ou encore on:submit. Un événement est associé à une fonction qui renvoie l’event.
Afficher un composant se fait de la même manière qu’avec React ou Vue, le composant est appelé comme s’il s’agissait d’une balise HTML avec ses props en plus. Comme dans Vue, les composants permettent également de gérer des slots.
Lifecycle
Dans la partie script d’un composant, Svelte propose un lifecycle. Il est possible d’appeler des fonctions au premier rendu du composant, avant sa destruction ou avant et après une mise à jour de ses propriétés.
Gérer un store
Svelte est fourni avec un gestionnaire de store plutôt épuré, minimaliste et simple à prendre en main. Il suffit de créer un store et de lui donner une valeur par défaut. Ensuite, il s’importe dans un composant simplement avec un import comme un module. Pour l’utiliser dans le composant il faut lui ajouter le préfixe $. Le composant sera automatiquement re-rendu une fois la valeur de ce store mise à jour, simple non ? Et pour mettre à jour cette valeur, Svelte fournit les méthodes set() et update(). Le minimalisme de cette fonctionnalité la rend extrêmement puissante, tout est possible car il n’y a quasiment aucune contrainte imposée par Svelte. Il est possible d’utiliser différents types de store (writable, readable etc.) mais aussi des custom stores, avec des méthodes dédiées et propres à votre projet.
Ce ne sont là que quelques exemples de ce que fournit Svelte, je vous invite à jeter un œil à la documentation qui est, chose rare, extrêmement bien faite. Elle regorge d’exemples concrets et permet de jouer avec Svelte directement dans le navigateur sans rien installer.
Retour d’expérience : Skizzle
Skizzle est un petit projet bientôt disponible en open source 🤘, cette application permet de regrouper et de surveiller toutes les pull requests de plusieurs équipes utilisant Azure DevOps. Il suffit de s’abonner à un repository, et dès qu’une PR est disponible sur ce repo, Skizzle vous envoie une notification et l’ajoute à votre timeline.
Cette application était, dans sa première version, écrite avec Angular. Avec un collègue de la guilde de dev AXA, nous avons entreprit de la réécrire avec Svelte. Le but était de la simplifier et d’en améliorer les performances. La réécriture était extrêmement rapide, et nous a permis de prendre du recul sur le fonctionnement de l’application. Au final, nous avons supprimé plusieurs dizaines de fichiers et dépendances. Le code résultant est beaucoup plus simple à lire et à comprendre. Nous avons également réduit grandement le poids du fichier de build passant de plusieurs MB, à une quinzaine de KB.
Ce projet avance maintenant beaucoup plus rapidement tant il est facile de développer de nouvelles fonctionnalités ou de maintenir les existantes.
Convaincu.e ?
Il y a un réel engouement autour de Svelte actuellement. De grandes entreprises commencent à l’utiliser pour leurs projets et des meetups dédiés s’organisent. La communauté s’active et propose des solutions permettant d’utiliser Svelte dans de plus en plus de projets (Sapper, Svelte native etc.).
Svelte est actuellement en version 3, une version mature et complète. Il est tout à fait possible aujourd’hui de livrer une application écrite avec Svelte en production. Sa légèreté permet d’envisager la création de widget. En effet, Svelte n’étant pas inclus dans le build du widget, si nous chargeons plusieurs widgets faits avec Svelte dans une page, nous n’allons pas charger plusieurs fois la même libraire.
Mais la grande force de Svelte c’est sa simplicité. La plupart du code « métier » est écrit en pur JavaScript, ce qui nous permet d’écrire le code le plus optimisé possible. Qui n’a jamais été frustré.e en écrivant du code React ou Angular : « Ah je pourrais écrire ça bien plus facilement avec du pur Javascript, mais je suis obligé.e d’utiliser cette librairie utilisée partout dans l’application » ? Ce qui permet d’envisager l’utilisation de Svelte pour la création d’une application complète. De par ses spécificités, Svelte peut s’inviter à la liste des solutions possibles au moment de choisir quels outils vous allez utiliser pour votre futur projet. Alors, pour votre prochaine super application, Svelte est peut-être la solution la plus adaptée, pourquoi ne pas lui laisser sa chance ?
👉 Auteur : Jérôme BOUKORRAS
