Angular

Appearance

Bien comprendre les Observables ! (débutant) ​

Un observable RxJS est un objet qui permet de produire une série de valeurs asynchrones au fil du temps. Ces valeurs peuvent être des données, des erreurs ou des signaux indiquant la fin de la série de valeurs. On peut souscrire à un observable pour être notifié de chaque nouvelle valeur produite et y réagir de manière appropriée.

INFO

RxJS ?

Comprendre l'interêt (Exemple: Le triple clic) ​

Sans l'observable 👎 ​

Voici comment on pourrait réaliser ce même traitement sans utiliser d'observable :

js
const element = document.querySelector('#my-element');
let clickCount = 0;
let clickTimer = null;

element.addEventListener('click', () => {
  clickCount += 1;
  if (clickTimer) {
    clearTimeout(clickTimer);
  }
  clickTimer = setTimeout(() => {
    if (clickCount === 3) {
      console.log('Triple click detected!');
    }
    clickCount = 0;
  }, 300);
});
const element = document.querySelector('#my-element');
let clickCount = 0;
let clickTimer = null;

element.addEventListener('click', () => {
  clickCount += 1;
  if (clickTimer) {
    clearTimeout(clickTimer);
  }
  clickTimer = setTimeout(() => {
    if (clickCount === 3) {
      console.log('Triple click detected!');
    }
    clickCount = 0;
  }, 300);
});

Dans cette solution, on utilise un compteur et un timer pour détecter les triple-clics. À chaque clic, on incrémente le compteur et on réinitialise le timer. Si le timer expire avant qu'un autre clic n'ait lieu, cela signifie qu'il n'y a pas eu de triple-clic et on réinitialise le compteur à zéro. Si le compteur atteint la valeur 3 avant que le timer n'expire, cela signifie qu'il y a eu un triple-clic et on affiche un message.

Bien que cette solution fonctionne, elle a plusieurs inconvénients par rapport à l'utilisation d'un observable :

  • Elle est plus complexe et plus difficile à comprendre. En utilisant un observable, on peut regrouper toute la logique de détection des triple-clics au sein d'un seul objet, ce qui rend le code plus concis et plus facile à comprendre.
  • Elle est moins flexible. Avec un observable, on peut facilement utiliser des opérateurs pour transformer et filtrer les données produites par l'observable, ce qui n'est pas possible avec cette solution basée sur les événements.
  • Elle est moins performante. En utilisant un observable, on peut souscrire à l'observable une seule fois et le laisser gérer tous les clics à l'avenir, ce qui est moins gourmand en ressources que de devoir gérer chaque clic individuellement avec un gestionnaire d'événements.

Avec l'observable 👍 ​

Voici un exemple de code qui utilise un observable RxJS pour gérer un événement triple-clic sur un élément HTML :

ts
import { fromEvent } from 'rxjs';

const element = document.querySelector('#my-element');
const tripleClicks$ = fromEvent(element, 'click').pipe(
  buffer(() => interval(300)),
  filter(list => list.length === 3),
);

tripleClicks$.subscribe(() => {
  console.log('Triple click detected!');
});
import { fromEvent } from 'rxjs';

const element = document.querySelector('#my-element');
const tripleClicks$ = fromEvent(element, 'click').pipe(
  buffer(() => interval(300)),
  filter(list => list.length === 3),
);

tripleClicks$.subscribe(() => {
  console.log('Triple click detected!');
});

Ce code crée un observable à partir d'un événement "click" sur l'élément HTML ciblé, puis utilise des opérateurs RxJS pour transformer cet observable de manière à n'émettre une valeur que lorsqu'il y a eu trois clics consécutifs dans un délai de 300ms. Enfin, on souscrit à cet observable pour être notifié chaque fois qu'un triple-clic est détecté.

A retenir

  • Ils permettent de gérer de manière cohérente différents types de données asynchrones, qu'il s'agisse de données ponctuelles ou de données qui arrivent de manière continue dans le temps.
  • Ils offrent une grande flexibilité grâce à un large éventail d'opérateurs qui permettent de transformer et de filtrer les données produites par un observable.
  • Ils permettent de gérer de manière centralisée les erreurs et les retours d'opération asynchrones, ce qui peut simplifier considérablement le code de gestion des erreurs dans une application.
  • Ils peuvent aider à rendre le code plus concis et plus facile à comprendre en regroupant la logique de gestion des données asynchrones au sein d'un seul objet observable au lieu de la disperser dans différentes fonctions de rappel.

En plus

Un Observable, c'est quoi ?

Et Pourquoi pas utiliser une promesse ? ​

Une promesse ne serait pas adaptée dans ce cas car une promesse ne peut être résolue qu'une seule fois et ne peut pas produire de valeurs au fil du temps de manière répétée. En revanche, un observable peut produire une série de valeurs au fil du temps et peut être souscrit plusieurs fois, ce qui le rend plus adapté pour gérer des événements asynchrones qui se produisent à plusieurs reprises au fil du temps.

Il est toutefois possible de gérer des événements asynchrones en utilisant des promesses, mais cela nécessiterait de créer une nouvelle promesse à chaque fois que l'événement se produit, ce qui peut être fastidieux et moins performant qu'un observable.

En plus

Faut il utiliser les promesses ou les observables ?