Skip to content

Latest commit

 

History

History
411 lines (312 loc) · 9.99 KB

slides.md

File metadata and controls

411 lines (312 loc) · 9.99 KB
layout title drawings
cover
Introduction à Svelte
persist

Introduction à Svelte

Presenté par Papa Elhadj Abdoulaye NDOYE

Plan

  • 🤔 C'est quoi Svelte ?
  • ✨ Le système de réactivité
  • 🪄 Runes
  • 🧑🏽‍💻 Coding time
  • 📋 Svelte + Todo
{{ $nav.currentPage }} | {{ $slidev.configs.title }}

Papa Elhadj Abdoulaye NDOYE

  • 💻 Développeur Fullstack
  • 🤵 Chargé des programmes et activités de Galsen DEV
  • 🕹️ #1 Tetris au Senegal
{{ $nav.currentPage }} | {{ $slidev.configs.title }}

🤔 C'est quoi Svelte ?

Framework JavaScript moderne pour construire des interfaces utilisateur web.

  • Crée en novembre 2006 par Rich Harris
  • Actuellemnt à la version 5
  • Fonctionne comme un compileur afin créer des interfaces web réactives
  • Aucun script ou bibliothèque supplémentaire n'est expédié en production
{{ $nav.currentPage }} | {{ $slidev.configs.title }}

✨ Le système de réactivité

Le cœur de Svelte réside dans son système de réactivité.

```html {*|4,1,3,13|3,13,5,12|3,13,7-10|3,13,9,1|*}
<button id="counter">Compteur: 0</button>

<script>
  let count = 0;
  const counterEl = document.getElementById('counter');

  function increment() {
    count += 1;
    counterEl.textContent = `Compteur: ${count}`;
  }

  counterEl.addEventListener('click', increment);
</script>
```

```svelte {*|1,3,9,4|3,9,6-8|*}
<button onclick={increment}>Compteur: {count}</button>

<script>
let count = $state(0);

function increment() {
    count += 1;
}
</script>
```
<script setup> import { ref } from 'vue' const counter = ref(0) </script>
Compteur: {{counter}}
{{ $nav.currentPage }} | {{ $slidev.configs.title }}

🪄 Runes

Les runes sont des mot-clefs utilisés dans la syntaxe de Svelte

$state crée une variable réactive (l'UI va reagir aux changements de cette variable)
```svelte <script> let message = $state('hello'); </script> ```
$derived utilisée pour créer des valeurs dérivées qui réagissent aux changements de leurs dépendances
```svelte <script> let message = $state('hello'); let messageLength = $derived(message.length) </script> ```
$props utilisée pour déclarer et accéder aux propriétés d'un composant
```svelte <script> const {propNum1, propNum2} = $props() </script> ```
{{ $nav.currentPage }} | {{ $slidev.configs.title }}

layout: two-cols

🧑🏽‍💻 Coding time

pepega_hacker

::right::

Pré-requis

  • Connaissance de base en HTML et CSS
  • Familier avec JavaScript
  • Node.js dans votre machine
  • Un éditeur de texte
{{ $nav.currentPage }} | {{ $slidev.configs.title }}

📋 Svelte + Todo

Votre navigateur ne supporte pas les vidéos 😢. Toutefois vous pouvez la télécharger ici.

{{ $nav.currentPage }} | {{ $slidev.configs.title }}

layout: two-cols

📋 Svelte + Todo

  1. Installer les dépendances avec npm install
  2. Ouvrir le projet sur votre editeur
  3. Visualiser le project avec npm run dev
  4. Visiter http://localhost:5173 sur votre navigateur

::right::

Votre navigateur ne supporte pas les vidéos 😢. Toutefois vous pouvez la télécharger ici.

layout: image-right image: /app-filetree.png backgroundSize: contain

📋 Svelte + Todo

  1. Ouvrir +page.svelte
  2. Ajouter ces lines 👇🏿 dans le <script tag

<script>
  import '../app.css';

  let todos = $state([
    {id: '1', title: 'Item #1', completed: false },
    {id: '2', title: 'Item #2', completed: false },
  ])
</script>

Ici nous avons créer une variable réactive avec $state() et nous allons l'utiliser dans notre markup HTML.

📋 Svelte + Todo

  • Selectionnez tout le contenu de la balise <ul class="todo__list">
  • Supprimez tout
  • Remplacer par ce bout de code

📋 Svelte + Todo

<ul class="todo__list">
    {#each todos as todo, i (todo.id)}
        <li class="todo__list__item">
            <label>
                <input bind:checked={todos[i].completed} type="checkbox" id="todo-{todo.id}" name="todo-{todo.id}" />
                <span>{todo.title}</span>
            </label>
            <button aria-label="Supprimer todo">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
                    <path
                        fill="none"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6"
                    />
                </svg>
            </button>
        </li>
    {/each}
</ul>

📋 Svelte + Todo

<script>
  function addTodo (e) {
    if (e.key === 'Enter') return

    todos.push({ id: crypto.randomUUID(), title: e.target.value, completed: false })

    e.target.value = ''
  }
</script>

<header class="todo__header">
    <input
        onkeydown={addTodo}
        placeholder="Ajouter une todo"
        type="text" />
</header>

📋 Svelte + Todo

  • Ajout de la fonction deleteTodo(id)
<script>
  function addTodo (id) {
    todos = todos.filter(todo => todo.id !== id)
  }
</script>

  • Utilisation de l'event click sur le button
<button onclick={() => deleteTodo(todo.id)} aria-label="Supprimer todo">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
        <path
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6"
        />
    </svg>
</button>

📋 Svelte + Todo

Pour le reste vous pouvez suivre ces liens

layout: end

👏🏿 Merci de votre attention