Fondations techniques

Vue d’ensemble

Objectif : Comprendre pourquoi utiliser un framework, installer l’environnement, créer un premier composant interactif

---

Partie 1 : L’évolution des frameworks JavaScript

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

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 :

1. Syntax intuitive : ressemble au HTML/CSS/JS que vous connaissez déjà
2. Réactivité simple : pas de hooks, pas de this, juste des variables
3. Moins de concepts à apprendre : focus sur la création, pas la plomberie
4. 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

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

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

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

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

Structure d’un composant Svelte :

Un fichier .svelte contient 3 sections :

1. <script> : Logique JavaScript

   • Variables (données)
   • Fonctions (comportements)
   • Imports

2. 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

3. <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

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

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 :

1. Ajoutez des interactions :

   • Double-clic change une autre propriété
   • Hover affiche un message
   • Maintenir le clic 2 secondes déclenche un effet

2. Explorez d’autres événements :

   • on:mouseover et on:mouseout
   • on:keydown (si le bouton a le focus)

3. Créez un deuxième composant :

   • Copiez BoutonInteractif.svelte
   • Modifiez-le pour afficher un compteur
   • Utilisez-le dans App.svelte

4. 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