Découvrir les frameworks JavaScript modernes

Jour 1 — Comprendre les architectures front-end modernes

• Rappels sur HTML, CSS et JavaScript
• Le navigateur, le DOM et les outils de développement
• JavaScript côté client et côté serveur
• Différencier une bibliothèque d’un framework
• Comprendre le rôle d’un framework front-end
• Architecture classique, application monopage et rendu côté serveur
• Comprendre les principes d’une Single Page Application (SPA)
• Découvrir les architectures MVC, MVP et MVVM
• Identifier les principaux écosystèmes : React, Angular et Vue.js

Préparer un environnement de développement moderne

• Installer et utiliser Node.js et npm
• Comprendre le rôle du gestionnaire de dépendances
• Créer un projet avec Vite
• Organiser les fichiers et les modules d’une application
• Utiliser les modules JavaScript avec import et export
• Configurer les outils de développement du navigateur
• Découvrir les principes du linting et du formatage du code

Identifier les concepts communs aux frameworks

• Découper une interface en composants
• Comprendre les propriétés et l’état d’un composant
• Gérer les événements utilisateur
• Afficher des contenus conditionnels
• Générer des listes dynamiques
• Faire circuler les données entre les composants
• Comprendre le cycle de vie d’un composant

Jour 2 — Développer une application avec React

• Découvrir le fonctionnement et le positionnement de React
• Comprendre le Virtual DOM
• Créer une application React avec Vite
• Découvrir JSX
• Créer et organiser des composants fonctionnels
• Transmettre des données avec les propriétés
• Gérer les événements
• Afficher des contenus conditionnels
• Générer des listes de composants

Gérer l’état et le cycle de vie avec les Hooks

• Comprendre le principe des Hooks
• Gérer un état local avec useState
• Déclencher des traitements avec useEffect
• Partager une logique avec des Hooks personnalisés
• Faire remonter l’état entre les composants
• Contrôler les champs d’un formulaire
• Valider et traiter les données utilisateur

Structurer une application React

• Organiser les composants et les fichiers
• Réutiliser des composants
• Partager des données avec le Context
• Comprendre les limites du passage de propriétés en cascade
• Gérer les erreurs d’affichage
• Utiliser les fragments
• Découvrir les principes d’accessibilité dans React

Jour 3 — Routage, APIs et gestion des données

• Comprendre le fonctionnement du routage côté client
• Créer des routes et des vues
• Gérer les paramètres d’URL
• Créer une navigation sans rechargement de page
• Protéger ou conditionner l’accès à certaines routes
• Créer une page d’erreur et gérer les routes inconnues

Communiquer avec une API

• Comprendre l’architecture REST
• Effectuer des requêtes HTTP avec fetch
• Manipuler des données JSON
• Gérer les états de chargement
• Gérer les erreurs de communication
• Envoyer des données à un serveur
• Structurer les services d’accès aux données

Gérer l’état d’une application

• Distinguer état local et état global
• Partager un état avec le Context
• Comprendre les principes d’un gestionnaire d’état
• Découvrir Redux Toolkit
• Organiser les données et les actions
• Identifier les cas nécessitant une gestion d’état globale

Atelier React

• Créer une application monopage basée sur des composants
• Mettre en place le routage
• Consommer une API REST
• Gérer les formulaires, les erreurs et les chargements
• Organiser le code selon les bonnes pratiques

Jour 4 — Découvrir Vue.js

• Comprendre le positionnement et le fonctionnement de Vue.js
• Créer une application avec Vite
• Découvrir les Single File Components
• Utiliser l’interpolation et les directives
• Afficher des contenus conditionnels
• Générer des listes
• Gérer les événements
• Créer une liaison de données avec v-model

Structurer une application Vue.js

• Créer et organiser des composants
• Transmettre des propriétés
• Émettre et écouter des événements personnalisés
• Utiliser les propriétés calculées
• Observer les modifications de données
• Utiliser la Composition API
• Créer des fonctions réutilisables avec les composables

Routage et données avec Vue.js

• Mettre en place Vue Router
• Créer des routes et des vues
• Gérer les paramètres et la navigation
• Consommer une API REST
• Gérer les états de chargement et les erreurs
• Découvrir la gestion d’état avec Pinia

Comparer React et Vue.js

• Comparer leur approche des composants
• Comparer la gestion de l’état et des événements
• Comparer le routage et l’organisation des projets
• Identifier leurs avantages, limites et cas d’usage

Jour 5 — Découvrir Angular et choisir un framework

• Comprendre le positionnement d’Angular
• Découvrir TypeScript
• Créer un projet avec Angular CLI
• Comprendre la structure d’une application Angular
• Créer des composants et des templates
• Utiliser l’interpolation et le Data Binding
• Découvrir les directives et les pipes
• Comprendre les services et l’injection de dépendances

Routage, formulaires et échanges HTTP avec Angular

• Configurer les routes d’une application
• Créer une navigation entre les composants
• Créer et valider des formulaires
• Utiliser le client HTTP
• Comprendre les Observables et RxJS
• Récupérer et traiter des données distantes

Comparer les principaux frameworks JavaScript

• Comparer React, Angular et Vue.js
• Évaluer leur courbe d’apprentissage
• Comparer leur architecture et leur écosystème
• Identifier les besoins techniques et organisationnels du projet
• Prendre en compte la maintenabilité, les compétences de l’équipe et la pérennité
• Choisir un framework adapté au contexte

Panorama des autres solutions

• Comprendre le rôle historique de Backbone.js
• Découvrir Svelte et les frameworks compilés
• Identifier les solutions de rendu côté serveur et les méta-frameworks
• Comprendre les différences entre SPA, SSR et génération statique

Atelier de synthèse

• Analyser les besoins d’une application Web
• Définir son architecture front-end
• Choisir un framework adapté
• Créer une première structure de projet
• Présenter et justifier les choix techniques réalisés