Pourquoi Svelte ?
Svelte est un cadre JavaScript révolutionnaire pour construire des applications web modernes et rapides. Il a été conçu pour être plus performant que d'autres cadres populaires comme React ou Vue en raison de sa façon unique de compiler le code source en code optimisé directement dans le navigateur.
Un cas d'usage concret
Supposons que vous travailliez sur une application web qui doit gérer des milliers d'utilisateurs simultanés. Vous avez besoin d'une solution qui offre un bon rendu et est performante, tout en étant facile à développer et à maintenir. Svelte serait idéal pour ce cas, car sa façon de compiler le code source en JavaScript pur peut améliorer considérablement les performances de l'application.
Prerequis
- Connaissance de base de JavaScript
- Familiarité avec HTML et CSS
- Installation de Node.js (version recommandée : 14.0.0 ou plus tard)
- Installateur pour le terminal (npm)
Vous pouvez installer Node.js en suivant les instructions sur le site officiel Node.js.
Concepts fondamentaux
Composants Svelte
Un composant Svelte est un fichier .svelte qui contient une structure HTML, du CSS et du JavaScript. Voici comment vous pouvez créer un composant simple :
<!-- src/App.svelte -->
<script>
let message = 'Bonjour, Svelte !';
</script>
<style>
.container {
text-align: center;
margin-top: 20px;
}
</style>
<div class="container">
<h1>{message}</h1>
</div>
Props
Les props sont des données passées d'un composant parent à un composant enfant. Voici comment vous pouvez définir et utiliser des props :
<!-- src/Child.svelte -->
<script>
export let name;
</script>
<p>Bonjour, {name} !</p>
Puis dans le composant parent :
<!-- src/App.svelte -->
<script>
import Child from './Child.svelte';
</script>
<Child name="Svelte" />
State
Le state est une variable qui peut être utilisée pour stocker des données et déclencher la mise à jour de l'interface utilisateur. Voici comment vous pouvez utiliser le state :
<!-- src/App.svelte -->
<script>
let count = 0;
function increment() {
count += 1;
}
function decrement() {
count -= 1;
}
</script>
<div>
<button on:click={decrement}>-</button>
<span>{count}</span>
<button on:click={increment}>+</button>
</div>
Mise en pratique : projet fil rouge
Mini-projet : Gestionnaire de tâches
Vous allez créer un gestionnaire de tâches simple avec Svelte. Voici les étapes à suivre :
Créer le projet :
npx degit sveltejs/template svelte-todo cd svelte-todo npm installModifier
src/App.svelte:
<!-- src/App.svelte -->
<script>
import Task from './Task.svelte';
let tasks = [
{ id: 1, text: 'Faire les courses', completed: false },
{ id: 2, text: 'Nettoyer la maison', completed: true }
];
function addTask(text) {
const newTask = { id: Date.now(), text, completed: false };
tasks = [...tasks, newTask];
}
function toggleTask(id) {
tasks = tasks.map(task => task.id === id ? { ...task, completed: !task.completed } : task);
}
function deleteTask(id) {
tasks = tasks.filter(task => task.id !== id);
}
</script>
<style>
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.task {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
input[type="checkbox"] {
margin-right: 10px;
}
</style>
<div class="container">
<h1>Gestionnaire de tâches</h1>
<input type="text" bind:value={newTaskText} placeholder="Nouvelle tâche..." />
<button on:click={() => addTask(newTaskText)}>Ajouter</button>
{#each tasks as task (task.id)}
<Task
{task}
on:toggle={() => toggleTask(task.id)}
on:delete={() => deleteTask(task.id)}
/>
{/each}
</div>
- Créer
src/Task.svelte:
<!-- src/Task.svelte -->
<script>
export let task;
export let onToggle;
export let onDelete;
function handleToggle() {
onToggle(task.id);
}
function handleDelete() {
onDelete(task.id);
}
</script>
<style>
.task {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
button {
margin-left: 10px;
}
</style>
<div class="task">
<input type="checkbox" bind:checked={task.completed} on:change={handleToggle} />
<span style:text-decoration={task.completed ? 'line-through' : ''}>{task.text}</span>
<button on:click={handleDelete}>Supprimer</button>
</div>
Étapes détaillées
Créer le projet :
npx degit sveltejs/template svelte-todo cd svelte-todo npm installModifier
src/App.svelte:
<!-- src/App.svelte -->
<script>
import Task from './Task.svelte';
let tasks = [
{ id: 1, text: 'Faire les courses', completed: false },
{ id: 2, text: 'Nettoyer la maison', completed: true }
];
function addTask(text) {
const newTask = { id: Date.now(), text, completed: false };
tasks = [...tasks, newTask];
}
function toggleTask(id) {
tasks = tasks.map(task => task.id === id ? { ...task, completed: !task.completed } : task);
}
function deleteTask(id) {
tasks = tasks.filter(task => task.id !== id);
}
</script>
<style>
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.task {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
input[type="checkbox"] {
margin-right: 10px;
}
</style>
<div class="container">
<h1>Gestionnaire de tâches</h1>
<input type="text" bind:value={newTaskText} placeholder="Nouvelle tâche..." />
<button on:click={() => addTask(newTaskText)}>Ajouter</button>
{#each tasks as task (task.id)}
<Task
{task}
on:toggle={() => toggleTask(task.id)}
on:delete={() => deleteTask(task.id)}
/>
{/each}
</div>
- Créer
src/Task.svelte:
<!-- src/Task.svelte -->
<script>
export let task;
export let onToggle;
export let onDelete;
function handleToggle() {
onToggle(task.id);
}
function handleDelete() {
onDelete(task.id);
}
</script>
<style>
.task {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
button {
margin-left: 10px;
}
</style>
<div class="task">
<input type="checkbox" bind:checked={task.completed} on:change={handleToggle} />
<span style:text-decoration={task.completed ? 'line-through' : ''}>{task.text}</span>
<button on:click={handleDelete}>Supprimer</button>
</div>
Erreurs frequentes et debugging
1. Erreur de syntaxe
## ❌ Mauvais
<button onclick={() => alert('Hello!')}>Click me</button>
## ✅ Correct
<button on:click={() => alert('Hello!')}>Click me</button>
2. Erreur d'accès à une variable non définie
## ❌ Mauvais
<script>
let name;
</script>
<p>{name}</p>
## ✅ Correct
<script>
let name = 'John';
</script>
<p>{name}</p>
3. Erreur de mise à jour du state
## ❌ Mauvais
<script>
let count = 0;
function increment() {
count++;
}
</script>
<button on:click={increment}>+</button>
<span>{count}</span>
## ✅ Correct
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
<button on:click={increment}>+</button>
<span>{count}</span>
Pour aller plus loin
1. Utiliser des hooks
Svelte propose des hooks comme onMount, onDestroy et beforeUpdate. Vous pouvez les utiliser pour effectuer des actions spécifiques à des moments clés de la vie d'un composant.
<script>
import { onMount } from 'svelte';
onMount(() => {
console.log('Le composant est monté');
});
</script>
2. Utiliser SvelteKit
SvelteKit est un framework Svelte pour le développement de sites web et d'applications server-side-rendered (SSR). Il offre une meilleure performance et facilite la création de pages statiques.
3. Optimiser l'application
Vous pouvez optimiser votre application en utilisant des techniques comme :
- Utiliser
bind:thispour accéder à des éléments du DOM - Éviter les boucles imbriquées
- Utiliser
onDestroypour nettoyer les écouteurs d'événements
Défi pratique
Créez un mini-projet Svelte qui affiche une liste de contacts avec le prénom, le nom et le numéro de téléphone. Ajoutez des fonctionnalités pour ajouter, modifier et supprimer des contacts.
Ce tutoriel vous a hopefully fourni une bonne introduction à Svelte et vous a permis de créer un mini-projet complet. N'oubliez pas de pratiquer régulièrement pour mieux maîtriser les concepts!