J'ai essayé Svelte

S'il y a une chose dont l'écosystème JavaScript ne manque pas, ce sont bien les frameworks.

– Roh la phrase cliché... Mais encore ?

(Sérieux je ne trouvais rien d'autre...)

Je travaille avec React depuis 2018, et j'ai ajouté NextJS à mes outils en 2020. C'était la suite logique.

J'ai pu expérimenter d'autres frameworks, notamment VueJS, mais je n'ai pas poussé les choses trop loin. Je voyais pas l'intérêt de cumuler plusieurs outils qui font la même chose.

Je suis quelqu'un de très simple : 1/ si l'outil fonctionne et 2/ s'il est adopté par un grand nombre d'entreprises, inutile de s'éparpiller.

Surtout quand on a au moins deux nouveaux frameworks par an...

Mais quand Svelte a débarqué dans l'écosystème JavaScript, j'ai été interpellé par la simplicité apparente du code. J'ai donc gardé ce framework quelque part en tête, me disant que je m'y essaierai bien un jour.

Un enfant et cinq déménagements plus tard, c'est enfin arrivé.

Comment tout a basculé

Il y a quelques jours, je voulais créer un petit outil pour un projet personnel mono-page (Single Page App). Je crée un projet sur React, et je commence à mettre en place les composants.

Et c'est en créant la première variable d'état que je bloque :

import { useState } from "react";

// ...

const [truc, setTruc] = useState(0);

Je me souviens d'un élève qui me demandait la veille ce que je pensais du framework Svelte. J'avais expliqué à quel point le code était connu pour être concis, et j'avais montré quelques exemples glanés sur un moteur de recherche.

Et dans Svelte, l'équivalent de la ligne de code ci-dessus, c'est ça :

let truc = 0;

Pas de fonction useState, pas de tableau (Alt Gr je te hais), pas de fonction de changement setTruc.

Juste une variable.

Et à ce moment précis, j'en ai eu assez. Je me souviens avoir supprimé le projet React sur-le-champ, et commencé à installer Svelte.

La suite de l'article est un post LinkedIn retravaillé qui communique mon ressenti après deux jours d'utilisation.

– Deux jours ?! Seulement ?

Oui, et c'est déjà assez pour remarquer certaines choses.

1/ Une mise en place rapide

Pour créer un composant, on tape du html dans un fichier .svelte, et c'est bon.

<p>Coucou</p>

<p>Ça va ?</p>

<p>Tranquille. Je teste <b>Svelte</b>.</p>

Pas besoin d'englober le contenu du composant dans une balise unique ou un fragment React (<>...</>).
Pas besoin de créer et d'exporter une fonction JavaScript : les composants Svelte se reconnaissent entre eux ! Il suffit juste de les importer où on veut.

En gros, en quelques secondes, vous avez un composant.

Même la phase d'initialisation de projet avec npm est l'affaire de quelques secondes... Bref, très rapide !

2/ Un code clair

Le composant (fichier .svelte) est du simple html (voir section précédente).
Une balise <script> suffit pour les variables et les fonctions :

<script>
    let truc = 0;

    function increment() {
        truc += 1;
    }
</script>

<p>Truc est égal à {truc}</p>

<button on:click={increment}>Augmenter</button>

Une balise <style> contient le CSS du composant.

<h1>Je vois rouge</h1>

<style>
    h1 {
        color: red;
    }
</style>

– C'est comme VueJS en fait...
– Oui

Et ça a ses avantages : pas besoin de fichier .css supplémentaire (vous pouvez, bien entendu), et... c'est du vrai CSS. Pas du JS qui essaie de passer pour du CSS, ou un template literal.

Il existe des balises très simples pour l'affichage conditionnel.

{#if loading === true}
    <Loader />
{:else if error !== null}
    <Error error={error} />
{:else}
    <h1>Bienvenue, mécréants !</h1>
{/if}

Et boucler une liste n'est pas aussi lourd que sur React qui oblige à utiliser Array.map() (et l'attribut key...).

<div class="list">
    {#each userList as user}
        <div class="user-row">{user.name}</div>
    {/each}
</div>

– C'est moche...

(Oui, mais on s'habitue. Ça aurait pu être pire...)

3/ Un travail plus rapide

Pas de boilerplate verbeux. Besoin d'une variable réactive ? Pas besoin de taper tout un useState à la React : let truc = ... dans la balise <script> suffit.

<script>
    // Ceci est une variable d'état interne au composant
    let truc = 0;
</script>

<p>Truc est égal à {truc}</p>

Besoin d'une prop (variable modifiable par un composant parent) ? Ajoutez export devant et ça fera l'affaire.

<script>
    // Ceci est une variable accessible par les props
    export let truc = 0;
</script>

<p>Truc est égal à {truc}</p>

4/ Des fonctionnalités sympa

On a accès à des variables globales appelées stores. Il suffit de les importer et on peut les afficher tout simplement avec le signe $, ou effectuer des changements avec des méthodes très claires comme truc.set() ou truc.update().
On peut gérer les effets de bord (useEffect dans React) avec $: qui se place avant une ligne de code.

<script>
    let truc = 0;
    
    // affiche la variable dans la console chaque fois qu'elle change
    $: console.log(truc)
</script>

Pour les utilisateurs de React, vous remarquerez qu'on n'a pas besoin de préciser les dépendances : Svelte comprend ce que vous essayez de faire (truc est impliqué ? pigé) !

Et pas besoin de Redux !

Le mot de la fin

En temps normal, deux jours serait considéré très peu pour avoir un avis éclairé, mais la vitesse d'adaptation était fulgurante. Svelte est tellement simple d'utilisation !

Il me reste encore à voir comment fonctionne le fetching, le SSR (avec le framework SvelteKit), etc... mais je peux déjà affirmer que côté client sur un projet statique, Svelte m'a conquis.

J'ai eu quelques soucis mais c'était parce que je débute et il m'est arrivé de partir en antipatterns...

– Antipattern ?!

(Les trucs à ne pas faire.)

En antipatterns donc, à cause d'habitudes prises sur d'autres frameworks. En fait, je perds plus de temps sur Svelte à cause des réflexes pris sur d'autres frameworks... Un débutant irait sûrement plus vite sur certains points.

Une fois les notions bien comprises, coder avec ce framework est du pur plaisir : on passe vraiment moins de temps à définir les choses pour simplement coder le fonctionnement de l'appli.

Et le développement, ça devrait être surtout ça.