Institut Supérieur des Etudes Technologiques de Sousse

Département de Technologies de l’Informatique

Matière : Atelier FrameWork Côté Client Classe : DSI 2.1
A. U. : 2019/2020 – Semestre 1

Atelier 8 : La programmation réactive

Programmation réactive : ReactiveX

La programmation réactive permet de réagir à des événements ou à des données
de manière asynchrone (c'est-à-dire ne pas devoir attendre qu'une tâche soit terminée
avant de passer à la ligne de code suivante) comme par exemple des appels à serveur
Http. Il y a eu plusieurs méthodes comme le système de callback ou encore les Promise.
Avec l'API RxJS, fourni et très intégré dans Angular, la méthode proposée est celle des
Observables. (Documentation : https://rxjs-dev.firebaseapp.com/guide/overview)
L'idée de la programmation réactive est de considérer les interactions qui se
déroulent dans l'application comme des événements, sur lesquels on peut effectuer
des opérations : regroupements, filtrages, combinaisons, etc.
Ainsi, les événements, comme les clics de souris, deviennent des flux d'événements
asynchrones auxquels on peut s'abonner, pour ensuite pouvoir y réagir. Dans la
programmation réactive, toutes ces séquences d'événements sont appelées des flux.

Programmation réactive = Programmation avec des flux de données asynchrones.

De manière générale, tous ces événements sont poussés par un producteur de

données, vers un consommateur. Le développeur va définir des écouteurs
d'événements (consommateur), sous forme de fonctions, pour réagir aux différents
flux (producteurs de données). Les écouteurs d'événements sont nommées des
Observer et le flux lui-même est le sujet observé, on parle d'Observable.

Observable
Un Observable est un objet qui émet des informations auxquelles on souhaite réagir.
Lorsqu'on s'abonne à un flux pour capter ses événements, on dit que l'on s'inscrit au
flux. L'Observable émet trois types d'information : des données, une erreur, ou un
message complete. Du coup, tout Observer peut avoir trois fonctions : une pour réagir
à chaque type d'information.

1
Activité 1 : Observable
Pour créer un cas concret simple, nous allons créer un Observable dans
AppComponent qui enverra un nouveau chiffre toutes les secondes. Nous allons
ensuite observer cet Observable et l'afficher dans le DOM : de cette manière, nous
pourrons dire à l'utilisateur depuis combien de temps il visualise l'application.
1. Installer RxJs :
npm install rxjs-compat --save
2. Pour avoir accès aux Observables et aux méthodes que nous allons utiliser, il
faut ajouter deux imports dans app.compement.ts :
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
• Le premier import sert à rendre disponible le type Observable
• Le deuxième nous donne accès à la méthode que nous allons utiliser :
la méthode interval() , qui crée un Observable qui émet un chiffre
croissant à intervalles réguliers et qui prend le nombre de
millisecondes souhaité pour l'intervalle comme argument.
3. Dans app.compement.ts, implémenter OnInit et créer l'Observable dans
ngOnInit()
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Atelier 8';
secondes: number;
ngOnInit() {
const compteur = Observable.interval(1000);
compteur.subscribe(
(valeur) => {
this.secondes = valeur;
},
(error) => {
console.log('Une erreur est survenue ! : ' + error);
},
() => {
console.log('L\'observable s\'est terminé !');

2
 }
);
}
}
• L’observable est la variable compteur.
• Une fois créé, il faut l'observer. Pour cela, on utilise la
fonction subscribe() , qui prendra comme arguments entre une et trois
fonctions anonymes pour gérer les trois types d'informations que cet
Observable peut envoyer : des données, une erreur ou un
message complete .
o la première se déclenche à chaque fois que l'Observable émet
de nouvelles données, et reçoit ces données comme argument.
Dans notre cas, on affecte ses données à la variable secondes.
o la deuxième se déclenche si l'Observable émet une erreur, et
reçoit cette erreur comme argument ;
o la troisième se déclenche si l'Observable s'achève, et ne reçoit
pas d'argument.
4. Dans app.component.html, afficher la propriété secondes :
<app-navmenu></app-navmenu>
<p>Vous êtes connecté depuis {{ secondes }} secondes !</p>
<router-outlet></router-outlet>
Vous devez avoir comme résultat :

Subscriptions
La souscription à l’observable compteur n'est pas stockée dans une variable. On ne
peut donc plus y toucher une fois qu'elle est lancée, et ça peut vous causer des bugs.
En effet, une souscription à un Observable qui continue à l'infini continuera à recevoir
les données, que l'on s'en serve ou non, et des comportements inattendus peuvent
arriver.
Afin d'éviter tout problème, en utilisant des Observables personnalisés, il est vivement
conseillé de stocker la souscription dans un objet Subscription (à importer depuis rxjs)

3
Activité 2 : Subscriptions
On modifie le code de l’activité 1 comme suit :
import { Component, OnInit, OnDestroy } from '@angular/core';
export class AppComponent implements OnInit, OnDestroy{

compteurSubscription: Subscription;
ngOnInit() {
const compteur = Observable.interval(1000);
this.compteurSubscription =compteur.subscribe(…
ngOnDestroy() {
this.compteurSubscription.unsubscribe();
}
• La fonction unsubscribe() détruit la souscription et empêche les
comportements inattendus liés aux Observables infinis.

Vous devez avoir le même résultat que l’activité 1: