Vous déjà entendu parler de Svelte, le dernier framework JavaScript qui fait parler de lui, et voulez en savoir plus ? Connaitre son fonctionnement, voir s’il vaut le coup qu’on l’apprenne ? Vous êtes au bon endroit !
Dans cet article, nous allons décortiquer cette nouvelle techno, la comparer aux autres frameworks JavaScript pour vous dire si, oui ou non, vous devez vous diriger vers Svelte !
Svelte, qu’est-ce que c’est ?
Historique
Pour comprendre la façon dont a été pensé Svelte et son utilité, il est important de faire un point sur son histoire.
Svelte, dont la première version date de novembre 2016, a été créé par Rich Harris dans le but d’avoir un framework qui produise du code compilé ultra léger et rapide à l’exécution.
Une version 2 est sortie en avril 2018, et la version 3 du framework, actuellement utilisée, un an plus tard, en avril 2019.
Encore un framework JavaScript : celui de trop ?
Alors que JavaScript compte déjà plein de bibliothèques et de frameworks, on en sort encore un ?
En réalité, Svelte n’est pas tellement un framework, ou du moins pas comme ses principaux concurrents, Vue et Angular. Ni React, d’ailleurs, bien que ce dernier soit techniquement plus une bibliothèque qu’un framework.
La différence principale est que Svelte n’interprète pas le code à l’exécution, comme le font les autres frameworks JavaScript. Svelte, au moment du build, compile tout son code en code Vanilla JS. Ce qui signifie qu’il n’a pas besoin de moteur d’interprétation pour lire le code à la volée, c’est le moteur de rendu du navigateur web qui est utilisé.
Et c’est là une différence importante, qui est la raison du gain de vélocité qu’on obtient grâce à Svelte – qui était la motivation de création de cette techno.
Donc, Svelte a beau être encore un autre framework JavaScript, il est assez différents de ses cousins pour que l’on puisse dire que non, ce n’est pas celui de trop !
Le framework Svelte dans la technique
Si la façon dont le code Svelte est interprété est sa plus grande différence vis à vis des autres technos JavaScript, ce n’est pas la seule ! Tout comme React, Vue et Angular sont différents les uns les autres (que ça soit pour la gestion des routes, des stores, des évènements, etc.), Svelte a lui aussi ses propres caractéristiques techniques.
Les particularités de Svelte
Voyons maintenant, à l’aide d’exemples par du code, à quoi ressemble Svelte.
La structure du code
Les fichiers contenant du code Svelte (bien qu’étant du JavaScript), ont pour extension .svelte, comme Vue a son extension .vue.
Un fichier Svelte contient trois blocs, ou sections, aucune n’étant obligatoire pour le bon fonctionnement du fichier. Ces blocs sont le script (donc le code Svelte), du HTML (en mode Svelte), et du style CSS. Ainsi, un fichier Svelte complet sera composé de cette manière :
<script>
// logic goes here
</script>
<!-- markup (zero or more items) goes here -->
<style>
/* styles go here */
</style>
Cette structure n’est pas déroutante lorsqu’on maitrise déjà JavaScript, avec ou sans framework.
Quelques exemples en JavaScript Svelte
En Svelte, il est simple de rendre un élément “réactif” (au sens de Svelte, qui sera mis à jour au moment de l’update d’un composant), en le préfixant d’un $. Par exemple :
<script>
export let title;
// le `document.title` sera mis à jour
// dès que la propriété `title` est modifiée
$: document.title = title;
$: {
console.log(`multiple statements can be combined`);
console.log(`the current title is ${title}`);
}
</script>
Le style CSS
Une autre composante des fichiers Svelte, c’est donc le style, inclut dans la balise <style>. Là, rien de vraiment nouveau, il s’agit de CSS classique, hormis quelques différences.
Par exemple, on peut utiliser le mot-clé :global pour appliquer un style de manière globale à tous les éléments enfants du composant courant. Par exemple :
<style>
p {
/* this will only affect <p> elements in this component */
color: burlywood;
}
div :global(strong) {
/* this will apply to all <strong> elements, in any
component, that are inside <div> elements belonging
to this component */
color: goldenrod;
}
</style>
Le templating en Svelte
La troisième composante du fichier Svelte est donc celle qui sert au templating. Elle contient tous les éléments HTML, mais aussi également les autres composants qu’on souhaite inclure (le nom de ces derniers commenceront alors par une majuscule).
Voici un exemple de template Svelte qui contient plusieurs éléments différents : balises HTML, composants et affichage d’attributs :
<script>
import Widget from './Widget.svelte';
</script>
<div>
<Widget/>
<button disabled={!clickable}>is clickable? {clickable}</button>
</div>
Quant aux conditions et aux boucles, ils sont définis grâce au caractère #. Par exemple :
<!-- Exemple de condition -->
{#if answer === 42}
<p>what was the question?</p>
{/if}
<!-- Exemple de boucle -->
<ul>
{#each items as item}
<li>{item.name} x {item.qty}</li>
{/each}
</ul>
Pour prendre un dernier exemple, les évènements sont définis avec le mot-clés on: suivi par le nom JavaScript de l’évènement. Pour déclencher une action après un clic, on aura donc :
<script>
let count = 0;
function handleClick(event) {
count += 1;
}
</script>
<button on:click={handleClick}>
count: {count}
</button>
Le framework font-end Svelte est évidemment bien plus complet que ça, et si vous voulez voir tout ce qui le définit, rendez-vous ici !
Svelte VS les autres frameworks JavaScript
Maintenant qu’on sait tout ou presque de Svelte, comparons-le un peu aux autres frameworks ! Car peut-être hésitez vous entre plusieurs de ces technos front-end.
Passons en revue les avantages et inconvénients de Svelte, puis mettons le en concurrence avec les autres frameworks front.
Les avantages de Svelte
Mais quels sont les avantages, exactement, de ce framework front-end ?
On en a déjà parlé, l’avantage principal est sa rapidité d’exécution. Le fait qu’il n’ait pas besoin de moteur d’interprétation à la volée le rend bien plus rapide, c’est un fait.
Un autre avantage directement lié à cette caractéristique, c’est que les builds générés le sont en Vanilla, et sont donc bien plus compacts que ceux construits par les autres frameworks.
Comme l’ont montrés les quelques exemples de code précédents, Svelte n’est pas le framework le plus complexe à comprendre, ni à apprendre. Ce qui est un gros avantage lorsqu’on débarque dans un milieu où la concurrence est déjà forte.
Les inconvénients de Svelte
Mais Svelte n’a pas que des avantages, sinon tout le monde s’y mettrait !
Déjà, il est quelque peu handicapé par sa jeunesse, ayant commencé à se faire connaitre en 2018. Il est donc arrivé alors que les trois gros frameworks frontend étaient déjà bien installés, et se faire une place n’est donc pas simple pour lui.
Cette jeunesse limite aussi le nombre de bibliothèques et de composants disponibles pour lui (bien qu’il ait par exemple un site référencent les divers templates, composants, etc.).
Aussi, sa syntaxe, bien que plutôt simple, est radicalement différente de ses cousins React, Vue et Angular. Ce qui veut dire, pour un développeur venant d’une de ces trois technos, que c’est toute une techno qu’il faut réapprendre.
Frameworks JavaScript : Svelte VS Vue VS React VS Angular
Alors, quel framework faut-il choisir ? Que vous veniez déjà d’un de trois principaux frameworks JavaScript ou que vous soyez novice en la matière, vaut-il mieux se diriger vers Svelte ou être prudent et choisir un de ceux déjà bien installés ?
Il n’y a pas de bonne réponse à cette question. Comme pour chaque choix de stack technique, tout dépend des besoins, des moyens à dispositions et des envies.
Si vous devez travailler sur un gros projet, qui va nécessiter l’utilisation de bibliothèques externes et de la maintenance sur le long terme, il vaut mieux se diriger vers React, Vue ou Angular. Ils seront plus fiables, maintenus et ont une plus grosse communauté.
Mais si vous cherchez à tout prix la performance (par exemple, faire tourner une web app sur des devices peu puissants) tout en ayant des besoins plutôt classiques, Svelte fera l’affaire.
Svelte dans le futur
Lorsqu’on s’intéresse à un framework, lorsqu’on veut s’y mettre et l’apprendre, il faut aussi prendre en compte le futur dudit framework. S’il n’est pas maintenu, a très peu de contributeurs et pas de projets d’évolution en cours, peut-être vaut-il mieux d’abstenir.
Heureusement, ce n’est pas le cas de Svelte !
SvelteKit, le « vrai » framework JavaScript
Svelte est notamment en train de développer SvelteKit. SvelteKit a pour objectif de faire de Svelte un vrai framework, bien plus complet que ce qu’il est actuellement.
Toujours en développement, ce projet est bien la preuve que Svelte ne devrait pas s’éteindre de si tôt.
Développement mobile
On le sait, grâce aux technos hybrides, on peut développer des apps mobiles en codant en Angular, React ou Vue. C’est désormais également le cas avec Svelte, grâce à Svelte Native !
Cette techno, déjà opérationnelle, est régulièrement mise à jour, comme le montre son activité sur GitHub.
Comment apprendre le framework Svelte ?
Ce comparatif vous a convaincu d’apprendre Svelte ? Vu sa courbe d’apprentissage, si vous avez déjà de l’expérience avec d’autres frameworks, ça ne devrait pas être si compliqué.
Pour vous y aider, dirigez-vous déjà vers le tutoriel interactif mis à disposition par Svelte lui-même.
Vous pouvez aussi vous diriger vers des tutoriels vidéo sur YouTube, comme celui-ci, en anglais, ou celui-là, en français.
Avez-vous déjà eu l’occasion d’utiliser Svelte sur un projet ? Ou pensez-vous l’utiliser pour un prochain projet ? Dites-nous ce que vous pensez de cette techno !
