Séance 1b - Fondations techniques

Vue d’ensemble

Durée : 1.5 à 2 heures
Objectif : Comprendre pourquoi utiliser un framework, installer l’environnement, créer un premier composant interactif

Timing de la séance

10 min : Histoire des frameworks JavaScript
10 min : Panorama des options actuelles
20 min : Installation et setup
40 min : Premier composant interactif
10 min : Checklist et prochaines étapes

Partie 1 : L’évolution des frameworks JavaScript (10 min)

Pourquoi des frameworks JavaScript ?

Au début était le JavaScript vanilla…

Dans les années 2000-2010, créer une interface web interactive complexe en JavaScript pur était fastidieux :

Manipulation manuelle du DOM (document.getElementById, innerHTML)
Gestion complexe de l’état de l’application
Code répétitif et difficile à maintenir
Synchronisation manuelle entre données et interface

Problèmes concrets :

Quand une donnée change, vous devez mettre à jour manuellement tous les éléments HTML concernés
Le code devient rapidement un plat de spaghettis
Difficile de réutiliser des composants
Bugs fréquents (oubli de mise à jour, incohérences d’état)

Les frameworks résolvent ces problèmes en apportant :

Réactivité : l’interface se met à jour automatiquement quand les données changent
Composants : blocs réutilisables et isolés
Architecture : structure claire pour organiser le code
Outils : écosystème de développement performant

Timeline des frameworks JavaScript

2006 : jQuery

Premier grand succès pour simplifier le JavaScript
Manipulation du DOM simplifiée
Mais toujours manipulation manuelle, pas de composants
Encore utilisé sur ~70% des sites web (legacy)

2010 : Backbone.js / Knockout.js

Premiers frameworks avec architecture MVC (Modèle-Vue-Contrôleur)
Introduction du data-binding basique
Fondations des concepts modernes

2010 : AngularJS (Angular 1)

Premier framework “batteries included” par Google
Two-way data binding révolutionnaire
Complexe et parfois lent

2013 : React

Créé par Facebook
Révolution : Virtual DOM et composants fonctionnels
“Learn once, write anywhere”
Devient rapidement le leader du marché

2014 : Vue.js

Créé par Evan You (ex-Google)
Équilibre entre Angular et React
Plus simple d’accès, syntax template familière
Très populaire en Asie et en Europe

2016 : Angular (2+)

Réécriture complète d’AngularJS
TypeScript obligatoire
Plus performant mais courbe d’apprentissage raide
Utilisé surtout en entreprise

2019 : Svelte

Créé par Rich Harris (NYT)
Approche radicalement différente : compilation au lieu de runtime
Syntaxe proche du HTML/CSS/JS pur
Performances optimales
Courbe d’apprentissage douce

2023-2024 : Nouvelles vagues

Solid.js, Qwik : optimisations extrêmes
Astro : architecture multi-framework
Évolution continue de l’écosystème

Partie 2 : Panorama des options actuelles (10 min)

Comparaison objective des principaux frameworks

Framework	Créateur	Philosophie	Points forts	Points faibles
React	Meta/Facebook	Librairie UI avec JSX	Écosystème immense, jobs nombreux, communauté	Courbe d’apprentissage (hooks), boilerplate
Vue	Evan You	Framework progressif	Équilibré, documentation excellente, flexible	Moins d’offres d’emploi que React
Angular	Google	Framework complet	Structure forte, TypeScript natif, tooling	Lourd, complexe pour débutants
Svelte	Rich Harris	Compilateur	Syntax simple, performances, peu de code	Écosystème plus petit, moins de jobs

React (le leader du marché)

Concept clé : Virtual DOM et composants fonctionnels

import { useState } from 'react';

function BoutonInteractif() {
  const [couleur, setCouleur] = useState('bleu');

  return (
    <button onClick={() => setCouleur(couleur === 'bleu' ? 'rouge' : 'bleu')}>
      Je suis {couleur}
    </button>
  );
}

Forces :

Immense communauté et écosystème
React Native pour mobile
Demandé sur le marché du travail

Faiblesses pédagogiques :

JSX peut dérouter les débutants
Hooks (useState, useEffect…) pas intuitifs
Boilerplate important

Vue (l’équilibre)

Concept clé : Templates HTML augmentés

<template>
  <button @click="changerCouleur">Je suis {{ couleur }}</button>
</template>

<script>
export default {
  data() {
    return { couleur: 'bleu' };
  },
  methods: {
    changerCouleur() {
      this.couleur = this.couleur === 'bleu' ? 'rouge' : 'bleu';
    }
  }
};
</script>

Forces :

Syntax familière (HTML, CSS, JS séparés)
Options API simple pour débutants
Documentation exemplaire

Faiblesses pédagogiques :

this peut être confus
Deux APIs (Options vs Composition)

Svelte (le compilateur)

Concept clé : Pas de runtime, compilation en JavaScript pur

<script>
  let couleur = 'bleu';

  function changerCouleur() {
    couleur = couleur === 'bleu' ? 'rouge' : 'bleu';
  }
</script>

<button on:click={changerCouleur}>
  Je suis {couleur}
</button>

Forces :

Syntax la plus proche du HTML/CSS/JS natif
Réactivité sans hooks ni this
Performances optimales (pas de Virtual DOM)
Moins de code, plus de clarté

Faiblesses :

Écosystème plus petit
Moins de ressources d’apprentissage
Moins demandé sur le marché du travail

Pourquoi Svelte pour ce cours ?

Raisons pédagogiques :

Syntax intuitive : ressemble au HTML/CSS/JS que vous connaissez déjà
Réactivité simple : pas de hooks, pas de this, juste des variables
Moins de concepts à apprendre : focus sur la création, pas la plomberie
Feedback rapide : code concis = expérimentation facilitée

Ce n’est pas un choix dogmatique :

Les concepts appris (composants, réactivité, événements) se transfèrent à React/Vue
Après ce cours, vous aurez les fondations pour apprendre n’importe quel framework
Le but est d’apprendre à penser en composants interactifs, pas de devenir expert Svelte

Métaphore pour votre profil de Master MM :

Svelte est à React ce que Blender est à Maya
Outil plus accessible pour apprendre, compétences transférables
Une fois les concepts maîtrisés, passer à d’autres outils est plus facile

Partie 3 : Installation et setup (20 min)

Prérequis

Avant de commencer, vérifiez que vous avez :

1. Node.js installé

node --version
# Doit afficher v18+ ou v20+

Si pas installé : nodejs.org (version LTS recommandée)

2. Un éditeur de code

VSCode (recommandé)
PhpStorm
Autre éditeur moderne

3. Extension Svelte (si VSCode)

Installer l’extension “Svelte for VS Code” par Svelte

4. Un terminal fonctionnel

Terminal intégré de votre éditeur
Terminal système (Terminal.app sur Mac, PowerShell sur Windows)

Créer le projet

Ouvrir un terminal et exécuter :

npm create vite@latest mon-projet-rtmf -- --template svelte

Ce que cette commande fait :

npm create vite@latest : utilise Vite (outil de build moderne et rapide)
mon-projet-rtmf : nom de votre projet (modifiable)
--template svelte : utilise le template Svelte

Installer les dépendances :

cd mon-projet-rtmf
npm install

Lancer le serveur de développement :

npm run dev

Vérifier que ça fonctionne :

Ouvrir http://localhost:5173 dans votre navigateur
Vous devriez voir la page d’accueil Vite + Svelte

Astuce : Laissez le serveur tourner pendant que vous travaillez. Les changements s’affichent automatiquement (hot reload).

Structure du projet

Explorer la structure créée :

mon-projet-rtmf/
├── public/              # Fichiers statiques (images, fonts...)
├── src/
│   ├── lib/            # Composants réutilisables (vide au départ)
│   ├── App.svelte      # Composant principal
│   ├── main.js         # Point d'entrée JavaScript
│   └── app.css         # Styles globaux
├── index.html          # Page HTML de base
├── package.json        # Configuration et dépendances
└── vite.config.js      # Configuration Vite

Fichiers clés :

index.html : Point d’entrée HTML

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mon Projet RTMF1M</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

src/main.js : Bootstrap de l’application

import './app.css'
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app'),
})

export default app

src/App.svelte : Composant racine (nous allons le modifier)

Partie 4 : Premier composant interactif (40 min)

Objectif

Créer un bouton qui change de couleur au clic, pour comprendre :

La structure d’un composant Svelte
La réactivité automatique
Les événements
Les styles scopés

Étape 1 : Créer le composant (10 min)

Créer le dossier et le fichier :

mkdir src/lib

Créer src/lib/BoutonInteractif.svelte avec ce contenu :

<script>
  // Variable réactive : quand elle change, l'interface se met à jour automatiquement
  let couleur = 'bleu';

  // Fonction déclenchée au clic
  function changerCouleur() {
    couleur = couleur === 'bleu' ? 'rouge' : 'bleu';
  }
</script>

<!-- Template HTML : le bouton affiche la couleur actuelle -->
<button
  class={couleur}
  on:click={changerCouleur}
>
  Je suis {couleur}
</button>

<!-- Styles scopés : ne s'appliquent qu'à ce composant -->
<style>
  button {
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
  }

  .bleu {
    background: #3498db;
    color: white;
  }

  .rouge {
    background: #e74c3c;
    color: white;
  }

  button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  button:active {
    transform: scale(0.98);
  }
</style>

Étape 2 : Utiliser le composant (5 min)

Modifier src/App.svelte :

<script>
  import BoutonInteractif from './lib/BoutonInteractif.svelte';
</script>

<main>
  <h1>Mon premier composant interactif</h1>
  <p>Cliquez sur le bouton pour changer sa couleur :</p>
  <BoutonInteractif />
</main>

<style>
  main {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }

  h1 {
    color: #333;
    margin-bottom: 1rem;
  }

  p {
    color: #666;
    margin-bottom: 2rem;
  }
</style>

Sauvegarder et vérifier dans le navigateur : le bouton devrait apparaître et changer de couleur au clic.

Étape 3 : Comprendre ce qu’on vient de faire (15 min)

Structure d’un composant Svelte :

Un fichier .svelte contient 3 sections :

<script> : Logique JavaScript
- Variables (données)
- Fonctions (comportements)
- Imports
Template HTML : Structure et affichage
- HTML standard
- Expressions {variable} pour afficher des données
- Directives on:event={fonction} pour les événements
- Directives class={variable} pour classes dynamiques
<style> : Apparence CSS
- CSS standard
- Scopé automatiquement : ne s’applique qu’à ce composant

Concepts clés introduits :

1. Réactivité automatique

let couleur = 'bleu';  // Variable réactive

function changerCouleur() {
  couleur = 'rouge';  // Simple assignation → interface mise à jour automatiquement
}

Magie Svelte : Pas besoin de setState (React) ou this.$set (Vue).
Une simple assignation (=) déclenche la mise à jour de l’interface.

2. Événements

<button on:click={changerCouleur}>

Syntax : on:nomEvenement={fonction}

Événements courants :

on:click : clic de souris
on:input : saisie de texte
on:submit : envoi de formulaire
on:mouseover : survol
on:keydown : touche clavier pressée

3. Classes dynamiques

<button class={couleur}>

La classe CSS appliquée change en fonction de la variable couleur.

Variante pour toggle :

<button class:active={estActif}>

Ajoute la classe active seulement si estActif est true.

4. Interpolation de variables

Je suis {couleur}

Affiche la valeur de la variable dans le HTML.

5. Styles scopés

button {
  /* Ne s'applique qu'aux <button> de ce composant */
}

Svelte ajoute automatiquement des classes uniques pour isoler les styles.

Étape 4 : Expérimentation guidée (10 min)

Challenges à essayer ensemble :

Challenge 1 : Ajouter une troisième couleur

Modifier la fonction pour alterner entre bleu, rouge et vert :

function changerCouleur() {
  if (couleur === 'bleu') {
    couleur = 'rouge';
  } else if (couleur === 'rouge') {
    couleur = 'vert';
  } else {
    couleur = 'bleu';
  }
}

Et ajouter le style :

.vert {
  background: #2ecc71;
  color: white;
}

Challenge 2 : Ajouter un compteur de clics

<script>
  let couleur = 'bleu';
  let clics = 0;

  function changerCouleur() {
    couleur = couleur === 'bleu' ? 'rouge' : 'bleu';
    clics += 1;  // Incrémenter le compteur
  }
</script>

<button class={couleur} on:click={changerCouleur}>
  Je suis {couleur} ({clics} clics)
</button>

Challenge 3 : Changer la transition

Modifier la durée ou l’easing :

transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

Partie 5 : Checklist et prochaines étapes (10 min)

Vérification de fin de séance

Environnement de développement fonctionnel
Serveur Vite qui tourne et affiche votre page
Premier composant créé et testé
Compréhension de la réactivité Svelte
Git initialisé (optionnel mais recommandé)

Pour initialiser Git :

git init
git add .
git commit -m "Initial commit - Premier composant Svelte"

Mission technique (optionnelle)

Expérimenter avec le bouton interactif :

Ajoutez des interactions :
- Double-clic change une autre propriété
- Hover affiche un message
- Maintenir le clic 2 secondes déclenche un effet
Explorez d’autres événements :
- on:mouseover et on:mouseout
- on:keydown (si le bouton a le focus)
Créez un deuxième composant :
- Copiez BoutonInteractif.svelte
- Modifiez-le pour afficher un compteur
- Utilisez-le dans App.svelte
Jouez avec les styles :
- Animations CSS @keyframes
- Dégradés de couleurs
- Ombres portées

Ressources pour approfondir

Documentation Svelte :

Tutorial officiel interactif - Excellent point de départ
Documentation API - Référence complète
Exemples - Cas d’usage concrets

Outils de développement :

Svelte REPL - Tester du code en ligne
Svelte DevTools - Extension navigateur

Lectures complémentaires :

Ressources pédagogiques - Tutoriels et outils
Eloquent JavaScript - Approfondir JavaScript

Prochaines séances

Séance 2 : Discussion collective

Partage des découvertes d’œuvres
Identification des territoires
Premiers concepts de projets

Module 2 : Fondamentaux techniques

Composants, props, événements
Réactivité et stores
Interactions avancées
Animations et transitions

Concepts à retenir

Pourquoi un framework JavaScript ?

Gestion automatique de l’état et de l’interface
Architecture en composants réutilisables
Code plus maintenable et scalable

Pourquoi Svelte pour ce cours ?

Syntax intuitive proche du HTML/CSS/JS natif
Réactivité simple sans hooks ni API complexe
Performances optimales
Focus sur la création, pas la plomberie

Structure d’un composant Svelte

<script> : logique JavaScript
Template HTML : structure et affichage
<style> : CSS scopé automatiquement

Réactivité Svelte

Simple assignation = met à jour l’interface
Pas de setState, pas de this, juste du JavaScript