Presentazione di RxJS e programmazione reattiva.

1. RXJS
Intro to
Reactive Programming

2. Michele Stieven
Sviluppatore web e consulente lato front-end
twitter.com/michelestieven
facebook.com/michelestieven
linkedin.com/in/michelestieven
medium.com/@michelestieven

3. Obiettivi
•Programmazione Reattiva
•Observable
•Observer
•Ciclo di vita
•Operators
•Marble Diagrams
•Higher Order Observables

4. ES6 (ES2015)
Arrow Functions
function(a, b) {
return a + b;
}
(a, b) => { return a + b; }
(a, b) => a + b
function(a) {
return a*2;
}
a => a*2
function() {
return ‘Hello’;
}
() => ‘Hello’

5. Programmazione Reattiva?
HEY HEY HEY
time
Ricevuto! Ricevuto! Ricevuto!

6. Programmare in modo reattivo
significa reagire a degli eventi.

7. STILE != LINGUAGGIO

8. Programmazione Reattiva in
JavaScript
addEventListener
Promise
Callback hell
Single value
Unstoppable
Functionalities

9. RxJS
Reactive Extensions for JavaScript

10. RxJS elements
•Observable
•Observer
•Subscription
•Operators
•Subjects
•Scheduler

11. the Observable Pattern
Observable Observer
Subscription
Un observer ascolta un observable attraverso una subscription

12. Observable vs EventListener
// Ritorna una Subscription
observable$.subscribe(observer);
// Non ritorna nulla
document.addEventListener(‘scroll’, function(v) {});
Convenzione

13. Observable vs Promise
// Ritorna una Subscription
observable$.subscribe(observer);
// Ritorna una Promise
myPromise.then(function(v) {})
Convenzione
.then().then()…;

14. Paragone
Promise
•Non cancellabile
•Singolo valore
•Concatenabile
Observable
•Cancellabile
•Valori multipli
•Operatori
Un observable può sempre essere convertito da e in Promise

15. Observable
Tipi di dato
SINGOLO
VALORE
PIU’
VALORI
SYNC ASYNC
VALUE
ARRAY
PROMISE
OBSERVABLE

16. Observable
Cos’è?
[ 1, 2, 3, 4, 5 …
Uno stream di dati, come un array, dove ogni
elemento arriva nel tempo

17. Observable
Esempio
import { from } from ‘rxjs’;
const awesome$ = from([1, 2, 3]);
Questo Observable ha già tutti i valori a disposizione,
quindi si comporta in maniera sincrona!

18. Observable asincroni
Esempi
•Eventi del DOM
•Mouse, tastiera…
•onChange, submit…
•Eventi custom
•Timer
•Chiamate HTTP

19. Comportamento
•Emettere un valore
•Completarsi
•Andare in errore…
•…e stopparsi
Un Observable può:

20. Ciclo di vita
1 2 3
Non termina
1 2 3
Completa
1 2 3
Va in errore

21. Observer
Cos’è?
Un Observer è un oggetto che contiene le funzioni di
callback per ogni situazione: emissione, completamento,
errore.
L’Observer viene passato al metodo subscribe dell’Observable
Per creare una subscription.
Può essere sostituito da una o più funzioni

22. Observer
Un Observer “completo”
{
next: function() {},
error: function() {},
complete: function() {}
}

23. Esempio
Observable - Observer
import { from } from ‘rxjs’;
const awesome$ = from([1,2,3]);
awesome$.subscribe({
next: v => console.log(v),
error: e => console.warn(e),
complete: () => console.log(‘Complete’)
});

24. 1
2
3
Complete

25. Subscription
Rappresenta il contratto fra l’Observer e
l’Observable.
È l’unico modo che abbiamo per terminare un
Observable prima del tempo dall’esterno.

26. const sub = awesome$.subscribe(observer);
sub.unsubscribe();

27. Example
Basics
LIVE CODE

28. OPERATORI
CREAZIONE PIPEABLE
Creano un Observable
da qualcos’altro
Creano un Observable
da un Observable
Es. Es.
•from
•of
•fromPromise
•interval
•timer
•map
•switch
•filter
•concat
•mergeMap
import { … } from ‘rxjs’ import { … } from ‘rxjs/operators’

29. PIPEABLE OPERATORS
awesome$.pipe(
map(n => n*2),
filter(n => n < 10)
).subscribe(…)
NOTA BENE
NON è stato modificato il vecchio observable (awesome$), ne
è stato creato uno nuovo.
Soltanto, non lo abbiamo salvato in una variabile.

30. awesome$.pipe(
map(n => n*2),
filter(n => n < 10)
).subscribe(…)
const new$ =
const sub$ = new$.subscribe(…)

31. awesome$.pipe(
map(n => n*2),
filter(n => n < 10)
).subscribe(…)
CATENA DI OPERATORI
La catena di operatori esegue le stesse operazioni per ogni
valore emesso dall’Observable sorgente (awesome$).
Qualcun altro può comunque sottoscriversi ad awesome$ e
ricevere i valori inalterati.

32. TANTI
Quanti sono gli operatori?

33. Tipologie di Operatori
Creazione
of, from, fromEvent, fromPromise…
Combinazione
merge, concat, combineLatest…
Filtraggio
filter, take, debounce, throttle…
Trasformazione
map, reduce, scan…
Gestione degli errori
catchError, retry…
Matematici
count, max, min…
Condizionali
takeUntil, Every…
Utility
tap, delay, materialize…
Multicasting
publish, refCount, share…

34. Examples
With Marble Diagrams
LIVE CODE

35. HIGHER ORDER
OBSERVABLES

36. Scenario
awesome$
1 2 3
http$ = ajax(‘URL/number’)
Res
OBSERVER
Per ogni elemento emesso da awesome$, vuole
che sia fatta una chiamata al server per avere la
risposta

37. awesome$
1
RESULT
HTTP CALL
2
RESULT
HTTP CALL
3
RESULT
HTTP CALL

38. Brainstorming
1. Subscribe nel Subscribe
awesome$.subscribe(n => ajax(‘URL’ + n).subscribe(…))
2. Subscribe in map()
awesome$.pipe(
map(n => ajax(‘URL’ + n).subscribe………
3. Unione dei due?
awesome$.pipe(map(n => ajax(‘URL’ + n))).subscribe(new$ => {
new$.subscribe(…)
})

39. Soluzione
awesome$.pipe(
map(n => ajax(‘URL’ + n)),
mergeAll()
).subscribe(…)
Flattening Observables

40. mergeMap
awesome$.pipe(
mergeMap(n => ajax(‘URL’ + n))
).subscribe(…)
Flattening Observables
Ci pensa mergeMap ad estrapolare ogni valore dall’innerObservable, il
nostro observer riceve i valori “pronti”.

41. awesome$
1 2 3
ajax(‘URL’ + n)
Res
final$
Res1 Res2 Res3
awesome$.pipe(mergeMap(n => ajax(’URL’ + n))

42. Problema
Non sappiamo quanto dureranno le chiamate e
se andranno a buon fine!

43. Concorrenza
C’è una richiesta in corso, quando ad un tratto ricevi un
nuovo valore. Cosa fai?
mergeMap
switchMap
concatMap
exhaustMap
Ok, eseguo un’altra richiesta concorrente.
L’ordine di risposta non importa.
Scarto la richiesta precedente ed eseguo la
nuova.
Mettiti in coda!
La richiesta precedente non è finita. Non metterti
in coda, mi stai antipatico.

44. Anticipazioni
HOT & COLD
Quando un Observable inizia ad emettere valori?
MULTICASTING
Condividere un Observable con più Observer
SUBJECTS
Ibridi fra Observable che Observer

45. Grazie!