SnowCamp 2023

**Format** : Talk

**Category** : Frontend

## Qui est l'audience ?

Cette présentation s'adresse aux développeurs frontend avec une première expérience conséquente sur le framework Angular (c'est-à-dire un niveau intermédiaire - 2 ou 3 années d'expérience sur Angular).

L'objectif sera de motiver les développeurs présents lors de la présentation à investir du temps pour monter en compétences sur RxJS, en présentant les avantages que peut représenter l'utilisation de la programmation réactive pour leurs projets et leur carrière.

## De quoi allez vous parler ?

La présentation sera focalisée sur l'utilisation concrète de RxJS au sein d'un projet Angular, au travers de 3 cas d'implémentation courants.
Pour chaque implémentation, nous présenterons un comparatif avec et sans la réactivité.

Voici une version globale de ce que nous présenterons :

### Introduction : Avez-vous le problème que résout RxJS ?

Pour beaucoup de développeurs juniors, RxJS est une technologie étrange, imposée par les créateurs d'Angular dans le framework.

Mais plutôt que de subir cette décision de la Team Angular, il faut rappeler que RxJS permet de faire bien plus que des requêtes HTTP.

L'objectif sera donc de se mettre d'accord sur le problème que RxJS résout : la complexité dans la base de code.

Nous commencerons donc par définir la complexité comme la somme de 3 composantes :

- Un état partagé et mutable. (Shared Mutable State)
- La circulation des données. (Data Flow)
- Le volume de code. (Code Volume)

Nous verrons comment RxJS permet d'adresser efficacement ces 3 composantes de la complexité.

### Partie 1 : 100 opérateurs RxJS en 10 minutes

Un des obstacles principal à l'apprentissage de RxJS est le nombre impressionnant d'opérateurs mis à disposition par la librarie (_plus de 100 !_)

L'objectif sera donc de rendre l'utilisation de ces opérateurs aussi digeste et intuitive que les méthodes utilisées pour le traitement d'un tableau : `map`, `filter` et `reduce`.

Nous verrons que les +100 opérateurs de RxJS peuvent être classés en 4 catégories simples :

- **Création** : _of, fromEvent, interval, timer, combineLatest, forkJoin..._
- **Transformation** : _map, switchMap, mergeMap, concatMap, bufferCount..._
- **Filtrage** : _debounce, throttle, filter, distinctUntilChanged..._
- **Calcul** : _reduce, scan, count, max..._

Pour chacune des catégories, nous verrons qu'il existe plusieurs opérateurs, car RxJS s'occupe de gèrer la dimension du temps en plus d'un simple tableau.

Cette dimension supplémentaire à l'air d'ajouter de la complexité a priori.
Mais cela permet de gérer l'asynchronicité dans notre code, de manière élégante et déclarative.

### Partie 2 : Résoudre des problèmes de la "vraie" vie avec RxJS

Les exemples donnés dans les tutoriels ont toujours l'air d'un monde "enchanteur", que les développeurs n'arrivent pas à appliquer concrètement dans la vraie vie par la suite...

Nous effectuerons 3 ateliers qui seront tous liés à un même _requirement_ d'un client fictif, dans Jira. Nous traverserons 3 couches logicielles du même _requirement_, mais en appliquant la programmation réactive à chaque fois :

**Couche de présentation** (Presentational Layer)

Exemple de gestion réactive de la vue dans le cadre d'un formulaire :
_combineLatest, fromEvent, debounce..._

**Gestion de l'état** (State Management)

Exemple de gestion réactive de l'état impacté par le formulaire précédent:
_BehaviorSubject, scan, next(), seletcors & async..._

**Couche d'accès aux données** (Data Layer)

Exemple de gestion réactive de l'accès aux données depuis un serveur distant :
_Requêtes HTTP & caching (HttpClientModule, catchError, timeout, map & shareReplay), Stratégies de mapping asynchrone (concatMap/mergeMap/switchMap/exhaustMap)_

### Partie 3 : Comment convaincre Mr. Promise et Mr. Fetch API d'utiliser RxJS ?

Une fois que l'on a découvert une nouvelle technologie et que l'on est capable de l'utiliser, il reste le plus dur...
Convaincre ses collègues de changer leurs habitudes pour travailler d'une nouvelle façon.

L'objectif de cette troisième partie sera donc de convaincre le reste de son équipe de se mettre à la réactivité.

Nous présenterons un framework simple qui permet d'expliquer rapidement aux autres membres de son équipe comment utiliser RxJS au quotidien.
Nous avons appelé ce framework : **"Golden River, Muddy River & Golden Road"**.

1. **Golden River** : Quel est le flux idéal que l'on veut obtenir en sortie ? Celui qui contient directement la réponse attendue ?
2. **Muddy River** : Quels flux nous avons déjà à notre disposition ? (_Cf Partie 1: Opérateurs de création_)
3. **Golden Road** : Quels opérateurs appliquer pour atteindre la Golden River à partir de la Muddy River ? (_Cf Partie 2: Opérateurs de transformation, filtrage et calcul_)

### Ouverture, Questions & Réponses

Ouverture : Rappelez que la programmation réactive avec RxJS est un paradigme de programmation qui peut-être utilisé en dehors d'Angular. (Notamment dans les autres frameworks frontend React & VueJS)

Question & Réponses : Répondre aux objections éventuelles et autres questions ouvertes.

## Comment aller vous en parler ?

Le déroulement de la présentation sera un talk plutôt classique, composé principalement de slides et de questions au public tout au long de la présentation.

1. Slides épurés et imagés pour se concentrer sur les explications de l'orateur.
2. Capitaliser sur la création de contenu "online" : c'est un format dans lequel l'attention de l'audience est une ressource rare. Nous essayerons donc de reprendre la même structure de contenu pour ne pas ennuyer l'audience (_présenter une histoire/anectode, donner des exemples concrets, montrer des captures d'écran_).
3. Pas de live coding prévu : pour un premier talk en présentiel devant une audience large, nous trouvons l'exercice déjà suffisamment exigeant.