Cours Svelte et SvelteKit · Module 1: Introduction à Svelte
Bienvenue au Pays des Vikings !
Dans cette leçon4
Bienvenue à Nordheim, le pays des braves Vikings ! Je suis Jarl Sven le Runique, souverain du village de Svenheim et maître de l'art ancien des runes. J'ai entendu dire que tu souhaites apprendre les secrets de Svelte, une technologie magique qui transforme le code en pure puissance.
Qu'est-ce que Svelte ?
Svelte est un framework JavaScript, mais pas comme les autres. C'est comme une forge à runes viking : il compile ton code pendant l'étape de build, au lieu de l'interpréter dans le navigateur.
Comparaison avec d'autres frameworks
| Framework | Approche | Analogie Viking |
|---|---|---|
| React | DOM virtuel à l'exécution | Vérifie constamment les différences, comme un garde qui se réveille à chaque instant |
| Vue | Réactivité à l'exécution | Sorts magiques lancés à la volée |
| Angular | Framework complet | Une puissante armée à l'équipement lourd |
| Svelte | Compilation | Runes forgées une fois, elles fonctionnent pour toujours |
Svelte est comme une épée forgée par le meilleur des forgerons : tout le travail se fait à la forge (la compilation), et le résultat est une arme légère et rapide (du JavaScript pur).
Histoire de Svelte
Rich Harris a créé Svelte en 2016. Le nom vient du mot anglais signifiant « svelte, élégant », exactement ce qu'est le code Svelte.
Étapes clés :
- 2016 - Svelte 1.0 - naissance
- 2019 - Svelte 3 - révolution de la réactivité (
$:) - 2023 - SvelteKit 2 - puissance full-stack
- 2024 - Svelte 5 - l'ère des Runes :
$state,$derived,$effect - 2026 - SvelteKit 3 - la configuration dans Vite et l'alias
#lib
À Nordheim, tu apprends Svelte 5 et SvelteKit 3, la magie des runes la plus récente.
Pourquoi Svelte ?
// React - il faut se souvenir de useState, useEffect...
const [count, setCount] = useState(0);
setCount(count + 1);
// Svelte 5 - une variable avec la rune $state et une simple affectation
let count = $state(0);
count += 1;En Svelte, tu écris moins de code, et il s'exécute plus vite. La rune $state dit au compilateur : « cette valeur est vivante, rafraîchis l'écran quand elle change ». La forge fait le reste. C'est comme la différence entre une armure lourde et une cotte de mailles viking légère : moins de poids, plus d'efficacité.
Qu'est-ce qui t'attend à Nordheim ?
Ton voyage à travers 14 lieux :
- Midgard - Tu es ici ! Les bases de Svelte
- Yggdrasil - Les composants comme les branches d'un arbre
- Chambre des Runes - Réactivité et Runes
- Asgard - Props et Événements
- Bifrost - Les Bindings
- Les Nornes - Logique de template
- Valhalla - Cycle de vie
- Puits de Mimir - Stores
- Ragnarok - Animations et transitions
- Mjolnir - Actions
- Drakkar - Routing SvelteKit
- Prophéties de la Völva - SSR et chargement des données
- Marché de Birka - Form Actions
- Le Guet d'Heimdall - Hooks, API, Déploiement
SKAL ! Mettons-nous en route, guerrier !
Code de cette leçon : App.svelte
<script>
// Welcome to Nordheim - Land of the Vikings!
// This is your first Svelte 5 component
// $state - values that change and refresh the screen
let vikingName = $state('Warrior');
let gold = $state(0);
// $derived - computed from gold, always up to date
let reputation = $derived(
gold >= 500 ? 'Legendary Jarl'
: gold >= 200 ? 'Respected Warrior'
: gold >= 50 ? 'Promising Viking'
: 'Young Drengr'
);
function raid() {
const loot = Math.floor(Math.random() * 50) + 10;
gold += loot;
}
</script>
<main class="viking-hall">
<header>
<h1>Viking Hall</h1>
<p class="subtitle">Nordheim - Svelte World</p>
</header>
<section class="welcome">
<h2>Welcome, {vikingName}!</h2>
<p>This is your first Svelte component - simple as a viking sword!</p>
<div class="input-group">
<label for="viking-name">Your name:</label>
<input id="viking-name" bind:value={vikingName} placeholder="Enter name..." />
</div>
</section>
<section class="stats">
<h3>Your stats</h3>
<div class="stat-grid">
<div class="stat">
<span class="label">Gold</span>
<span class="value">{gold}</span>
</div>
<div class="stat">
<span class="label">Reputation</span>
<span class="value">{reputation}</span>
</div>
</div>
<button onclick={raid} class="raid-btn">
Raiding expedition!
</button>
</section>
<footer>
<p>SKÅL! May Odin be with you!</p>
</footer>
</main>
<style>
.viking-hall {
font-family: 'Georgia', serif;
max-width: 600px;
margin: 0 auto;
padding: 2rem;
background: linear-gradient(135deg, #1a0f0a 0%, #2c1810 100%);
min-height: 100vh;
color: #e8d5b7;
}
header {
text-align: center;
border-bottom: 2px solid #d4af37;
padding-bottom: 1rem;
margin-bottom: 2rem;
}
h1 {
color: #d4af37;
font-size: 2rem;
margin: 0;
}
.subtitle {
color: #8b7355;
font-style: italic;
}
section {
background: rgba(212, 175, 55, 0.1);
border: 1px solid #d4af37;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
h2, h3 {
color: #d4af37;
margin-top: 0;
}
.input-group {
margin-top: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
color: #d4af37;
}
input {
width: 100%;
padding: 0.75rem;
border: 2px solid #d4af37;
background: rgba(0,0,0,0.3);
color: #e8d5b7;
border-radius: 4px;
font-size: 1rem;
}
input:focus {
outline: none;
box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
.stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.stat {
background: rgba(0,0,0,0.3);
padding: 1rem;
border-radius: 4px;
text-align: center;
}
.stat .label {
display: block;
color: #8b7355;
font-size: 0.9rem;
}
.stat .value {
display: block;
font-size: 1.25rem;
color: #d4af37;
margin-top: 0.5rem;
}
.raid-btn {
width: 100%;
padding: 1rem;
font-size: 1.25rem;
background: linear-gradient(135deg, #8b0000 0%, #a52a2a 100%);
color: white;
border: 2px solid #d4af37;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}
.raid-btn:hover {
background: linear-gradient(135deg, #a52a2a 0%, #cd5c5c 100%);
transform: scale(1.02);
}
footer {
text-align: center;
color: #8b7355;
border-top: 1px solid #3d2914;
padding-top: 1rem;
}
</style>Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Qu'est-ce qui distingue Svelte des autres frameworks JavaScript ?
2. Qui a créé Svelte et en quelle année la première version est-elle sortie ?