Découvrir Svelte
Notions théoriques
Qu'est-ce que Svelte ?
Svelte est un framework JavaScript pour créer des interfaces Web interactives. Sa particularité : contrairement à React ou Vue, Svelte est un compilateur.
- Autres frameworks : envoient du JavaScript au navigateur, qui met à jour l'interface au moment de l'exécution (runtime).
- Svelte : transforme votre code en JavaScript pur lors du build. Le navigateur reçoit un code minimal et optimisé, sans le "poids" du framework.
| Caractéristique | Svelte | React/Vue |
|---|---|---|
| Approche | Compilateur | Runtime (bibliothèque) |
| Taille du bundle | Très petite | Plus importante |
| Virtual DOM | Non | Oui |
| Courbe d'apprentissage | Douce | Modérée |
Svelte utilise Vite comme outil de build. Vous créez un projet Svelte+Vite avec une seule commande, et Vite s'occupe de la compilation et du HMR.
Le fichier .svelte
Chaque composant Svelte est un fichier .svelte. Ce fichier combine en un seul endroit :
<script>— la logique JavaScript- Le balisage HTML — le template
<style>— les styles CSS (optionnel, scoped au composant)
<script>
let message = 'Bonjour !'
</script>
<h1>{message}</h1>
<style>
h1 {
color: navy;
}
</style>
La syntaxe {variable} dans le HTML affiche la valeur de la variable JavaScript. C'est ce qu'on appelle l'interpolation.
Créer un projet Svelte avec Vite
npm create vite@latest mon-projet --template svelte
cd mon-projet
npm install
npm run dev
Le serveur démarre sur http://localhost:5173.
Structure d'un projet Svelte+Vite
mon-projet/
├── index.html
├── package.json
├── vite.config.js
└── src/
├── main.js ← Monte le composant racine dans le DOM
├── App.svelte ← Composant racine de l'application
├── app.css ← Styles globaux
└── assets/ ← Images, SVG…
src/main.js — point d'entrée qui monte App.svelte :
import { mount } from 'svelte'
import './app.css'
import App from './App.svelte'
const app = mount(App, {
target: document.getElementById('app'),
})
export default app
Vous n'avez généralement pas à modifier main.js. Tout votre code va dans App.svelte et dans de nouveaux fichiers .svelte.
Les variables réactives en Svelte
En Svelte, toute variable déclarée dans <script> avec $state() est réactive : si sa valeur change, l'interface se met à jour automatiquement.
<script>
let compteur = $state(0)
</script>
<p>Compteur : {compteur}</p>
<button onclick={() => compteur++}>Incrémenter</button>
$state() est une rune de Svelte 5. Les runes sont des fonctions spéciales reconnues par le compilateur Svelte pour gérer la réactivité. Vous en verrez d'autres dans les séances suivantes.
Exemple pratique
Voici le contenu par défaut de src/App.svelte après avoir créé un projet Svelte+Vite :
<script>
let count = $state(0)
</script>
<main>
<h1>Vite + Svelte</h1>
<button onclick={() => count++}>
count is {count}
</button>
</main>
<style>
main {
text-align: center;
}
</style>
Ce composant affiche un compteur qui s'incrémente au clic. Modifiez le message et le style, enregistrez : la page se met à jour instantanément grâce au HMR de Vite.
Test de mémorisation/compréhension
TP pour réfléchir et résoudre des problèmes
Dans ce TP, vous allez créer votre premier projet Svelte+Vite et modifier le composant racine pour afficher un message personnalisé avec interactivité.
Étape 1 — Créer le projet Svelte+Vite
npm create vite@latest tp-svelte --template svelte
cd tp-svelte
npm install
npm run dev
En passant --template svelte directement dans la commande, on évite les questions interactives. Utile pour les scripts d'automatisation. Les templates disponibles sont : vanilla, svelte, vue, react, preact, lit, solid.
Étape 2 — Afficher un message avec une variable
Ouvrez src/App.svelte et remplacez son contenu pour afficher un message de bienvenue stocké dans une variable :
En Svelte 5, déclarez avec $state() uniquement les variables dont la modification doit mettre à jour l'interface. Les constantes ou les valeurs qui ne changent pas n'ont pas besoin de $state().
Étape 3 — Ajouter un champ de saisie lié à la variable
Ajoutez un <input> pour modifier le prénom en temps réel :
En Svelte 5, la liaison value={prenom} + oninput={...} est la méthode explicite. Dans les prochaines séances, vous découvrirez bind:value={prenom} qui est la syntaxe raccourcie de Svelte pour lier bidirectionnellement un input à une variable.
Étape 4 — Ajouter un style scoped
Ajoutez une section <style> dans votre composant :
Les styles dans <style> n'affectent que ce composant. Vous pouvez donc nommer vos éléments simplement (h1, input) sans risquer de modifier les styles d'autres composants. C'est une des grandes forces de Svelte.