Svelte est une librairie JavaScript qui va vous permettre de créer simplement des composants réactifs. La librairie venant de sortir en version 3 ce week-end je vous propose de la découvrir ensemble.
Les particularités de Svelte
Svelte propose un changement de paradigme assez important par rapport aux librairies existantes. Plutôt que de se reposer sur l'utilisation du VirtualDOM pour limiter les manipulation du DOM, Svelte va générer la logique de manipulation du DOM lors de la compilation du code. Cette approche apporte 2 bénéfices majeurs :
- Les performances sont améliorées car il y a moins de code à exécuter lors d'un changement d'état au sein d'un composant.
- Le poids du code final est largement inférieur et dépend du nombre de fonctionnalités utilisées dans le code. Cela permet à Svelte d'offrir un grand nombre de fonctionnalités sans forcément impacter le poids de toutes les applications.
Et ça ressemble à quoi ?
Un composant Svelte va s'écrire dans un fichier .svelte qui sera ensuite traduit par le compiler en code JavaScript. Afin de limiter l'utilisation d'outil la syntaxe utilise la syntaxe JavaScript classique avec certaines conventions.
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Compteur : {count} {count === 1 ? 'time' : 'times'}
</button>Par exemple, il est possible de déclarer des valeurs réactives dérivées d'autres valeur en préfixant la ligne par un $:
<script>
let count = 1;
// Le `$:` signifie "relance" quand ces valeurs changent
$: doubled = count * 2;
$: quadrupled = doubled * 2;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Compteur: {count}
</button>
<p>{count} * 2 = {doubled}</p>
<p>{doubled} * 2 = {quadrupled}</p>Si vous voulez découvrir la librairie en profondeur n'hésitez pas à faire un tour sur les tutoriels proposés par la documentation.
