Formation JavaScript : Programmation avancée

Programme de notre formation JavaScript : Programmation avancée

Introduction au JavaScript moderne avec ES6+

• Compatibilité des navigateurs et des runtimes
• Comment choisir la bonne version au bon moment ?
• Les outils à avoir pour bien démarrer (VS Code, DevTools, npm, yarn, Webpack, etc.)
• Variables modernes (let, const) – portée de bloc
• Fonctions fléchées (Arrow functions)
• Déstructuration (objets/tableaux)
• Opérateurs rest/spread (…) sur tableaux et objets
• Nouveaux opérateurs de sécurité (?., ??)
• Template literals (chaînes interpolées)
• Composition avec Mixins (réutilisabilité, modularité)
• Immutabilité (principes et bonnes pratiques)
• Atelier pratique : Installez votre environnement JavaScript moderne (VS Code, npm, DevTools), puis créez un script simple intégrant les nouvelles syntaxes (déstructuration, opérateurs avancés, fonctions fléchées, etc.) afin de manipuler efficacement des données structurées.

Évolutions ECMAScript (ES6 ➜ ES2024)

• ES6 (2015) : Classes, Modules, let/const, Arrow functions
• ES7 (2016) : Exponentiation, Array.includes()
• ES8 (2017) : Async/Await, Object.values()
• ES9 (2018) : Rest/Spread objets, Regex améliorés
• ES10 (2019) : Array.flat(), Object.fromEntries()
• ES11 (2020) : Optional chaining (?.), Nullish coalescing (??)
• ES12 (2021) : Promise.any(), Séparateurs numériques (_)
• ES13 (2022) : Champs privés (#), Méthodes privées
• ES14 (2023) : findLast(), améliorations Regex
• ES15 (2024) : Ergonomie, précision des types, optimisation performance
• Le futur ES2025 : pattern matching, structures immuables (Records/Tuples)
• Atelier pratique : Implémentez aux choix 3 nouvelles fonctionnalités d’ES6+.

Fonctions avancées en JavaScript

• Closures (fonctions fermées sur un contexte lexical)
• Contexte d’exécution (this) et méthodes call/apply/bind
• Fonctions fléchées vs fonctions classiques (liaison du this)
• Fonctions anonymes immédiates (IIFE)
• Générateurs (fonction* avec yield) et itérateurs personnalisés
• Atelier pratique : Implémenter une fonction à closure permettant de créer un compteur à valeur privée (mémoire d’état interne).

Programmation orientée objet en JS

• Prototypes et héritage prototypal
• Fonctions constructrices et mot-clé new
• Classes ES6 (syntaxe class, héritage avec extends, champs privés #)
• Propriétés et méthodes d’instance vs statiques
• Atelier pratique : Concevoir une petite hiérarchie d’objets (classe et sous-classe) pour modéliser un cas concret mettant en œuvre un héritage.

Architecture & patterns JS

• Modularité et SOLID en JS
• Patterns Observateur, Factory, Singleton
• Injection de dépendances
• Maintenabilité et évolutivité
• Atelier pratique : Implémenter le pattern Observateur pour notifier les composants.

Modules et organisation du code

• Modules ES6 (import/export)
• Bundler et transpilation (Webpack, Babel)
• Gestion des dépendances avec npm (fichier package.json, scripts)
• Atelier pratique : Refactoriser une application existante en modules ES6 et la construire à l’aide d’un bundler (ex : Webpack) pour optimiser le chargement.

JavaScript Avancé asynchrone

• Gestion de l’asynchrone et boucle événementielle (event loop)
• Modèle d’exécution : event loop, stack, task & micro-task queues
• Rappels de fonctions (callbacks) et inversion de contrôle
• Promesses JavaScript (objets Promise, chaînes then/catch)
• Syntaxe moderne async/await pour les promesses
• Promises : création, chaînage, gestion d’erreurs, Promise.allSettled
• async / await : parallélisme, annulation avec AbortController
• Itérateurs / générateurs asynchrones (for-await-of)
• API Web asynchrones : fetch, Streams, Web Workers
• Appels HTTP avec l’API Fetch (requêtes AJAX modernes)
• Atelier pratique : Consommer des données depuis une API externe en utilisant fetch et async/await afin d’afficher des résultats dynamiques dans la page.

Composants Web natifs (Web Components)

• Éléments HTML personnalisés (API Custom Elements)
• Shadow DOM (encapsulation du DOM et des styles)
• Templates HTML et slots pour le contenu interne des composants
• Cycle de vie des Web Components (méthodes de callback comme connectedCallback, etc.)
• Atelier pratique : Créer un composant Web personnalisé (Custom Element) avec Shadow DOM pour encapsuler un widget réutilisable et stylé de manière isolée.

Qualité du code et tests avancés

• Analyse statique avec ESLint (linting et règles de codage)
• Formatage de code automatique avec Prettier
• Tests unitaires automatisés avec Jest
• Atelier pratique : Mettre en place ESLint et Prettier sur un projet existant, puis écrire et exécuter un test unitaire simple avec Jest pour valider une fonction.

Tour d’horizon des Micro-frameworks JavaScript légers

• Alpine.js (framework minimaliste s’intégrant via de simples attributs HTML)
• Lit (bibliothèque légère pour construire des Web Components réactifs)
• Svelte (framework compilé, sans runtime lourd côté navigateur)
• Atelier pratique : Expérimenter un de ces micro-frameworks en implémentant une fonctionnalité simple (par exemple un compteur interactif) afin de comparer leur approche à celle du JS natif (vanilla).

Sécurité et bonnes pratiques

• Failles XSS et injections côté client (sécurité du code navigateur)
• Politique de sécurité de contenu (Content Security Policy)
• Compatibilité des versions ECMAScript (cibles navigateurs et transpilation avec Babel)
• Choix technologiques adaptés (JavaScript natif vs frameworks selon les besoins du projet)
• Atelier pratique : Analyser une base de code existante pour corriger les failles XSS potentielles et appliquer les bonnes pratiques de sécurité tout en adaptant le code aux contraintes de compatibilité.