Maîtrisez le concept de réactivité en Angular
Cette formation a pour objectif d’approfondir la compréhension de la réactivité en Angular. Nous commencerons par étudier les rouages de RxJS pour avoir un schéma mental clair de son fonctionnement. Nous recoderons une partie de la librairie pour comprendre comment s'articulent les différents concepts de RxJS (Observable, Observer, Subscription, Operator,...).
Nous verrons ensuite le fonctionnement des signaux, introduits dans Angular 16, et comment ils permettent de simplifier la gestion de la réactivité dans Angular. Ces deux outils ont chacun leurs forces et leurs faiblesses, et nous verrons comment les combiner pour utiliser le bon outil au bon endroit.
(14 heures)
En présentiel ou en classe virtuelle
En français ou en anglais
Développeurs et développeuses Angular, architectes.
Accessible aux personnes en situation de handicap
DélaiLe cours peut être organisé dans un délai d'un mois.
Objectifs
A l'issue du cours vous saurez:- Approfondir la compréhension de la réactivité en Angular et ses enjeux dans le développement d'applications performantes;
- Comprendre en profondeur le fonctionnement interne de RxJS en recodant des parties de la librairie;
- Maîtriser les concepts clés et l'utilisation des signaux introduits dans Angular 16;
- Être en mesure de choisir entre RxJS et les signaux dans chaque situation;
- Mettre en pratique les compétences acquises à travers un projet fil rouge, en implémentant des fonctionnalités réactives avec RxJS et les signaux.
Prérequis
Ce cours demandes des connaissances de base en Angular et TypeScript.
Méthodes pédagogiques
- Explication, pour chaque concept, du problème qu'il prétend résoudre.
- Mise en pratique d'un concept immédiatement après qu'il ait été présenté.
- Validation de chaque étape par exécution de tests unitaires.
- Exercice « fil rouge » pour obtenir en fin de cours une application complète.
- QCM en fin de chapitre pour s'assurer de l'acquisition des connaissances.
Programme détaillé
Introduction
- Présentation de la formation et de ses objectifs.
- Importance de la réactivité dans les applications Angular.
- Présentation du projet fil rouge.
Comprendre RxJS en profondeur
- Présentation et concepts clés de RxJS.
- Comprendre le lien entre RxJS et asynchronisme.
- Comprendre les interactions entre les différents acteurs de la librairie:
Observable,Observer,Subject,Subscriber. - Comprendre le fonctionnement des opérateurs RxJS.
- Comprendre le concept de
UnicastetMulticast. - Comprendre le mécanisme de souscription et nettoyage des ressources.
Mise en pratique: réécrire de façon simplifiée une partie de RxJS.
Comprendre les signaux
- Présentation des signaux.
- Combiner des signaux et réagir à leur changement de valeur.
- Comprendre la notion de contexte réactif.
- Utiliser les nouvelles fonctions d'Angular qui créent des signaux :
input,viewChild, ...
Mise en pratique: créer un composant réactif avec les signaux.
Choisir entre RxJS et les signaux
- Analyser les différences entre RxJS et les signaux.
- Utiliser les outils d'inter-opérabilité entre RxJS et les signaux:
toObservable,toSignal, ... - Choisir le bon outil en fonction du contexte.
Mise en pratique: créer un composant réactif en utilisant à la fois RxJS et les signaux.
Simplifier la gestion de la réactivité avec @ngrx/signals
- Présentation de la librairie
@ngrx/signalsstate, méthodes, computed, features et rxMethods. - Choisir le bon endroit pour provide son SignalStore.
- Utiliser les features pour découper son store et maximiser la ré-utilisabilité grâce à la composition.
Mise en pratique: créer plusieurs SignalStore en mutualisant des fonctionnalités.
Conclusions et perspectives
- Résumé des compétences acquises durant la formation.
- Échanges sur les bonnes pratiques et les retours d'expérience.
- Pistes d'exploration et de perfectionnement pour les participants.
Prix et financements
2 12
Réduction de 50% pour les associations reconnues d'utilité publique.
Sources de financements pour les organisations françaises:
- prise en charge tout ou partie du coût de la formation par votre opérateur de compétence (OPCO);
- Le dispositif FNE formation si votre organisation est éligible.
- Le plan de développement des compétences de votre entreprise (renseignez-vous auprès de votre service RH).