Le développement web a beaucoup évolué au cours des vingt dernières années. Après les sites statiques en HTML et CSS, puis l’arrivée de JavaScript et des premiers scripts dynamiques, nous avons vu apparaître des frameworks modernes comme Angular, React ou Vue. Ces outils ont profondément changé la manière de concevoir des applications web. Ils permettent de créer des sites interactifs, rapides, et surtout capables de fonctionner comme de véritables applications installées dans le navigateur.
Parmi ces frameworks modernes, Svelte occupe une place particulière. Moins connu que React ou Angular mais en forte croissance, Svelte propose une approche innovante qui séduit de plus en plus de développeurs. Là où les autres frameworks reposent sur de lourds moteurs d’exécution dans le navigateur, Svelte adopte une philosophie différente : il compile votre code lors du développement pour produire un JavaScript ultra-optimisé, prêt à être exécuté directement par le navigateur.
Dans ce tutoriel, vous allez découvrir ce qu’est Svelte, à quoi il sert, ses forces et ses limites, comment l’installer, et surtout comment l’utiliser pour créer votre première application web de type SPA (Single Page Application). Nous prendrons le temps de détailler chaque étape avec un langage simple, pour que même si vous êtes débutant, vous puissiez suivre et réussir votre premier projet.
À la fin de cette lecture, vous aurez une compréhension claire du fonctionnement de Svelte, vous saurez mettre en place votre environnement et vous serez capable de construire une application fonctionnelle de bout en bout.
- Qu’est-ce que Svelte ?
- À quoi sert Svelte ?
- Les avantages de Svelte
- Les limites de Svelte
- Installer et configurer Svelte
- Comprendre la structure d’un projet Svelte
- Premier composant Svelte
- Construire une SPA avec Svelte
- Étape 1 : Créer les pages principales
- Étape 2 : Ajouter une navigation
- Étape 3 : Ajouter un stockage local (localStorage)
- Étape 4 : Améliorer l’apparence
- La réactivité dans Svelte
- La gestion d’état global avec les stores
Qu’est-ce que Svelte ?
Svelte est un framework JavaScript moderne créé par Rich Harris en 2016. Contrairement aux autres frameworks qui fonctionnent directement dans le navigateur, Svelte se distingue par sa méthode de compilation. Lorsque vous écrivez du code avec Svelte, celui-ci est transformé au moment de la construction du projet en un code JavaScript simple, lisible et très performant.
Cela signifie qu’une fois votre application prête, le navigateur ne charge pas un gros moteur d’interprétation comme c’est le cas avec React ou Vue. Il exécute uniquement du code optimisé. Ce choix technique rend les applications Svelte souvent plus rapides et plus légères.
Svelte est donc à la fois :
- Un outil de développement pour écrire vos composants et votre logique d’application.
- Un compilateur qui transforme ce code en JavaScript pur.
En d’autres termes, vous n’écrivez pas directement du JavaScript brut, mais vous profitez d’une syntaxe simplifiée et de fonctionnalités avancées. Puis Svelte se charge de tout traduire en code optimisé.
À quoi sert Svelte ?
Svelte est principalement utilisé pour développer des applications web modernes.
Ces applications, appelées SPA (Single Page Applications), fonctionnent de manière fluide dans le navigateur en chargeant une seule fois la page initiale, puis en modifiant dynamiquement son contenu sans rechargement complet.
Avec Svelte, vous pouvez :
- Construire des sites interactifs, comme des tableaux de bord, des blogs dynamiques ou des interfaces utilisateur avancées.
- Créer des applications web avec une expérience proche de celle d’une application mobile.
- Développer des composants réutilisables, par exemple des formulaires, des menus ou des boutons interactifs.
- Générer des applications extrêmement performantes, même sur des appareils avec une puissance limitée.
En résumé, Svelte sert à donner vie à vos projets web, qu’ils soient petits ou très ambitieux.
Allez plus loin avec notre tutoriel : Les différences entre une architecture SPA et MPA.
Les avantages de Svelte
Svelte a de nombreux avantages qui expliquent pourquoi il séduit de plus en plus de développeurs :
Simplicité d’apprentissage
La syntaxe de Svelte est plus simple et plus lisible que celle de nombreux frameworks. Si vous connaissez déjà HTML, CSS et JavaScript, vous vous sentirez rapidement à l’aise. Par exemple, déclarer une variable et l’afficher dans votre page se fait avec une écriture très intuitive.
Performance exceptionnelle
Comme Svelte compile le code avant l’exécution, il génère un JavaScript optimisé qui s’exécute rapidement. Les applications sont souvent plus légères et plus fluides que celles créées avec d’autres frameworks.
Moins de code à écrire
Grâce à sa philosophie, Svelte réduit la quantité de code nécessaire. Vous pouvez accomplir en quelques lignes ce qui demande parfois plusieurs dizaines dans d’autres frameworks. Cela rend vos projets plus faciles à maintenir.
Réactivité native
Avec Svelte, la gestion des données et de leur affichage est intégrée directement dans le langage. Pas besoin d’écrire un code complexe pour réagir aux changements : si une variable change, l’affichage se met à jour automatiquement.
Intégration facile
Vous pouvez utiliser Svelte aussi bien pour de petits composants intégrés dans un site existant que pour des applications entières.
Les limites de Svelte
Même si Svelte possède de nombreuses qualités, il est important de connaître également ses limites afin de faire un choix éclairé.
Communauté plus restreinte : Comparé à React ou Angular, Svelte a une communauté plus petite. Cela signifie qu’il existe moins de bibliothèques, d’extensions et de ressources prêtes à l’emploi.
Documentation et support : La documentation officielle est de bonne qualité, mais comme l’écosystème est jeune, vous trouverez parfois moins de tutoriels ou de solutions sur les forums.
Moins utilisé en entreprise : De nombreuses grandes entreprises ont déjà adopté React ou Angular. Svelte est encore perçu comme un choix plus expérimental, même si sa popularité augmente.
Outils annexes : Certains outils avancés comme le support serveur ou l’intégration à des environnements spécifiques sont encore en cours d’amélioration.
Ces limites ne doivent pas vous décourager, mais elles sont à garder en tête. Pour un projet personnel ou une startup qui souhaite aller vite, Svelte est un choix excellent.
Installer et configurer Svelte
Avant de commencer à coder, il faut préparer l’environnement de développement. C’est une étape essentielle car Svelte fonctionne avec des outils modernes qui nécessitent quelques prérequis. Ne vous inquiétez pas, nous allons avancer pas à pas.
Étape 1 : Installer Node.js
Svelte repose sur Node.js pour exécuter les commandes de développement et installer les dépendances. Node.js est un environnement qui permet de faire tourner du JavaScript en dehors du navigateur.
- Rendez-vous sur le site officiel nodejs.org.
- Vous verrez deux versions proposées : une version LTS (Long Term Support) et une version Current. Choisissez la version LTS, car elle est plus stable.
- Téléchargez et installez le fichier adapté à votre système (Windows, macOS ou Linux).
- Une fois l’installation terminée, ouvrez votre terminal ou votre invite de commande et tapez :
node -vVous devriez voir s’afficher le numéro de la version installée. Si c’est le cas, Node.js est prêt.
Étape 2 : Créer un nouveau projet avec SvelteKit
Aujourd’hui, l’outil officiel pour démarrer un projet avec Svelte s’appelle SvelteKit. C’est une surcouche de Svelte qui facilite la création d’applications modernes. Même si notre objectif est de construire une SPA simple, SvelteKit nous fournit une base solide.
Dans votre terminal, allez dans le dossier où vous souhaitez créer votre projet, puis tapez :
npm create mon-projet@latestL’assistant vous posera plusieurs questions et vous guidera :
- Type de projet : choisissez « Skeleton project » si vous voulez commencer avec une base vide.
- Typescript : si vous êtes débutant, sélectionnez « No ». Vous pourrez toujours ajouter TypeScript plus tard.
- ESLint et Prettier : ces outils servent à vérifier et formater automatiquement votre code. Vous pouvez dire « Yes » si vous voulez garder de bonnes pratiques.
Étape 3 : Installer les dépendances
Une fois le projet créé, déplacez-vous dans le dossier :
cd mon-projetPuis installez toutes les dépendances nécessaires :
nom installCette commande télécharge et configure tous les modules indispensables au fonctionnement de Svelte.
Étape 4 : Lancer le serveur de développement
Maintenant que tout est prêt, vous pouvez lancer votre première application Svelte :
npm run devLe terminal vous affichera une adresse du type :
Local: https://localhost:5173Ouvrez ce lien dans votre navigateur, et vous verrez le projet de base généré par SvelteKit. Félicitations, vous venez d’installer votre première application Svelte !
Comprendre la structure d’un projet Svelte
Avant de commencer à coder, il est utile de jeter un œil aux fichiers et dossiers que SvelteKit a créés pour vous. Cela vous permettra de comprendre comment l’application est organisée.
- src/ : c’est ici que vous allez écrire votre code. Ce dossier contient tous vos composants et pages.
- src/routes/ : chaque fichier à l’intérieur correspond à une page de votre application. Par exemple,
+page.sveltedéfinit le contenu de la page d’accueil. - src/lib/ : vous pouvez y ranger vos composants réutilisables (boutons, formulaires, etc.).
- static/ : ce dossier contient les fichiers accessibles directement par l’utilisateur, comme des images ou des fichiers PDF.
- package.json : ce fichier liste toutes les dépendances de votre projet et les commandes disponibles.
Premier composant Svelte
Dans Svelte, tout est basé sur des composants. Un composant est un bloc réutilisable qui combine du HTML, du CSS et du JavaScript. Chaque composant est stocké dans un fichier avec l’extension .svelte.
Ouvrons le fichier src/routes/+page.svelte. Par défaut, il contient un code minimal. Modifions-le pour afficher un petit message personnalisé :
<script>
let message = "Bienvenue dans votre première application Svelte !";
</script>
<h1>{message}</h1>
<style>
h1 {
color: #2c3e50;
font-family: Arial, sans-serif;
}
</style>
- La balise
<script>sert à déclarer vos variables ou fonctions en JavaScript. - La balise
<style>vous permet d’écrire du CSS directement dans le composant. - Le code HTML affiche le contenu, et les accolades
{}permettent d’insérer la valeur d’une variable.
Enregistrez le fichier, retournez dans votre navigateur et vous verrez le message apparaître instantanément. C’est ça la magie de Svelte : chaque modification est visible immédiatement grâce au rechargement automatique.
Construire une SPA avec Svelte
Une SPA (Single Page Application) est une application web qui ne recharge pas entièrement la page à chaque action. L’utilisateur navigue entre différents écrans, mais en réalité, le navigateur ne recharge qu’une fois le fichier principal. Le contenu change dynamiquement grâce à JavaScript.
Pour illustrer cela, nous allons développer une application de gestion de tâches qui contiendra :
- Une page d’accueil présentant l’application
- Une page « Mes tâches » où l’utilisateur pourra ajouter, supprimer et marquer ses tâches comme terminées
- Une page « À propos » qui donne des informations sur l’application
Vous verrez ainsi comment organiser une SPA avec plusieurs routes et comment gérer des données réactives.
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?Étape 1 : Créer les pages principales
Dans SvelteKit, chaque page correspond à un fichier .svelte dans le dossier src/routes/.
La page d’accueil : Ouvrez le fichier src/routes/+page.svelte et remplacez son contenu par :
<script>
let titre = "Bienvenue sur notre application de gestion de tâches !";
</script>
<h1>{titre}</h1>
<p>Ceci est une application construite avec Svelte. Vous pouvez gérer vos tâches de manière simple et rapide.</p>Ici, nous affichons un titre et une description.
La page Mes tâches : Créez un nouveau dossier src/routes/taches/. À l’intérieur, ajoutez un fichier +page.svelte avec le contenu suivant :
<script>
let nouvelleTache = "";
let taches = [];
function ajouterTache() {
if (nouvelleTache.trim() !== "") {
taches = [...taches, { texte: nouvelleTache, terminee: false }];
nouvelleTache = "";
}
}
function supprimerTache(index) {
taches = taches.filter((_, i) => i !== index);
}
function terminerTache(index) {
taches[index].terminee = !taches[index].terminee;
taches = [...taches]; // Force la mise à jour
}
</script>
<h1>Mes tâches</h1>
<input
type="text"
bind:value={nouvelleTache}
placeholder="Ajouter une tâche"
on:keydown={(e) => e.key === 'Enter' && ajouterTache()}
/>
<button on:click={ajouterTache}>Ajouter</button>
<ul>
{#each taches as tache, index}
<li>
<input type="checkbox" checked={tache.terminee} on:change={() => terminerTache(index)} />
<span style: text-decoration={tache.terminee ? "line-through" : "none"}>
{tache.texte}
</span>
<button on:click={() => supprimerTache(index)}>Supprimer</button>
</li>
{/each}
</ul>
<style>
input[type="text"] {
padding: 0.5rem;
margin-right: 0.5rem;
}
button {
margin-left: 0.5rem;
}
li {
margin-top: 0.5rem;
}
</style>Ce code permet d’ajouter des tâches, de les cocher comme terminées et de les supprimer. Vous découvrez ici la réactivité de Svelte : dès qu’une variable change, l’affichage s’actualise automatiquement.
La page À propos : Créez un dossier src/routes/a-propos/ et à l’intérieur un fichier +page.svelte :
<h1>À propos</h1>
<p>Cette application est un exemple de SPA réalisée avec Svelte. Elle montre comment gérer des pages, des données réactives et une navigation fluide.</p>Étape 2 : Ajouter une navigation
Pour qu’une SPA soit agréable, il faut permettre à l’utilisateur de naviguer facilement entre les différentes pages. Nous allons créer un menu de navigation commun.
Dans le fichier src/routes/+layout.svelte, ajoutez ce code :
<nav>
<a href="/">Accueil</a>
<a href="/taches">Mes tâches</a>
<a href="/a-propos">À propos</a>
</nav>
<slot />
<style>
nav {
background-color: #2c3e50;
padding: 1rem;
}
a {
color: white;
margin-right: 1rem;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style><slot /> représente l’endroit où le contenu de chaque page sera affiché.
Les liens <a> permettent de naviguer entre les pages.
Dès que vous relancez l’application, vous pourrez passer de l’accueil à la page des tâches et à la page « À propos » sans recharger complètement la page.
Étape 3 : Ajouter un stockage local (localStorage)
Pour que vos tâches ne disparaissent pas lorsque vous rechargez la page, nous allons utiliser localStorage, une fonctionnalité du navigateur qui permet de stocker des données localement.
Modifiez le fichier src/routes/taches/+page.svelte :
<script>
let nouvelleTache = "";
let taches = JSON.parse(localStorage.getItem("taches")) || [];
function sauvegarder() {
localStorage.setItem("taches", JSON.stringify(taches));
}
function ajouterTache() {
if (nouvelleTache.trim() !== "") {
taches = [...taches, { texte: nouvelleTache, terminee: false }];
nouvelleTache = "";
sauvegarder();
}
}
function supprimerTache(index) {
taches = taches.filter((_, i) => i !== index);
sauvegarder();
}
function terminerTache(index) {
taches[index].terminee = !taches[index].terminee;
taches = [...taches];
sauvegarder();
}
</script>Désormais, vos tâches resteront sauvegardées même après avoir fermé et rouvert le navigateur.
Étape 4 : Améliorer l’apparence
Une application agréable doit aussi être visuellement plaisante. Ajoutons un peu de style dans src/routes/taches/+page.svelte :
<style>
h1 {
color: #34495e;
}
input[type="text"] {
padding: 0.5rem;
border: 1px solid #bdc3c7;
border-radius: 4px;
}
button {
padding: 0.5rem 1rem;
border: none;
background-color: #27ae60;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #2ecc71;
}
ul {
margin-top: 1rem;
list-style: none;
padding: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
li span {
flex-grow: 1;
margin-left: 0.5rem;
}
li button {
background-color: #e74c3c;
}
li button:hover {
background-color: #c0392b;
}
</style>L’application est maintenant à la fois fonctionnelle et agréable à utiliser.
Vous avez construit une véritable SPA avec Svelte :
- Une page d’accueil qui présente l’application
- Une page Mes tâches interactive avec ajout, suppression et sauvegarde des données
- Une page À propos qui fournit des informations
- Une navigation fluide entre les pages
En quelques dizaines de lignes, vous avez réalisé une application complète. Cela montre la puissance et la simplicité de Svelte.
La réactivité dans Svelte
La réactivité est la capacité d’un framework à mettre automatiquement à jour l’interface utilisateur lorsque les données changent. Dans beaucoup d’autres frameworks, il faut écrire un code complexe pour indiquer au système qu’une valeur a été modifiée. Avec Svelte, ce processus est simple, naturel et intégré directement dans le langage.
Réactivité des variables
Dans Svelte, une simple réaffectation d’une variable suffit pour que l’interface se mette à jour. Reprenons un exemple simple :
<script>
let compteur = 0;
function incrementer() {
compteur += 1;
}
</script>
<h1>Compteur : {compteur}</h1>
<button on:click={incrementer}>+1</button>- Ici, la variable
compteurest affichée dans le HTML. - À chaque fois que l’utilisateur clique sur le bouton, la fonction
incrementer()est appelée, etcompteurest modifié. - Svelte détecte automatiquement ce changement et met à jour l’affichage.
Pas besoin de fonction spéciale comme setState dans React ou d’objets observables compliqués.
Réactivité par déclaration $:
Svelte propose également une syntaxe spéciale avec le symbole $: pour indiquer qu’une valeur dépend d’une autre. Par exemple :
<script>
let a = 2;
let b = 3;
$: somme = a + b;
</script>
<p>a = {a}, b = {b}</p>
<p>La somme est : {somme}</p>
<button on:click={() => a++}>Augmenter a</button>
<button on:click={() => b++}>Augmenter b</button>- La ligne
$: somme = a + b;signifie quesommeest automatiquement recalculée dès queaoubchange. - Cela évite de devoir écrire manuellement une fonction de recalcul.
Réactivité avec les blocs {#if}, {#each}, {#await}
Svelte offre aussi des blocs réactifs qui permettent d’afficher ou de répéter du contenu en fonction de variables.
Bloc conditionnel {#if}
<script>
let connecte = false;
</script>
{#if connecte}
<p>Bienvenue, utilisateur connecté !</p>
{:else}
<p>Veuillez vous connecter.</p>
{/if}Bloc de boucle {#each}
Nous l’avons déjà utilisé pour parcourir la liste des tâches.
Bloc {#await}
Il sert à gérer l’affichage des promesses, très utile pour charger des données depuis une API.
<script>
let donnees = fetch("https://jsonplaceholder.typicode.com/posts")
.then(res => res.json());
</script>
{#await donnees}
<p>Chargement...</p>
{:then articles}
<ul>
{#each articles.slice(0,5) as article}
<li>{article.title}</li>
{/each}
</ul>
{:catch erreur}
<p>Erreur : {erreur.message}</p>
{/await}La gestion d’état global avec les stores
Lorsque votre application devient plus grande, vous pouvez avoir besoin de partager des données entre plusieurs composants. Par exemple, un utilisateur connecté, un panier d’achat ou des paramètres d’application.
Pour cela, Svelte propose un outil très pratique : les stores.
Créer un store
Un store est un objet réactif qui contient une valeur et permet à plusieurs composants d’y accéder et de réagir aux changements.
Exemple simple avec un compteur :
Créez un fichier src/lib/stores.js :
import { writable } from "svelte/store";
export const compteur = writable(0);Ici, nous utilisons writable pour créer un store qui peut être modifié.
Dans un composant, vous pouvez utiliser ce store :
<script>
import { compteur } from "$lib/stores.js";
</script>
<button on:click={() => $compteur += 1}>
Compteur : {$compteur}
</button>Le symbole $ devant compteur permet d’accéder directement à sa valeur.
Chaque fois que compteur est modifié, tous les composants qui l’utilisent se mettent à jour automatiquement.
Exemple : partager la liste des tâches avec un store
Nous pouvons améliorer notre application de gestion de tâches en plaçant les données dans un store, afin qu’elles soient accessibles depuis plusieurs composants (par exemple une barre de navigation qui affiche le nombre de tâches restantes).
Dans src/lib/stores.js, ajoutez :
import { writable } from "svelte/store";
export const taches = writable([]);Dans src/routes/taches/+page.svelte, utilisez le store :
<script>
import { taches } from "$lib/stores.js";
let nouvelleTache = "";
function ajouterTache() {
if (nouvelleTache.trim() !== "") {
taches.update(liste => [...liste, { texte: nouvelleTache, terminee: false }]);
nouvelleTache = "";
}
}
function supprimerTache(index) {
taches.update(liste => liste.filter((_, i) => i !== index));
}
function terminerTache(index) {
taches.update(liste => {
liste[index].terminee = !liste[index].terminee;
return [...liste];
});
}
</script>
<h1>Mes tâches</h1>
<input
type="text"
bind:value={nouvelleTache}
placeholder="Ajouter une tâche"
on:keydown={(e) => e.key === 'Enter' && ajouterTache()}
/>
<button on:click={ajouterTache}>Ajouter</button>
<ul>
{#each $taches as tache, index}
<li>
<input type="checkbox" checked={tache.terminee} on:change={() => terminerTache(index)} />
<span style: text-decoration={tache.terminee ? "line-through" : "none"}>
{tache.texte}
</span>
<button on:click={() => supprimerTache(index)}>Supprimer</button>
</li>
{/each}
</ul>Dans src/routes/+layout.svelte, affichons le nombre de tâches restantes :
<script>
import { taches } from "$lib/stores.js";
</script>
<nav>
<a href="/">Accueil</a>
<a href="/taches">Mes tâches ({$taches.length})</a>
<a href="/a-propos">À propos</a>
</nav>
<slot />Désormais, la navigation montre en temps réel le nombre de tâches.
Vous avez parcouru un long chemin dans ce tutoriel sur Svelte. Vous savez maintenant :
- Ce qu’est Svelte, son rôle, ses avantages et ses limites
- Comment installer et configurer un projet avec SvelteKit
- Comment créer vos premiers composants et comprendre la structure d’un projet
- Comment réaliser une véritable SPA avec plusieurs pages et une navigation fluide
- Comment gérer des données réactives et persister des informations avec
localStorage - Comment utiliser les stores pour partager un état global entre vos composants
Avec ces bases solides, vous êtes prêt à aller plus loin. Vous pourriez par exemple connecter votre application à une base de données via une API, ajouter un système d’authentification, ou encore améliorer le design avec TailwindCSS.
Svelte est un framework jeune mais puissant, qui mise sur la simplicité et la performance. En quelques dizaines de lignes, vous pouvez créer des applications web rapides et efficaces, ce qui en fait un excellent choix pour vos projets personnels ou professionnels.
