SvelteJS est un framework JavaScript développé par Rich Harris, qui se différencie de ses concurrents grâce à un concept assez simple : au lieu de charger une librarie dans le navigateur qui va interpréter le code (comme peuvent le faire React, Vue et Angular), la compilation du code est effectuée en amont, lors du développement, et le code généré via Svelte est directement "compris" par le navigateur, sans dépendance de framework.

Pas de virtual DOM

Lorsqu'on package une application développée avec SvelteJS, on obtient un bundle beaucoup plus léger et rapide, ce qui est logique étant donné que Svelte génère du JavaScript vanilla. Les performances sont également au rendez-vous : Svelte n'utilise pas de Virtual DOM, un concept qu'utilisent React et Vue et qui permet d'utiliser un second DOM conservé en mémoire. Ce DOM virtuel est comparé au vrai DOM du navigateur, qui est mis à jour dès que des différences sont constatées entre le DOM virtuel et le DOM réel.

Cette utilisation de DOM virtuel, même si elle est performante, ne tient pas la comparaison avec l´approche de Svelte, qui va mettre à jour une partie du véritable DOM dès que nécessaire, sans couche supplémentaire requise.

Voici un exemple de code implémentant un simple compteur :

<script>
    let count = 0;

    function handleClick() {
        count += 1;
    }
</script>

<button on:click={handleClick}>
    Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Plusieurs choses à noter :

• la syntaxe permettant de faire le lien entre la logique et la vue est assez classique, des accolades permettent d'accéder directement aux variables déclarées dans la partie script.
• les fonctionnalités de cet exemple (déclaration de variable, de fonction) sont directement accessibles via du code JavaScript vanilla : pas besoin à ce niveau de sucre syntaxique pour expliquer au framework qu'on souhaite déclarer des variables ou des fonctions et les manipuler. La syntaxe qui en résulte est très claire pour quiconque est familier avec JavaScript.

Documentation très claire

La documentation est non seulement claire, mais inclut un tutoriel sous forme de REPL permettant de tester en ligne les fonctionnalités du framework et de visualiser immédiatement le rendu qui en résulte.

Des exemples de code sont également fournis, ce qui permet d'avoir une vue claire sur les différentes fonctionnalités que propose le framework.

Qu'est-ce qu'on attend pour migrer ?

Sur le papier on ne voit que des avantages, alors pourquoi attendre pour migrer, ou démarrer un nouveau projet avec Svelte ? Malgré une communauté grandissante (44k étoiles sur Github), l'écosystème n'est pas aussi vaste que la concurrence : il n'est pas aussi aisé de trouver des plugins pour Svelte que pour React par exemple. Dans un contexte projet ou les délais peuvent être assez serrés, devoir développer soi-même des composants qui auraient pu être disponibles off the shelf peut représenter un frein.

Par ailleurs, la mise en place de fonctionnalités communes peut se révéler chaotique : j'ai mis un certain temps à réussir à faire fonctionner un projet de départ incluant un routeur, du hot reloading et SASS. Avec Vue, ces fonctionnalités sont disponibles immédiatement via le CLI fourni, ce qui représente un gain de temps non négligeable. J'imagine que ces petits défauts disparaîtront au fur et à mesure que l'outil gagnera en maturité.

Si je devais commencer un projet front-end aujourd'hui je ne pense pas que j'utiliserais Svelte. Mais la philosophie de l'outil et ses performances rendent cet outil très prometteur, et son évolution sera à suivre dans les prochains mois.