---
title: Introduction à Svelte et SvelteKit
theme: ./_themes/5ika.css
highlightTheme: github
verticalSeparator: <!--v-->
revealOptions:
  transition: "fade"
---

# Introduction à Svelte et SvelteKit

---

## Qu'est-ce que Svelte ?

- Un framework JavaScript pour construire des interfaces utilisateur.
- Différent de React et Vue car il compile les composants en JavaScript optimisé.
- Pas de runtime, ce qui le rend très performant.

---

## Avantages de Svelte

- Performances : pas de framework dans le navigateur, juste du JavaScript pur.
- Simplicité : syntaxe intuitive et minimale.
- Réactivité : mises à jour automatiques de l'UI lorsque l'état change.

---

## Concepts de base de Svelte

- **Composants** : les blocs de construction de l'interface utilisateur.
- **Props** : pour passer des données aux composants.
- **Stores** : gestion de l'état réactif.
- **Réactivité** : mise à jour automatique des composants lorsque les données changent. C'est les _states_ mais en plus simple.

---

## Exemple de composant Svelte

```js
<script>
  let count = 0; // La variable est réactive (state)

  const increment = () => {
    count += 1; // On peut modifier le state par mutation
  }
</script>

<button on:click={increment}>
  Cliquez-moi: {count}
</button>
```

---

## Réactivité et mise à jour automatique de l'UI

- Svelte met automatiquement à jour l'UI lorsque l'état change.
- Pas besoin d'utiliser `setState` ou `useState` comme dans React.

Exemple :

```
<script>
  let name = 'Svelte';
</script>

<input bind:value={name}>

<p>Hello, {name}!</p>
```

- Liaison bidirectionnelle avec `bind:value`.

---

## Styling avec Svelte

- Styles encapsulés par défaut dans les composants.
- Utilisation des balises `<style>`.

Exemple :

```
<style>
  p {
    color: purple;
  }
</style>

<p>This is a styled paragraph.</p>
```

- Les styles sont appliqués uniquement au composant.

---

## Différences avec React

---

## Architecture

- **React** : Utilise un DOM virtuel (Virtual DOM) pour optimiser les mises à jour de l'UI.
- **Svelte** : Compile les composants en JavaScript pur au moment de la construction, éliminant le besoin de Virtual DOM.

---

## Syntaxe et Apprentissage

- **React** :
  - Utilise JSX, un mélange de JavaScript et de XML.
  - Nécessite l'apprentissage de hooks ou de classes pour la gestion de l'état et du cycle de vie.
- **Svelte** :
  - Syntaxe intuitive et minimale, sans JSX.
  - Réactivité intégrée directement dans le langage.

---

## Gestion de l'état

- **React** :
  - Utilise des hooks (`useState`, `useReducer`, etc.) pour la gestion de l'état local.
  - Context API ou bibliothèques externes comme Zustand pour la gestion de l'état global (stores)
- **Svelte** :
  - Réactivité intégrée, les variables déclarées dans les composants sont réactives.
  - Utilisation de stores pour l'état global (inclus dans la lib).

---

## Taille du bundle

- **React** :
  - Taille du bundle plus grande due à la présence du runtime et du Virtual DOM.
  - Besoin de bibliothèques supplémentaires pour des fonctionnalités avancées.
- **Svelte** :
  - Taille du bundle plus petite car le code est compilé en JavaScript pur.
  - Pas de runtime, moins de dépendances externes nécessaires.

---

## Ecosystème et Communauté

- **React** :
  - Écosystème mature et vaste.
  - Large communauté, nombreuses ressources et bibliothèques tierces.
- **Svelte** :
  - Écosystème en croissance rapide.
  - Communauté plus petite mais dynamique.
  - Moins de bibliothèques tierces, mais de nombreux outils intégrés.

---

## Introduction à SvelteKit

---

- Framework basé sur Svelte pour construire des applications web complètes.
- SvelteKit est à Svelte ce que NextJS est à React.
- Gestion des routes, rendu côté serveur, génération de sites statiques, et plus.

---

## Avantages de SvelteKit

- Rendu côté serveur (SSR) pour de meilleures performances et SEO.
- Génération de sites statiques pour des déploiements rapides (SSG).
- Routage automatique basé sur la structure des fichiers.
- Support intégré pour TypeScript, SASS, SCSS, Tailwind, etc.

---

## Structure de base d'un projet SvelteKit

```
my-sveltekit-app/
├── src/
│ ├── routes/
│ │ └── index.svelte
│ ├── lib/
│ └── app.html
├── static/
├── svelte.config.js
└── package.json
```

---

## Exemple de route dans SvelteKit

`src/routes/index.svelte` :

```
<script>
  let message = "Hello, SvelteKit!";
</script>

<h1>{message}</h1>
```

---

## Concepts clés de SvelteKit

- **Routes** : Basées sur les fichiers dans le dossier `src/routes`.
- **Endpoints** : Pour gérer les requêtes API dans le dossier `src/routes`.
- **Layouts** : Pour partager des éléments de mise en page entre différentes routes.
- **Load Functions** : Pour précharger des données avant de rendre un composant.

---

## Création d'un projet SvelteKit

Création d'un nouveau projet :

```
npm create svelte@latest my-sveltekit-app
cd my-sveltekit-app
npm install
npm run dev
```

---

## Hands-On - Application Todo

- Création d'une application Todo simple.
- Utilisation des concepts de Svelte et SvelteKit.

---

## Ressources

- [Documentation officielle de Svelte](https://svelte.dev/docs)
- [Documentation officielle de SvelteKit](https://kit.svelte.dev/docs)
- [Tutoriels et exemples](https://svelte.dev/tutorial)
- [Exemples et comparaison entre différents frameworks](https://component-party.dev/)