DÉVELOPPEURS ANGULAR :
La dernière conférence RxJS
dont vous aurez besoin ...
Angular… et RxJS ?
✅
🤔
Développeurs Frontend : React, Vue, Vanillia…
50% Grenoblois, 50% Codeur
Mes “Senseïs”
PR du tuyau d’arrosage : refusé !
Epiphany Bridge Origin Story
Un simple champ de recherche…
Une première approche naïve
Une approche naïve ~100 lignes de code
🤔 Trop de requêtes : Attendre 300ms avant d’envoyer la requête...
🤔 Requêtes peu pertinentes : Terme de recherche “a” ou “ab”...
🤔 Gestion de l’asynchrone : Les requêtes en cours doivent être annulées avant d’envoyer une nouvelle requête…
🤔 Performance : 2 requêtes avec le même terme de recherche sont envoyées, alors qu’on pourrait ré-afficher les mêmes suggestions.
🤔 Si une requête HTTP échoue : On pourrait retenter une connexion au moins une fois.
🤔 Gestion des erreurs : Afficher l’ancien état.
Le “Futur” ?
Solution au “Hello, World” de RxJS
Solution au “Hello, World” de RxJS
Solution au “Hello, World” de RxJS
Une approche réactive ~10 lignes de code
✅ Trop de requêtes : Attendre 300ms avant d’envoyer la requête...
✅ Requêtes peu pertinentes : Terme de recherche “a” ou “ab”...
✅ Gestion de l’asynchrone : Les requêtes en cours doivent être annulées avant d’envoyer une nouvelle requête…
✅ Performance : 2 requêtes avec le même terme de recherche sont envoyées, alors qu’on pourrait ré-afficher les mêmes données.
✅ Si une requête HTTP échoue : On pourrait retenter une connexion au moins une fois => retry(1)
✅ Gestion des erreurs : Afficher l’ancien état => catchError()
C’est quoi, le paradigme réactif ? Modéliser le temps.
Les 3 Stratégies de la Pyramide de la Réactivité
#1 S’équiper : 100 Opérateurs RxJS en 10 minutes…
#2 Ascension face nord : Le mapping asynchrone !
#3 La redescente : Admirer la vue… depuis le sommet.
Stratégie #1 : S’équiper.
Apprendre 100 opérateurs en 10 minutes…
Apprenez les opérateurs au lieu d’utiliser subscribe !
PR tuyau d’arrosage
Stratégie #1
Apprendre 100 opérateurs en 10 minutes…
#1 : “Aha moment” Les événements sont-ils des tableaux ?
#2 : “Aha moment” Mettre fin au code multidimensionnel
#3 : “Aha moment” Les opérateurs en actions
#1 Les événements sont-ils des tableaux ?
#1 Les événements sont-ils des tableaux ?
#1 Les événements sont-ils des tableaux ?
#1 Les événements sont-ils des tableaux ?
#1 Les événements sont-ils des tableaux ?
#1 Les événements sont-ils des tableaux ?
#1 Les événements sont-ils des tableaux ?
#1 Les événements sont-ils des tableaux ?
#1 Les événements sont-ils des tableaux ?
#1 Les événements sont-ils des tableaux ?
#1 Ajouter le temps
#1 Les événements sont-ils des tableaux ?
#1 Les événements sont-ils des tableaux ?
Stratégie #1
Apprendre 100 opérateurs en 10 minutes…
✅ : “Aha moment” Les événements sont-ils des tableaux ?
#2 : “Aha moment” Mettre fin au code multidimensionnel
#3 : “Aha moment” Les opérateurs en actions
#2 Mettre fin au code multidimensionnel
#2 Mettre fin au code multidimensionnel
#2 Mettre fin au code multidimensionnel
#2 Mettre fin au code multidimensionnel
Stratégie #1
Apprendre 100 opérateurs en 10 minutes…
✅ : “Aha moment” Les événements sont-ils des tableaux ?
✅ : “Aha moment” Mettre fin au code multidimensionnel
#3 : “Aha moment” Les opérateurs en actions
#3 Les opérateurs en actions
#3 Les opérateurs en actions
#3 Les opérateurs en actions
Stratégie #1
Apprendre 100 opérateurs en 10 minutes…
✅ : “Aha moment” Les événements sont-ils des tableaux ?
✅ : “Aha moment” Mettre fin au code multidimensionnel
✅ : “Aha moment” Les opérateurs en actions
Stratégie #2
Ascension face nord : Le mapping asynchrone.
Le mapping asynchrone… en terrasse !
Stratégie #2
Ascension face nord : Le mapping asynchrone.
#1 : Les 3 types d’événements : froid, tiède et chaud
#2 : Créer des flux d’événements sur mesure
#3 : Les opérateurs concatMap, mergeMap, switchMap et exhaustMap !
#1 Les 3 types d’événements
#1 Les 3 types d’événements
#1 Les 3 types d’événements : Froid
#1 Les 3 types d’événements : Tiède
#1 Les 3 types d’événements : Chaud !
Stratégie #2
Ascension face nord : Le mapping asynchrone.
✅ : Les 3 types d’événements : froid, tiède et chaud
#2 : Créer des flux d’événements sur mesure
#3 : Les opérateurs concatMap, mergeMap, switchMap et exhaustMap !
#2 Créer des flux d’événements sur mesure
#2 Créer des flux d’événements sur mesure
Stratégie #2
Ascension face nord : Le mapping asynchrone.
✅ : Les 3 types d’événements : froid, tiède et chaud
✅ : Créer des flux d’événements sur mesure
#3 : Les opérateurs concatMap, mergeMap, switchMap et exhaustMap !
#3 ConcatMap, MergeMap, SwitchMap & ExhaustMap
#3 ConcatMap, MergeMap, SwitchMap & ExhaustMap
#3 ConcatMap, MergeMap, SwitchMap & ExhaustMap
Stratégie #2
Ascension face nord : Le mapping asynchrone.
✅ : Les 3 types d’événements : froid, tiède et chaud
✅ : Créer des flux d’événements sur mesure
✅ : Les opérateurs concatMap, mergeMap, switchMap et exhaustMap !
Stratégie #3
La redescente : Admirer la vue… depuis le sommet.
Les Signals vont remplacer les Observables !?
Signals API ?
Stratégie #3
La redescente : Admirer la vue… depuis le sommet.
#1 : Problème ! … Signal vs. Zone.js
#2 : Problème ! … Signal vs. DeepSignal
#3 : Problème ! … Signal vs. Subscribe
#1 Signal vs Zone.js
#1 Signals ou Observables dans les composants ?
Les Signals sont les “cousins synchrones” des Observables…
#1 Signal vs Zone.js : Comprendre le “Glitch-free”
#1 Signal vs Zone.js
Stratégie #3
La redescente : Admirer la vue… depuis le sommet.
✅ : Problème ! … Signal vs. Zone.js
#2 : Problème ! … Signal vs. DeepSignal
#3 : Problème ! … Signal vs. Subscribe
#2 Signal vs DeepSignal
API Simple et efficace, c’est parti !
#2 Signal vs DeepSignal
Signal = Opérations immutables …
#2 Signal vs DeepSignal
#2 Signal vs DeepSignal : Signal State
#2 Signal vs DeepSignal : Signal Store
BehaviorSubject to signal
#2 Signal vs DeepSignal
Stratégie #3
La redescente : Admirer la vue… depuis le sommet.
✅ : Problème ! … Signal vs. Zone.js
✅ : Problème ! … Signal vs. DeepSignal
#3 : Problème ! … Signal vs. Subscribe
#3 Effect vs Subscribe
Comment gérer des événements “chauds” avec un Signal ?
#3 Effect vs Subscribe : Mauvaise comparaison…
#3 Effect vs Subscribe : Nooon !
#3 Effect vs Subscribe : Utiliser toObservable
#3 Effect vs Subscribe : Utiliser rx.Method
#3 Effect vs Subscribe : Utiliser rx.Method
Stratégie #3
La redescente : Admirer la vue… depuis le sommet.
✅ : Problème ! … Signal vs. Zone.js
✅ : Problème ! … Signal vs. DeepSignal
✅ : Problème ! … Signal vs. Subscribe
Comment démarrer sur la réactivité en 2 minutes ?
Merci à nos Sponsors, Experts & à Avisto
Des questions ?
#1 Signal vs DeepSignal
#1 Signal vs DeepSignal
Code signal in component