Panorama des frameworks : Angular, React et Vue

1. Objectifs

   • Comprendre ce qu'apporte un framework par rapport au JavaScript « vanilla ».
   • Connaître les notions communes : composants, réactivité, liaison de données, routage.
   • Découvrir Angular, React et Vue à travers le même composant.
   • Savoir comparer ces outils et choisir selon le projet.

2. Pourquoi un framework ?

   • Dans les chapitres précédents, vous avez manipulé le DOM à la main : sélectionner un élément, créer des balises, mettre à jour un texte à chaque changement de donnée. Pour une application de plusieurs dizaines d'écrans, ce travail devient long et source d'erreurs : on oublie de mettre à jour un affichage, le code se répète, l'état de l'application est dispersé.
   • Un framework front-end apporte une structure commune :
     • les composants: des blocs réutilisables qui regroupent le HTML, le style et le comportement (une carte, un formulaire, une barre de navigation) ;
     • la réactivité: quand une donnée change, l'affichage se met à jour automatiquement, sans textContent ni createElement;
     • le routage: plusieurs « pages » dans une seule application (SPA), sans rechargement ;
     • des outils: création de projet, tests, build, conventions partagées par toute l'équipe.
   • Bonne nouvelle : tout ce que vous avez appris reste indispensable. Les frameworks sont écrits en JavaScript (ou TypeScript) et utilisent les modules, les fonctions fléchées, les classes, les promesses, fetch…

   

3. Le même composant dans les trois frameworks

   • Objectif : un composant qui affiche un titre reçu en paramètre, un compteur de stagiaires inscrits, un bouton « Inscrire » et le message « Le groupe est complet ! » à partir de 3 inscrits.
   • Ces trois versions ont été testées avec Angular 22, React 19 et Vue 3.5 : elles produisent exactement le même résultat.

   Angular (fichier compteur.ts)

   import { Component, computed, input, signal } from "@angular/core";
   
   @Component({
     selector: "app-compteur",
     template: `
       <div class="card p-3">
         <h2>{{ titre() }}</h2>
         <p>Stagiaires inscrits : {{ inscrits() }}</p>
         <button (click)="inscrire()">Inscrire</button>
         @if (complet()) {
           <p>Le groupe est complet !</p>
         }
       </div>
     `,
   })
   export class Compteur {
     titre = input("Formation Angular");
     inscrits = signal(0);
     complet = computed(() => this.inscrits() >= 3);
   
     inscrire() {
       this.inscrits.update((n) => n + 1);
     }
   }

   • Un composant est une classe TypeScript décorée par @Component. Les signaux (signal, computed, input) gèrent la réactivité ; @if affiche un bloc sous condition ; (click) lie un événement.

   React (fichier App.jsx)

   import { useState } from "react";
   
   function Compteur({ titre }) {
     const [inscrits, setInscrits] = useState(0);
   
     return (
       <div className="card p-3">
         <h2>{titre}</h2>
         <p>Stagiaires inscrits : {inscrits}</p>
         <button onClick={() => setInscrits(inscrits + 1)}>Inscrire</button>
         {inscrits >= 3 && <p>Le groupe est complet !</p>}
       </div>
     );
   }
   
   export default function App() {
     return <Compteur titre="Formation React" />;
   }

   • Un composant est une fonction qui renvoie du JSX (du HTML écrit dans le JavaScript). Le hook useState gère l'état ; les paramètres arrivent dans les props ({ titre }). On écrit className au lieu de class.

   Vue (fichier App.vue)

   <script setup>
   import { ref, computed } from "vue";
   
   const props = defineProps({ titre: { type: String, default: "Formation Vue" } });
   const inscrits = ref(0);
   const complet = computed(() => inscrits.value >= 3);
   </script>
   
   <template>
     <div class="card p-3">
       <h2>{{ props.titre }}</h2>
       <p>Stagiaires inscrits : {{ inscrits }}</p>
       <button @click="inscrits++">Inscrire</button>
       <p v-if="complet">Le groupe est complet !</p>
     </div>
   </template>

   • Un composant est un fichier .vue en trois parties : <script setup>, <template> et éventuellement <style>. ref et computed gèrent la réactivité ; v-if et @click sont des directives.

4. Angular

   • Framework complet maintenu par Google, écrit en TypeScript (version 22 en novembre 2026).
   • Tout est fourni : composants, routage, formulaires, client HTTP, tests, internationalisation, et une interface en ligne de commande (Angular CLI) qui génère le code.
   • Très utilisé dans les grandes entreprises et les administrations pour les applications de gestion. C'est le framework étudié dans le Module 10 – Développement Front-End.
   • Création d'un projet : npm install -g @angular/cli puis ng new mon-app et ng serve.

5. React

   • Bibliothèque d'interfaces maintenue par Meta (version 19). Elle ne s'occupe que de l'affichage ; on choisit les autres outils (routage, gestion des données…).
   • La plus utilisée au monde, avec un écosystème immense ; React Native permet de créer des applications mobiles avec les mêmes principes.
   • Pour un site complet, on utilise souvent un framework construit sur React, comme Next.js.
   • Création d'un projet : npm create vite@latest mon-app -- --template react puis npm install et npm run dev.

6. Vue

   • Framework progressif créé par Evan You (version 3.5), développé par une communauté indépendante.
   • Réputé pour sa courbe d'apprentissage douce : on peut l'ajouter à une seule page existante ou construire une application complète avec Vue Router et Pinia. Nuxt joue pour Vue le rôle de Next.js pour React.
   • Création d'un projet : npm create vue@latest puis npm install et npm run dev.

7. Comparaison

	Angular	React	Vue
Type	Framework complet	Bibliothèque d'interface	Framework progressif
Maintenu par	Google	Meta et la communauté	Evan You et la communauté
Langage	TypeScript obligatoire	JavaScript ou TypeScript + JSX	JavaScript ou TypeScript
Écriture d'un composant	Classe + décorateur @Component	Fonction qui renvoie du JSX	Fichier .vue (script, template, style)
Réactivité	Signaux (signal, computed)	Hooks (useState, useEffect)	ref, reactive, computed
Outils fournis	Presque tout (CLI, routage, HTTP, formulaires)	À choisir (ou Next.js)	Officiels mais séparés (Router, Pinia)
Prise en main	Plus longue, très structurée	Moyenne	La plus douce
Usage typique	Grandes applications de gestion	Sites et applications de toutes tailles, mobile	Projets de toutes tailles, intégration progressive

• D'autres outils existent : Svelte (un compilateur qui produit un code très léger), Solid, Astro (sites de contenu)… Les concepts restent les mêmes.

Activité 1 : lire le code

• Dans chacune des trois versions du compteur, repérez : (a) où est déclaré l'état inscrits; (b) comment on le modifie ; (c) comment on affiche une donnée dans le HTML ; (d) comment on affiche un bloc sous condition.

Activité 2 : essayer deux frameworks

• Créez un projet React et un projet Vue avec Vite. Remplacez le contenu de App.jsx et de App.vue par les exemples de la leçon et vérifiez le fonctionnement.
• Ajoutez un bouton « Désinscrire » qui ne descend jamais sous 0.
• Déposez les deux projets dans un dépôt GitHub js-frameworks (deux dossiers).

Activité 3 : recherche

• Sur un site d'offres d'emploi de votre région, comptez les offres qui mentionnent Angular, React et Vue. Présentez le résultat dans un tableau et commentez-le en trois phrases.

Activité 4 : choisir

• Pour chaque projet, proposez un choix (sans framework, Angular, React ou Vue) et justifiez : (a) le site vitrine d'une boulangerie avec un formulaire de contact ; (b) l'application de gestion des stagiaires d'un centre de formation, développée par une équipe de 6 personnes ; (c) une application web et mobile de réservation ; (d) un module interactif à ajouter dans une page existante.