Bienvenue dans le tutoriel de Svelte ! Celui-ci va vous apprendre tout ce qu’il faut savoir pour construire facilement des applications web performantes et optimisées de toutes envergures.

Vous pouvez également consulter la documentation de l’API et faire un tour dans le bac à sable, ou — si vous êtes impatient•e de commencer sur votre machine — créer un projet avec npx sv create.

C’est quoi Svelte ?

Svelte est un outil permettant de construire des applications web. Comme toute autre framework d’interface, il vous permet de construire votre application déclarativement à partir de composants combinant markup, styles, et logique.

Ces composants sont compilés en de petits modules JavaScript optimisés éliminant tout surcoût usuellement associé avec un framework d’interface quelconque.

Vous pouvez construire votre application entière avec Svelte (par exemple, en utilisant un framework d’application comme SvelteKit, que ce tutoriel va présenter), ou l’introduire progressivement dans une codebase existante. Vous pouvez aussi déployer des composants en tant que paquets indépendants utilisables partout.

Comment utiliser ce tutoriel

Des connaissances de base en HTML, CSS et JavaScript sont nécessaires pour comprendre le fonctionnement de Svelte.

Ce tutoriel est divisé en quatre sections principales :

• Bases de Svelte (vous êtes ici)
• Svelte avancé
• Bases de SvelteKit
• SvelteKit avancé

Chaque section vous présentera un exercice conçu pour illustrer une fonctionnalité. Les exercices se basent sur les connaissances acquises dans les exercices précédents, il est donc recommandé de suivre ce tutoriel de début à la fin. Si besoin, vous pouvez naviguer entre les exercices grâce au menu ci-dessus.

Si vous êtes bloqué•e, vous pouvez cliquer sur le bouton résoudre dans le coin supérieur droit de l’écran. (Le bouton résoudre est désactivé pour les sections comme celle-ci qui n’ont pas d’exercice.) Essayez de ne pas vous en servir trop souvent ; vous apprendrez plus vite en trouvant par vous-même où les blocs de code suggérés doivent se placer et en les tapant vous-même dans l’éditeur.