Svelte : La technologie frontend du futur ?
22 Juillet 2023
Le front-end, pour moi, a toujours été une bête noire. Entre les différentes contraintes de compatibilité entre navigateurs, le style CSS qui semble parfois résister à toute logique et la gestion complexe des états dans les applications, je dois avouer que j'évitais autant que possible cette facette du développement. Cependant, il y a quelques semaines, j'ai finalement pris une décision : il est temps de plonger tête la première dans le monde du front-end. C'est ainsi que j'ai découvert Svelte (et d'autre techno super cool dont je vous parlerai peut être). Dans ce post, je souhaite partager avec vous pourquoi Svelte est si spécial et pourquoi certains experts le voient-ils comme la technologie frontend du futur ? Accrochez-vous, car Svelte pourrait bien changer la façon dont vous abordez le développement front-end !
1. Le coup de foudre de la communauté en 2022 :
En 2022, Svelte a suscité un véritable engouement parmi les développeurs du monde entier. Sa simplicité d'utilisation et son approche novatrice du rendu des composants ont conquis de nombreux adeptes. Grâce à sa popularité croissante, Svelte est devenu le framework JavaScript le plus aimé de cette année.
2. Un changement de paradigme :
L'une des caractéristiques uniques de Svelte est son approche de compilation, qui lui permet de se distinguer des autres frameworks. Contrairement aux frameworks modernes tels que React, Svelte n'utilise pas de Virtual DOM (VDOM). En effet, lors du processus de compilation, Svelte génère directement le code JavaScript optimisé à partir des composants déclarés dans le langage de balisage Svelte. Cette approche innovante élimine le besoin d'une bibliothèque de runtime, ce qui se traduit par des performances plus rapides et une expérience utilisateur plus fluide.
Svelte diffère des autres framework en adoptant une approche plus traditionnelle. Alors que la plupart des frameworks modernes, y compris React, utilisent le JSX (JavaScript XML) pour écrire du HTML dans du JavaScript, Svelte revient à l'approche initiale consistant à écrire du JavaScript directement dans de l'HTML. Cela signifie que dans Svelte, vous écrivez du code JavaScript natif dans vos fichiers de composants, sans avoir besoin d'une syntaxe supplémentaire pour déclarer les éléments HTML.
3. Courbe d'apprentissage, pour un connaisseur d'HTML, CSS et JS :
Si vous avez déjà des compétences en HTML, CSS et JavaScript, la courbe d'apprentissage de Svelte est relativement douce. La syntaxe est familière (cf 2) et la simplicité de Svelte vous permet de vous concentrer davantage sur la logique métier de votre application plutôt que sur la complexité du framework.
4. Moins de code, plus de clarté :
L'un des avantages les plus marquants de Svelte est la quantité réduite de code nécessaire pour réaliser les mêmes tâches que dans des frameworks plus traditionnels. Svelte élimine les couches d'abstraction supplémentaires, ce qui se traduit par un code plus concis et plus lisible. Cela facilite également la maintenance et réduit le risque d'erreurs.
1. Absence de state explicite :
L'un des aspects les plus frappants de Svelte est l'absence de gestion explicite de l'état. Contrairement à React, où vous devez utiliser le useState ou useReducer pour déclarer et gérer l'état, Svelte introduit automatiquement des variables réactives sans que vous ayez à les déclarer explicitement. Cela allège l'écriture et simplifie la vie des développeurs.
<!-- compteur.svelte -->
<script>
let count = 0; // Svelte détecte automatiquement qu'il s'agit d'une variable réactive
function increment() {
count += 1;
}
</script>
<button on:click={increment}> <!-- on aurait aussi pu écrire : onClick={() => count+=1} -->
Cliquez ici ! ({count})
</button>
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Cliquez ici ! ({count})
</button>
);
}
2. Les Computed Values :
Les computed values permettent de définir des variables qui dépendent d'autres variables réactives, et qui se recalculent automatiquement chaque fois que ces variables sources changent. Les computed values facilitent le calcul de données dérivées sans avoir à écrire des fonctions supplémentaires pour le faire.
En svelte :
<script>
let radius = 5;
// Cette déclaration réactive calcule automatiquement l'aire du cercle chaque fois que "radius" change
$: area = Math.PI * radius * radius;
// Cetta approche peut avoir de nombreux avantage car on peu dépendre de dizaine de variable
</script>
<label>
Rayon :
<input type="number" bind:value={radius} />
<!-- bind: permet de répercuter les changement sur la variable radius -->
</label>
<p>Le rayon est {radius}, l'aire du cercle est {area}.</p>
En react :
import React, { useState } from 'react';
function MyComponent() {
const [radius, setRadius] = useState(5);
const area = Math.PI * radius * radius;
return (
<>
<label>
Rayon :
<input
type="number"
value={radius}
onChange={(e) => setRadius(Number(e.target.value))}
/>
</label>
<p>Le rayon est {radius}, l'aire du cercle est {area}.</p>
</>
);
}
3. Les directives
Dans Svelte, les directives sont un élément central pour manipuler le DOM et contrôler le rendu conditionnel et itératif. La directive each est l'une de ces directives puissantes qui permettent de créer facilement des listes à partir de données.
La génération du code est plus simple et rappel grandement les moteurs de templates tel que ejs ou Handlebar.
<script>
import { onMount } from 'svelte';
let articles = [];
async function fetchArticles() {
const response = await fetch('https://api.example.com/articles');
articles = await response.json();
}
onMount(() => {
fetchArticles();
});
// Déclaration réactive pour connaitre le nombre d'articles, présente pour l'exemple
$: numberOfArticles = articles.length;
</script>
{#if numberOfArticles > 0}
<ul>
{#each articles as article}
<li>{article.title}</li>
{/each}
</ul>
{:else}
<p>Aucun article trouvé.</p>
{/if}
En react l'approche jsx contraint d'utiliser des opérateurs ternaire ou encore des itérateurs tel que map.
import React, { useEffect, useState } from 'react';
function MyComponent() {
const [articles, setArticles] = useState([]);
useEffect(() => {
async function fetchArticles() {
const response = await fetch('https://api.example.com/articles');
const jsonData = await response.json();
setArticles(jsonData);
}
fetchArticles();
}, []);
return (
<>
{articles.length > 0 ? (
<ul>
{articles.map((article) => (
<li key={article.id}>{article.title}</li>
))}
</ul>
) : (
<p>Aucun article trouvé.</p>
)}
</>
);
}
il existe de nombreuse autre directives
Conclusion : Faut-il abandonner React pour Svelte ?
Svelte a sans aucun doute réussi à capturer l'attention des développeurs en 2022, et son approche de compilation offre des performances supérieures et un code plus concis. Cependant, cela ne signifie pas nécessairement que vous devriez abandonner React pour Svelte.
Le choix entre Svelte et React dépendra des besoins spécifiques de votre projet et de votre expérience personnelle. React reste une technologie frontend solide, avec une communauté établie et un écosystème riche. Si vous maîtrisez déjà React et que vous travaillez sur un projet d'envergure, il peut être préférable de continuer à l'utiliser.
Cependant, il est toujours bénéfique de s'intéresser à de nouvelles technologies comme Svelte. Vous pourriez l'utiliser dans des projets plus petits pour vous familiariser avec ses avantages et ses fonctionnalités. La diversité des compétences est essentielle dans le milieu, et explorer différentes technologies vous permettra de rester ouvert aux opportunités qui se présentent.
En résumé, Svelte est une technologie frontend prometteuse qui a conquis la communauté des développeurs en 2022. Néanmoins, ne précipitez pas un changement drastique dans votre stack technologique. Prenez le temps de comprendre Svelte, essayez-le et prenez des décisions éclairées en fonction des besoins de vos futurs projets.