1---
  2title: Introduction à Svelte et SvelteKit
  3theme: ./_themes/5ika.css
  4highlightTheme: github
  5verticalSeparator: <!--v-->
  6revealOptions:
  7  transition: "fade"
  8---
  9
 10# Introduction à Svelte et SvelteKit
 11
 12---
 13
 14## Qu'est-ce que Svelte ?
 15
 16- Un framework JavaScript pour construire des interfaces utilisateur.
 17- Différent de React et Vue car il compile les composants en JavaScript optimisé.
 18- Pas de runtime, ce qui le rend très performant.
 19
 20---
 21
 22## Avantages de Svelte
 23
 24- Performances : pas de framework dans le navigateur, juste du JavaScript pur.
 25- Simplicité : syntaxe intuitive et minimale.
 26- Réactivité : mises à jour automatiques de l'UI lorsque l'état change.
 27
 28---
 29
 30## Concepts de base de Svelte
 31
 32- **Composants** : les blocs de construction de l'interface utilisateur.
 33- **Props** : pour passer des données aux composants.
 34- **Stores** : gestion de l'état réactif.
 35- **Réactivité** : mise à jour automatique des composants lorsque les données changent. C'est les _states_ mais en plus simple.
 36
 37---
 38
 39## Exemple de composant Svelte
 40
 41```js
 42<script>
 43  let count = 0; // La variable est réactive (state)
 44
 45  const increment = () => {
 46    count += 1; // On peut modifier le state par mutation
 47  }
 48</script>
 49
 50<button on:click={increment}>
 51  Cliquez-moi: {count}
 52</button>
 53```
 54
 55---
 56
 57## Réactivité et mise à jour automatique de l'UI
 58
 59- Svelte met automatiquement à jour l'UI lorsque l'état change.
 60- Pas besoin d'utiliser `setState` ou `useState` comme dans React.
 61
 62Exemple :
 63
 64```
 65<script>
 66  let name = 'Svelte';
 67</script>
 68
 69<input bind:value={name}>
 70
 71<p>Hello, {name}!</p>
 72```
 73
 74- Liaison bidirectionnelle avec `bind:value`.
 75
 76---
 77
 78## Styling avec Svelte
 79
 80- Styles encapsulés par défaut dans les composants.
 81- Utilisation des balises `<style>`.
 82
 83Exemple :
 84
 85```
 86<style>
 87  p {
 88    color: purple;
 89  }
 90</style>
 91
 92<p>This is a styled paragraph.</p>
 93```
 94
 95- Les styles sont appliqués uniquement au composant.
 96
 97---
 98
 99## Différences avec React
100
101---
102
103## Architecture
104
105- **React** : Utilise un DOM virtuel (Virtual DOM) pour optimiser les mises à jour de l'UI.
106- **Svelte** : Compile les composants en JavaScript pur au moment de la construction, éliminant le besoin de Virtual DOM.
107
108---
109
110## Syntaxe et Apprentissage
111
112- **React** :
113  - Utilise JSX, un mélange de JavaScript et de XML.
114  - Nécessite l'apprentissage de hooks ou de classes pour la gestion de l'état et du cycle de vie.
115- **Svelte** :
116  - Syntaxe intuitive et minimale, sans JSX.
117  - Réactivité intégrée directement dans le langage.
118
119---
120
121## Gestion de l'état
122
123- **React** :
124  - Utilise des hooks (`useState`, `useReducer`, etc.) pour la gestion de l'état local.
125  - Context API ou bibliothèques externes comme Zustand pour la gestion de l'état global (stores)
126- **Svelte** :
127  - Réactivité intégrée, les variables déclarées dans les composants sont réactives.
128  - Utilisation de stores pour l'état global (inclus dans la lib).
129
130---
131
132## Taille du bundle
133
134- **React** :
135  - Taille du bundle plus grande due à la présence du runtime et du Virtual DOM.
136  - Besoin de bibliothèques supplémentaires pour des fonctionnalités avancées.
137- **Svelte** :
138  - Taille du bundle plus petite car le code est compilé en JavaScript pur.
139  - Pas de runtime, moins de dépendances externes nécessaires.
140
141---
142
143## Ecosystème et Communauté
144
145- **React** :
146  - Écosystème mature et vaste.
147  - Large communauté, nombreuses ressources et bibliothèques tierces.
148- **Svelte** :
149  - Écosystème en croissance rapide.
150  - Communauté plus petite mais dynamique.
151  - Moins de bibliothèques tierces, mais de nombreux outils intégrés.
152
153---
154
155## Introduction à SvelteKit
156
157---
158
159- Framework basé sur Svelte pour construire des applications web complètes.
160- SvelteKit est à Svelte ce que NextJS est à React.
161- Gestion des routes, rendu côté serveur, génération de sites statiques, et plus.
162
163---
164
165## Avantages de SvelteKit
166
167- Rendu côté serveur (SSR) pour de meilleures performances et SEO.
168- Génération de sites statiques pour des déploiements rapides (SSG).
169- Routage automatique basé sur la structure des fichiers.
170- Support intégré pour TypeScript, SASS, SCSS, Tailwind, etc.
171
172---
173
174## Structure de base d'un projet SvelteKit
175
176```
177my-sveltekit-app/
178├── src/
179│ ├── routes/
180│ │ └── index.svelte
181│ ├── lib/
182│ └── app.html
183├── static/
184├── svelte.config.js
185└── package.json
186```
187
188---
189
190## Exemple de route dans SvelteKit
191
192`src/routes/index.svelte` :
193
194```
195<script>
196  let message = "Hello, SvelteKit!";
197</script>
198
199<h1>{message}</h1>
200```
201
202---
203
204## Concepts clés de SvelteKit
205
206- **Routes** : Basées sur les fichiers dans le dossier `src/routes`.
207- **Endpoints** : Pour gérer les requêtes API dans le dossier `src/routes`.
208- **Layouts** : Pour partager des éléments de mise en page entre différentes routes.
209- **Load Functions** : Pour précharger des données avant de rendre un composant.
210
211---
212
213## Création d'un projet SvelteKit
214
215Création d'un nouveau projet :
216
217```
218npm create svelte@latest my-sveltekit-app
219cd my-sveltekit-app
220npm install
221npm run dev
222```
223
224---
225
226## Hands-On - Application Todo
227
228- Création d'une application Todo simple.
229- Utilisation des concepts de Svelte et SvelteKit.
230
231---
232
233## Ressources
234
235- [Documentation officielle de Svelte](https://svelte.dev/docs)
236- [Documentation officielle de SvelteKit](https://kit.svelte.dev/docs)
237- [Tutoriels et exemples](https://svelte.dev/tutorial)
238- [Exemples et comparaison entre différents frameworks](https://component-party.dev/)