031 - Les Observables de RxJs, c'est quoi vraiment ? - Dev to be curious

Commençons notre série sur les Observables avec une présentation de la classe, à quoi elle sert. Nous les comparerons avec les Promises, et nous verrons pourquoi elles sont bien plus puissantes !

Programmation réactive et pattern Observer

Les Observables de RxJs se basent sur le pattern Observer :

• Un observable qui émet des informations
• Des observers qui écoutent

Il s’agit d’une programmation réactive (l’opposé de la programmation passive, où l’on demande les informations, ici, on va y souscrire).

Un tuyau passif

Une approche pratique de voir les observables est de les comparer à une persone qui cherche à arroser son jardin.

1. Elle va prendre un tuyau via la pomme d’arrosage. (Création de l’observable)
2. A l’autre bout du tuyau, nous avons une autre personne qui va ouvrir le robinet. (Préparation pour émission)
3. Dès que celle qui tient la pomme d’arrosage dit que c’est ok, l’autre personne va ouvrir le tuyau. (Emission dans l’observable, et Souscription de celle qui va recevoir l’eau).

Rappel de la Promise

Souvent lorsque l’on veut éviter le Hell Callback, et que l’on souhaite avoir une programmation asynchrone plus lisible, le réflexe que nous allons acquérir, du côté développement web, c’est d’utiliser les Promises.
Pour rappel, les promises sont :

• Actives directement : lorsque l’on crée la Promise avec le code a exécuté, il s’exécute directement
• Asychrones automatique : à savoir que le résultat récupéré dans le Then sera toujours exécuté après le thread courant.
• Si vous souhaitez un exemple bien parlant pour appréhender les Promises, je vous invite à découvrir celui imagé autour du snack de burger.

Une fois le résultat récupéré, vous allez pouvoir décider de le traiter et / ou de le ré-enchainer avec une autre promesse par exemple.

Différence avec l’Observable

L’Observable est par essence paresseuse ! Point intéressant pour de la programmation réactive, n’est-ce pas ?

En somme, tant qu’il n’y a aucun observeur sur l’Observable, elle ne se déclenche, n’exécute aucune émission !

De plus, à la différence de la Promise, l’Observable est de base synchrone, elle ne s’éxecute pas obligatoirement dans le Pool Event.
C’est notre code dans l’Observable qui va le décider !

Je vous invite à lire cet article sur la différence entre Promise / Stream / Observable.

La puissance des Observables et .. sa faiblesse

Ce qui fait la force (et aussi sa faiblesse) de l’Observable, c’est qu’on va pouvoir aller beaucoup plus loin dans le traitement des données dans le tuyau (Stream).

Pour reprendre l’image du tuyau d’arrosage.
Et si la taille des gouttes d’eau ne vous convenait pas ? La couleur de chaque goutte d’eau n’était pas la bonne ? Et tiens, et si vous souhaitiez ne prendre qu’une goutte d’eau sur deux ?

En Observable, c’est faisable ! L’utilisation d’operators, une fois appliqués dans le tuyau (pipe), vous permettre de transformer ce qui est émis depuis l’Observable !

Et voilà toute la puissance des Observables : vous allez pouvoir :

• combiner les operators pour prétraiter les émissions de l’Observable,
• combiner les observables entre elles
• ….

On vous en dit plus dans le prochain article, avec la découverte du pipe, et du tap !

Exemples de code


import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
setTimeout(() => {
subscriber.next(4);
subscriber.complete();
}, 1000);
});

console.log(‘just before subscribe’);
observable.subscribe({
next(x) { console.log(‘got value ‘ + x); },
error(err) { console.error(‘something wrong occurred: ‘ + err); },
complete() { console.log(‘done’); }
});
console.log(‘just after subscribe’);