Formation Maîtriser la Programmation Réactive JavaScript avec RxJS

Programme de la formation
Maîtriser la Programmation Réactive JavaScript avec RxJS

• Introduction à la programmation réactive et à RxJS

  - Définition et principes de la programmation réactive (PR)
  - Historique et évolution de RxJS
  - Positionnement de RxJS dans l'écosystème web (Angular, React, Vue)
  - Avantages de la PR pour la gestion des données asynchrones
  - Environnement de développement et outils nécessaires

• Fondamentaux des Observables (création et vie)

  - Comprendre les Observables : Producteurs de données asynchrones
  - Création d'Observables : `of`, `from`, `fromEvent`, `interval`, `timer`
  - Flux de vie d'un Observable : Création, exécution, notification, complétion, erreur
  - La notion de cold vs hot Observables
  - Premiers exemples pratiques de souscription et désouscription

• Opérateurs de création et de transformation essentiels

  - Opérateurs de transformation : `map`, `pluck`, `filter`, `take`
  - Opérateurs temporels : `debounceTime`, `throttleTime`
  - Opérateurs combinatoires de base : `concat`, `merge`, `combineLatest`
  - Chaining d'opérateurs pour des flux complexes
  - Exercices pratiques de manipulation de flux simples

• Gestion des erreurs et complétion des Observables

  - Gestion des erreurs : Opérateurs `catchError`, `retry`, `retryWhen`
  - La complétion des Observables : Quand et comment un flux se termine
  - Utilisation de `finalize` pour des actions post-complétion ou erreur
  - Différence entre erreur retournée et erreur propagée
  - Stratégies de gestion des erreurs pour des applications robustes

• Opérateurs avancés de filtrage, conditionnement et agrégation

  - Opérateurs de filtrage : `distinctUntilChanged`, `skip`, `takeUntil`
  - Opérateurs conditionnels : `iif`, `defaultIfEmpty`, `every`
  - Opérateurs d'agrégation : `reduce`, `scan`, `count`
  - Scénarios d'utilisation avancés de ces opérateurs
  - Mis en pratique pour des cas métier complexes

• `Subject` et `Multicasting` : Partage de flux

  - Introduction aux Subjects : `Subject`, `BehaviorSubject`, `ReplaySubject`, `AsyncSubject`
  - Cas d'utilisation des différents types de Subjects
  - Multicasting avec `shareReplay`, `publishReplay` et `refCount`
  - Les pièges à éviter avec les Subjects et la gestion des abonnements multiples
  - Comparaison entre Observables et Subjects

• Programmation à l'aide des opérateurs de combinaison

  - Opérateurs de combinaison avancés : `forkJoin`, `zip`, `withLatestFrom`
  - Gérer les dépendances de données asynchrones
  - Orchestrer plusieurs requêtes HTTP parallèles ou séquentielles
  - Scénarios d'utilisation pour des UIs complexes
  - Meilleures pratiques pour combiner des Observables

• Opérateurs de haut niveau : `switchMap`, `mergeMap`, `concatMap`, `exhaustMap`

  - Comprendre les différences fondamentales entre ces opérateurs
  - Quand utiliser `switchMap` pour les recherches auto-complétées
  - Quand utiliser `mergeMap` pour des requêtes parallèles
  - Quand utiliser `concatMap` pour des requêtes séquentielles garanties
  - Quand utiliser `exhaustMap` pour éviter les requêtes redondantes

• Traitement des événements UI et données de formulaires

  - Capturer des événements DOM avec `fromEvent`
  - Gestion des interactions utilisateur (clics, saisies clavier, glisser-déposer)
  - Validation de formulaires réactifs avec RxJS
  - Débogage des flux d'événements UI
  - Création de composants UI réactifs

• Application pratique : Gestion des états avec RxJS

  - Introduction à la gestion d'état dans les applications front-end
  - Modélisation de l'état avec des Observables et Subjects
  - Architecture Redux-like avec RxJS
  - Exemples de mise à jour d'état et de propagation des changements
  - Bonnes pratiques pour une architecture d'état réactive

• Techniques avancées et débogage de flux RxJS

  - Créer des opérateurs personnalisés avec `pipeable` operators
  - Opérateurs de débogage : `tap`, `delay`, `materialize`
  - Analyse des hot et cold Observables plus en profondeur
  - Stratégies de test unitaires pour les Observables
  - Outils et extensions de navigateur pour le débogage RxJS

• Bonnes pratiques, optimisation et intégration avec Angular/React/Vue

  - Gestion des souscriptions : `takeUntil`, `takeWhile`, `RxDestroy`
  - Optimisation des performances avec RxJS
  - Intégration de RxJS dans Angular (services, Http, ngrx, ngxs)
  - Intégration de RxJS dans React (observables en hooks)
  - Intégration de RxJS dans Vue (vue-rx, composition API)