Bonjour à tous,
Dans mon premier article, je vous ai présenté Svelte en soulignant son approche originale : il compile votre code pour en faire du JavaScript optimisé, contrairement aux autres frameworks qui fonctionnent en runtime. Aujourd’hui, je vais vous montrer comment créer vos premiers composants en Svelte et comment exploiter sa réactivité pour construire des interfaces dynamiques et légères.
1. Les composants Svelte
En Svelte, chaque composant se trouve dans un fichier ayant l’extension .svelte. Ce fichier peut contenir trois parties principales :
-
Le bloc
<script>: pour définir la logique et le comportement (variables, fonctions, etc.). - Le markup HTML : pour décrire l’interface utilisateur.
-
Le bloc
<style>: pour ajouter des styles qui sont par défaut scopés au composant, évitant ainsi les conflits globaux.
Voici un exemple simple d’un composant compteur :
<script>
// Déclaration d'une variable réactive par défaut
let count = 0;
// Fonction d'incrémentation
function increment() {
count += 1;
}
</script>
<main>
<h2>Le compteur affiche : {count}</h2>
<button on:click={increment}>Incrémenter</button>
</main>
<style>
main {
text-align: center;
padding: 1em;
border: 1px solid #ddd;
border-radius: 8px;
max-width: 300px;
margin: 1em auto;
}
button {
padding: 0.5em 1em;
font-size: 1em;
background-color: #ff3e00;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
opacity: 0.9;
}
</style>
Dans cet exemple, la variable count est automatiquement réactive. Dès qu’on lui affecte une nouvelle valeur (ici, lors de l’appel de increment()), l’interface se met à jour sans aucune configuration supplémentaire.
2. La réactivité, cœur de Svelte
L’un des points forts de Svelte est sa capacité à rendre le code réactif de manière native. Contrairement à d’autres frameworks qui utilisent un runtime ou un virtual DOM, Svelte compile votre code pour générer directement des manipulations du DOM. Cela se traduit par :
- Une syntaxe simple et concise : une simple affectation suffit pour mettre à jour l’interface.
- Des performances optimisées : moins de code à charger, moins de temps de traitement au runtime.
Par exemple, on peut utiliser une déclaration réactive pour recalculer une valeur dérivée :
<script>
let text = "";
// La variable "characters" est recalculée automatiquement à chaque modification de "text"
$: characters = text.length;
</script>
<textarea bind:value={text} placeholder="Tapez quelque chose..."></textarea>
<p>Nombre de caractères : {characters}</p>
La syntaxe $: indique à Svelte que la variable qui suit doit être réévaluée dès que l’une des variables dont elle dépend change. Pour en savoir plus, je vous invite à consulter le Tutoriel officiel de Svelte
3. Illustrer avec vidéos
Et si vous souhaitez approfondir vos connaissances grâce à un cours vidéo, je vous recommande le "Svelte Crash Course" de Brad Traversy sur YouTube. Vous y découvrirez de nombreux exemples concrets pour bien démarrer : Regarder le tutoriel sur YouTube
<iframe width="560" height="315" src="https://www.youtube.com/embed/zojEMeQGGHs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>4. Pourquoi cette approche est-elle intéressante ?
- Légereté du code : En compilant le code en amont, Svelte élimine tout runtime superflu, ce qui réduit considérablement la taille du bundle.
- Simplicité d’utilisation : La syntaxe, proche du HTML/CSS/JavaScript natif, facilite la montée en compétence, même pour les développeurs débutants.
- Performances accrues : Moins de surcharge signifie des applications plus rapides, notamment sur des appareils mobiles ou avec des connexions limitées.
Une comparaison technique réalisée par Contentful souligne d’ailleurs ces avantages en termes de bundle et de performances, ce qui peut s’avérer déterminant dans le choix d’un framework pour un projet donné.
Svelte offre une bonne approche pour développer des interfaces web :
- Les composants sont simples à créer grâce à un fichier unique regroupant logique, structure et style.
- La réactivité native vous permet d’optimiser l’interface sans complexité supplémentaire.
- La simplicité se traduit par des performances accrues et une réduction du code inutile.
La semaine prochaine, je vous présenterai un exemple technique plus élaboré pour créer une petite application avec Svelte, afin que vous puissiez vous distinguer vous-mêmes par la qualité de votre code.
Merci et n’hésitez pas à laisser vos commentaires ou questions !
À bientôt,
Walid Gharbi
Commentaires