Reactive Functional Programming

Transcript

1. Reactive Functional Programming 1 / 81
2. Who am I? Maksim Šinik Software Architect Functional Programming enthusiast DevOps and Cloud <3 Fullstack developer @maksimsinik maksimsinik 2 / 81
3. Agenda 1. Functional Reactive Programming 2. RxJS 3. Composizione ed esecuzione di uno stream 4. Marble Diagrams 5. Obsevable Operators 6. Subjects 7. Higher Order Observables 3 / 81
4. Functional Programming + Reactive Programming 4 / 81
5. Functional Reactive Programming FRP è un paradigma di programmazione che permette di gestire un flusso di dati asincrono molto usata nella programmazione di interfacce grafiche, in robotica e in musica ha come scopo quello di rendere più semplice la modellazione degli eventi che si succedono nel tempo. 5 / 81
6. Callback "Una funzione che viene passata come parametro ad un' altra funzione, dalla quale verrà eseguita." 6 / 81
7. Callback "Una funzione che viene passata come parametro ad un' altra funzione, dalla quale verrà eseguita." sync const hi = (who) => { console.log('hi ' + who) } const hiAll = (salute) => salute('all!') console.log(hiAll(hi)) // hi all! 6 / 81
8. Callback "Una funzione che viene passata come parametro ad un' altra funzione, dalla quale verrà eseguita." sync const hi = (who) => { console.log('hi ' + who) } const hiAll = (salute) => salute('all!') console.log(hiAll(hi)) // hi all! async const hi = (who) => { console.log('hi ' + who) } const hiAll = (salute) => { setTimeout(salute, 2000, 'all!') } hiAll(hi) // hi all! after 2000 ms 6 / 81
9. Imperative vs Declarative Imperativo Paradigma di programmazione nel quale un programma viene inteso come un insieme di istruzioni, ciascuna delle quali può essere pensata come un "ordine" che viene impartito ("il come"). Dichiarativo Paradigma di programmazione che si focalizza sulla descrizione delle proprietà della soluzione desiderata (il cosa), lasciando indeterminato l'algoritmo da usare per trovare la soluzione (il come). 7 / 81
10. Imperativo const doubled = [] const doubleMap = numbers => { for (let i = 0 i < numbers.length i++) { doubled.push(numbers[i] * 2) } return doubled } console.log(doubleMap([2, 3, 4])) // [4, 6, 8] 8 / 81
11. Imperativo const doubled = [] const doubleMap = numbers => { for (let i = 0 i < numbers.length i++) { doubled.push(numbers[i] * 2) } return doubled } console.log(doubleMap([2, 3, 4])) // [4, 6, 8] Dichiarativo (Funzionale) const doubleMap = numbers => numbers.map(n => n * 2) console.log(doubleMap([2, 3, 4])) // [4, 6, 8] 8 / 81
12. Functional Programming 9 / 81
13. Functional Programming è un paradigma di pogrammazione dichiarativo 9 / 81
14. Functional Programming è un paradigma di pogrammazione dichiarativo il programma è l'esecuzione di una serie di funzioni 9 / 81
15. Functional Programming è un paradigma di pogrammazione dichiarativo il programma è l'esecuzione di una serie di funzioni usa tipi di dati non mutabili 9 / 81
16. Functional Programming è un paradigma di pogrammazione dichiarativo il programma è l'esecuzione di una serie di funzioni usa tipi di dati non mutabili non muta il valore di variabili definite fuori dallo scope in esecuzione (funzioni pure) 9 / 81
17. Functional Programming è un paradigma di pogrammazione dichiarativo il programma è l'esecuzione di una serie di funzioni usa tipi di dati non mutabili non muta il valore di variabili definite fuori dallo scope in esecuzione (funzioni pure) Ogni chiamata successiva a una stessa funzione, con gli stessi argomenti, produce lo stesso output 9 / 81
18. Array methods: map Preserva la struttura dati Preserva la cardinalità const source = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13'] const result = source .map(x => parseInt(x)) // applica la funzione parseInt a ogni elemento //.filter(x => !isNaN(x)) //.reduce((x, y) => x + y) console.log(result) // logs: [1, 1, NaN, 2, 3, 5, NaN, 8, 13] 10 / 81
19. Array methods: filter Preserva la struttura dati Non garantisce la preservazione della cardinalità const source = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13'] const result = source .map(x => parseInt(x)) .filter(x => !isNaN(x)) // filtra solo quelli che sono numeri //.reduce((x, y) => x + y) console.log(result) // logs: [1, 1, 2, 3, 5, 8, 13] 11 / 81
20. Array methods: reduce Non garantisce la preservazione della struttura dati Non garantisce la preservazione della cardinalità const source = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13'] const result = source .map(x => parseInt(x)) .filter(x => !isNaN(x)) .reduce((x, y) => x + y) // addiziona tutti gli elementi console.log(result) // logs: 33 12 / 81
21. RxJS 13 / 81
22. ReactiveX ReactiveX è una libreria per comporre programmi asincroni ed "event- based", usando una sequenza "osservabile" di valori. 14 / 81
23. Reactive Programming "Programming with asynchronous observables data streams." André Staltz 15 / 81
24. Stream Uno stream è una sequenza di eventi ordinati nel tempo. 16 / 81
25. ReactiveX http://reactivex.io/ specifiche reactive implementazioni nei principali linguaggi ( > 15) e piattaforme noi ci occuperemo di RxJS 17 / 81
26. Composizione ed esecuzione di uno stream 18 / 81
27. Composizione Uno stream è composto da: Observable Operators Subscription 19 / 81
28. Composizione Uno stream è composto da: Observable Operators Subscription Uno stream si basa su: flussi di dati emessi operatori per modificarli gli observer che li ascoltano. 19 / 81
29. Observable 20 / 81
30. Observable oggetto (JavaScript) che possiede dei metodi (chiamati operatori) e delle proprietà 20 / 81
31. Observable oggetto (JavaScript) che possiede dei metodi (chiamati operatori) e delle proprietà emettitore di eventi o valori in un certo lasso di tempo 20 / 81
32. Observable oggetto (JavaScript) che possiede dei metodi (chiamati operatori) e delle proprietà emettitore di eventi o valori in un certo lasso di tempo creato a partire da strutture dati "simili" (isomorfe) 20 / 81
33. Observable oggetto (JavaScript) che possiede dei metodi (chiamati operatori) e delle proprietà emettitore di eventi o valori in un certo lasso di tempo creato a partire da strutture dati "simili" (isomorfe) const numberStream = Observable.of(1, 2, 3, 4, 5, 6, 7, 8) numberStream.subscribe({ next(x) { console.log(x) }, error(e) { console.error(e) }, complete() { console.log('done') } }) // => 1 // => 2 // => 3 // => 4 // => 5 // => 6 // => 7 // => 8 // => done 20 / 81
34. Operators sono metodi che si applicano a uno stream 21 / 81
35. Operators sono metodi che si applicano a uno stream possono essere concatenati se è necessario applicare più di un operatore allo stesso stream 21 / 81
36. Operators sono metodi che si applicano a uno stream possono essere concatenati se è necessario applicare più di un operatore allo stesso stream ogni operatore altera lo stream dei valori emmessi dall'operatore che lo precede 21 / 81
37. Operators sono metodi che si applicano a uno stream possono essere concatenati se è necessario applicare più di un operatore allo stesso stream ogni operatore altera lo stream dei valori emmessi dall'operatore che lo precede ogni operatore produce un nuovo Observable 21 / 81
38. Operators API API prende spunto dai metodi degli array const array$ = Observable.from([1, 2, 3, 4, 5, 6, 7, 8, 9]) array$ .map(x => x * 2) .filter(x => x > 6) .subscribe(x => console.log(x)) // 8 // 10 // 12 // 14 // 16 // 18 22 / 81
39. Observer (o subscriber) Oggetto javascript passato come argomento a .subscribe() Possiede tre metodi che permettono di gestire i tre casi possibili: prossimo elemento, errore, fine dello stream const example$ = Observable.create(observer => observer.next(1)) const observer = { next: next => { console.log(next) }, error: err => { console.log(err) }, complete: () => { console.log('done') } } example$.subscribe(observer) 23 / 81
40. Esecuzione di uno stream Comincia solo quando invochiamo il metodo .subscribe(observer) Vengono eseguiti in sequenza ordinata tutti gli operatori Ogni metodo (step di esecuzione) torna un nuovo Observable 24 / 81
41. Esecuzione di uno stream Comincia solo quando invochiamo il metodo .subscribe(observer) Vengono eseguiti in sequenza ordinata tutti gli operatori Ogni metodo (step di esecuzione) torna un nuovo Observable Eccetto .subscribe()! 24 / 81
42. Unsubscribe Il metodo .subscribe() torna un reference alla subscription. 25 / 81
43. Unsubscribe Il metodo .subscribe() torna un reference alla subscription. const randomNumber$ = Observable.create((observer) => { const id = setInterval(() => { observer.next(Math.random()) }, 500) return () => clearInterval(id) }) const sub = randomNumber$.subscribe({ next(x) { console.log(x) }, error(e) { console.error(e) }, complete() { console.log('done') } }) setTimeout(() => { sub.unsubscribe() }, 2000) // 0.10430196667680214 // 0.4141351814554881 // 0.5761438321958294 25 / 81
44. Più subscription Uno stesso observable (stream) può avere "infiniti" subscribe. 26 / 81
45. Più subscription Uno stesso observable (stream) può avere "infiniti" subscribe. const array$ = Observable.from([1, 2, 3, 4, 5, 6, 7, 8, 9]) .map(x => x * 2) .filter(x => x > 6) array$ .subscribe(x => console.log(`First: ${x}`)) array$ .subscribe(x => console.log(`Second: ${x}`)) // First: 8 // First: 10 // First: 12 // First: 14 // First: 16 // First: 18 // Second: 8 // Second: 10 // Second: 12 // Second: 14 // Second: 16 // Second: 18 26 / 81
46. Composizione di stream Esistono operatori che "agiscono" su più Observable contemporaneamente. 27 / 81
47. Composizione di stream Esistono operatori che "agiscono" su più Observable contemporaneamente. const array$ = Observable.from([1, 2, 3, 4]) const array2$ = Observable.from([ 5, 6, 7, 8, 9]) array$ .merge(array2$) .subscribe(x => console.log(`Merged: ${x}`)) // Merged: 1 // Merged: 2 // Merged: 3 // Merged: 4 // Merged: 5 // Merged: 6 // Merged: 7 // Merged: 8 // Merged: 9 27 / 81
48. Divisione di stream Altri permettono di "spezzare" un Observable in diversi altri. 28 / 81
49. Divisione di stream Altri permettono di "spezzare" un Observable in diversi altri. const array$ = Observable.from([1, 2, 3, 4, 5, 6, 7, 8, 9]) const [evens, odds] = array$.partition(val => val % 2 === 0) const subscribe = Observable.merge( evens .map(val => `Even: ${val}`), odds .map(val => `Odd: ${val}`) ).subscribe(val => console.log(val)) 28 / 81
50. COLD vs HOT COLD: Observable che cominciano l'esecuzione dopo che viene invocato il metodo subscribe HOT: Observable che producono i valori anche prima che ci sia una subscription attiva in ascolto 29 / 81
51. Cold A ogni .subscribe() corrisponde una nuova esecuzione. 30 / 81
52. Cold A ogni .subscribe() corrisponde una nuova esecuzione. const obs = Observable.create(observer => { observer.next(1) setTimeout(() => { observer.next(2) setTimeout(() => { observer.complete() }, 1000) }, 1000) }) obs.subscribe( v => console.log("1st subscriber: " + v), err => console.log("1st subscriber error: " + err), () => console.log("1st subscriber complete ") ) setTimeout(() => { obs.subscribe( v => console.log("2nd subscriber: " + v), err => console.log("2nd subscriber error: " + err), () => console.log("2nd subscriber complete ") ) }, 2000) 30 / 81
53. Hot L' esecuzione è condivisa tra tutti gli observer. 31 / 81
54. Hot L' esecuzione è condivisa tra tutti gli observer. const obs = Observable .interval(1000) .publish() // ConnectableObservable obs.connect() // avvia l'esecuzione, è come chiamare .subscribe su un cold setTimeout(() => { obs.subscribe(v => console.log("1:" + v)) setTimeout( () => obs.subscribe(v => console.log("2:" + v)), 1000) }, 2000) // 1:1 // 1:2 // 2:2 // 1:3 // 2:3 // 1:4 // 2:4 // ... 31 / 81
55. Marble Diagram 32 / 81
56. Marble Diagram Sono il modo che abbiamo di rappresentare in modo visuale gli stream reattivi di dati (asincroni). 33 / 81
57. Marble Diagram Sono il modo che abbiamo di rappresentare in modo visuale gli stream reattivi di dati (asincroni). In un marble diagram, l'asse X rappresenta il tempo. 33 / 81
58. Marble Diagram Sono il modo che abbiamo di rappresentare in modo visuale gli stream reattivi di dati (asincroni). In un marble diagram, l'asse X rappresenta il tempo. L' asse Y rappresenta uno o più Observable, che interagiscono tra di loro tramite operatori. 33 / 81
59. Rappresentazione ASCII 34 / 81
60. Rappresentazione ASCII Il tempo è rappresentato da: ------ 34 / 81
61. Rappresentazione ASCII Il tempo è rappresentato da: ------ I valori sono rappresentati da: [0-9] oppure [a-z] 34 / 81
62. Rappresentazione ASCII Il tempo è rappresentato da: ------ I valori sono rappresentati da: [0-9] oppure [a-z] Il completamento di uno stream è rappresentato da: | 34 / 81
63. Rappresentazione ASCII Il tempo è rappresentato da: ------ I valori sono rappresentati da: [0-9] oppure [a-z] Il completamento di uno stream è rappresentato da: | L'eccezione è rappresentata da: X 34 / 81
64. ACII Marble Diagram di .map() first: ---0---1---2---3-| operator: map( x => x * 2) second: ---0---2---4---6-| 35 / 81
65. ACII Marble Diagram di .map() first: ---0---1---2---3-| operator: map( x => x * 2) second: ---0---2---4---6-| First è lo stream in input Second è lo stream in output Operator indica il metodo applicato 35 / 81
66. Obsevable Operators 36 / 81
67. Catergorie di Operatori Creation Transformation Filtering Combination Multicasting Error Handling Utility Conditional and Boolean Mathematical and Aggregate 37 / 81
68. Catergorie di Operatori Creation Transformation Filtering Combination Multicasting Error Handling Utility Conditional and Boolean Mathematical and Aggregate 9 categorie diverse e più di 120 operatori totali 37 / 81
69. Creation Operators 38 / 81
70. .create() create(subscribe: (observer) => subscription): Observable<T> 39 / 81
71. .create() create(subscribe: (observer) => subscription): Observable<T> Crea un Observable dalla funzione subscribe, passata come parametro. 39 / 81
72. .create() create(subscribe: (observer) => subscription): Observable<T> Crea un Observable dalla funzione subscribe, passata come parametro. Alias del costruttore 39 / 81
73. .from() from(ish: ObservableLike<T>): Observable<T> 40 / 81
74. .from() from(ish: ObservableLike<T>): Observable<T> Facade per creare Observable 40 / 81
75. .from() from(ish: ObservableLike<T>): Observable<T> Facade per creare Observable Array 40 / 81
76. .from() from(ish: ObservableLike<T>): Observable<T> Facade per creare Observable Array array-like object 40 / 81
77. .from() from(ish: ObservableLike<T>): Observable<T> Facade per creare Observable Array array-like object Promise 40 / 81
78. .from() from(ish: ObservableLike<T>): Observable<T> Facade per creare Observable Array array-like object Promise Iterabili 40 / 81
79. .from() from(ish: ObservableLike<T>): Observable<T> Facade per creare Observable Array array-like object Promise Iterabili Observable 40 / 81
80. .fromPromise() fromPromise(promise: Promise): Observable Crea un observable a partire da una Promise. 41 / 81
81. .fromPromise() fromPromise(promise: Promise): Observable Crea un observable a partire da una Promise. .fromEvent() fromEvent(target: EventTargetLike, eventName: string): Observable Crea un observable a partire da un evento. 41 / 81
82. .interval() interval(period: number): Observable 42 / 81
83. .interval() interval(period: number): Observable Crea un Observable che emmette valori ogni 'period' (ms) 42 / 81
84. .of() of(...values): Observable 43 / 81
85. .of() of(...values): Observable Crea un Observable i cui valori sono gli argomenti passati e completa immediatamente. 43 / 81
86. More Operators 44 / 81
87. Operatori Famosi 45 / 81
88. Operatori Famosi Combination .concat() .concatAll() .merge() .mergeAll() .zip() 45 / 81
89. Operatori Famosi Combination .concat() .concatAll() .merge() .mergeAll() .zip() Transformation .scan() .buffer() .map() .mapTo() .groupBy() .mergeMap() .switchMap() 45 / 81
90. Operatori Famosi Combination .concat() .concatAll() .merge() .mergeAll() .zip() Transformation .scan() .buffer() .map() .mapTo() .groupBy() .mergeMap() .switchMap() Filtering .filter() .first() .last() .take() .skip() .throttle() 45 / 81
91. .concat() concat(observables: ...*): Observable Dopo il completamento del primo observable, viene concatenato il secondo. first (a|) second --0--1--2--3| first.concat(second) result a-0--1--2--3| 46 / 81
92. .merge() merge(input: Observable): Observable Unisce insieme più Observable, accorpando i valori. first: ----0----1----2----(3|) second: --0--1--2--3--(4|) first.merge(second) result: --0-01--21-3--(24)-(3|) 47 / 81
93. .zip() zip(observables: *): Observable "Ascolta" tutti gli observable che gli vengono passati come argomenti e Appena viene emesso un valore da ognuno di loro, zip emette come valore un array contenente i valori emessi dagli singoli observable. first: ----0----1----2----(3|) second: --0--1--2--3--(4|) Observable.zip(first, second) result: ----00---11---22----33| 48 / 81
94. .switch() switch(): Observable Fa il subscribe solo sul Observable che emette come ultimo. first: -0--1--2-.. second: ---------1-2-3-4-5 switch() result: ---------1-2-3-4-5 49 / 81
95. .map() map(project: Function, thisArg: any): Observable Applica la funzione a ogni valore emesso dall'Observable. first: ---0---1---2---3-| operator: map( x => x * 2) second: ---0---2---4---6-| 50 / 81
96. .filter() filter(select: Function, thisArg: any): Observable Emette solo i valori che passano la condizione. first: --0--1--2--3--4--5--6--7- filter(x => x % 2 === 0) result: --0-----2-----4-----6---- 51 / 81
97. .debounce() debounce(durationSelector: function): Observable Scarta i valori che sono stati emessi in un tempo minore rispetto a quello specificato dal secondo Observable. --0--1--2--3--4| -------| debounce --------1------2------4| 52 / 81
98. .throttle() throttle(duration: function(value): Observable | Promise): Observable Emette valori con la frequenza specificata dal secondo Observable. --0--1--2--3--4| -----| throttle --0-----2-----4| 53 / 81
99. .scan() scan(accumulator: function, seed: any): Observable Accumula ed emette i valori emessi nel tempo, fino al "complete". -----h-----e-----l-----l-----o| scan((acc, x) => acc+x, '') -----h-----(he)--(hel)-(hell)(hello|) 54 / 81
100. .buffer() buffer(closingNotifier: Observable): Observable Aggrega i valori emessi finchè l'observable passato come argomento non emette. Emette array. -----h-----e-----l-----l-----o| -----------1-----------2-----3| buffer -----------he----------ll----o| 55 / 81
101. .do() do(nextOrObserver: function, error: function, complete: function): Observable Esegue le funzioni passate come argomenti senza modificare l'Observable in ingresso. Operatore di debugging. ---0---1---2---3--... do(x => console.log(x)) ---0---1---2---3--... 56 / 81
102. .share() share(): Observable Condivide l'Observable sorgente con più subscriber. 57 / 81
103. .share() share(): Observable Condivide l'Observable sorgente con più subscriber. è un alias per .multicast(() => new Subject()).refCount() 57 / 81
104. .share() share(): Observable Condivide l'Observable sorgente con più subscriber. è un alias per .multicast(() => new Subject()).refCount() non è uguale a .publish().refCount() 57 / 81
105. .share() share(): Observable Condivide l'Observable sorgente con più subscriber. è un alias per .multicast(() => new Subject()).refCount() non è uguale a .publish().refCount() E' un multicast operator. 57 / 81
106. .pipe() 58 / 81
107. .pipe() Introdotto in RxJS 5.5 58 / 81
108. .pipe() Introdotto in RxJS 5.5 Ci permette di usare gli operatori come fossero funzioni pure: lettable operators 58 / 81
109. .pipe() Introdotto in RxJS 5.5 Ci permette di usare gli operatori come fossero funzioni pure: lettable operators Ci permette di scrivere custom operators Ci permette di riusare funzioni su diversi stream 58 / 81
110. Senza .pipe() const source$ = Observable.from([1, 2, 3, 4, 5, 6, 7, 8, 9]); source$ .filter(x => x % 2) .map(x => x * 2) .scan((acc, next) => acc + next, 0) .startWith(0) .subscribe(console.log) 59 / 81
111. Con .pipe() const { Observable } = require('rxjs/Rx') const { filter, map, reduce } = require('rxjs/operators') const { pipe } = require('rxjs/Rx') const filterOutEvens = filter(x => x % 2) const doubleBy = x => map(value => value * x) const sum = reduce((acc, next) => acc + next, 0) const source$ = Observable.range(0, 10) source$ .pipe( filterOutEvens, doubleBy(2), sum) .subscribe(console.log) // 50 60 / 81
112. Subjects 61 / 81
113. Subjects E' un observable: possiede tutti gli operatori. 62 / 81
114. Subjects E' un observable: possiede tutti gli operatori. E' un observer: quando viene usato come subscriber emette i valori che gli vengono passati nel next. 62 / 81
115. Subjects E' un observable: possiede tutti gli operatori. E' un observer: quando viene usato come subscriber emette i valori che gli vengono passati nel next. Può essere soggetto di multicast: se passato al subscribe viene aggiunto alla lista di observer. 62 / 81
116. Subjects E' un observable: possiede tutti gli operatori. E' un observer: quando viene usato come subscriber emette i valori che gli vengono passati nel next. Può essere soggetto di multicast: se passato al subscribe viene aggiunto alla lista di observer. Quando è completo, in errore o non più subscribed non può più essere riutilizzato. 62 / 81
117. Subjects E' un observable: possiede tutti gli operatori. E' un observer: quando viene usato come subscriber emette i valori che gli vengono passati nel next. Può essere soggetto di multicast: se passato al subscribe viene aggiunto alla lista di observer. Quando è completo, in errore o non più subscribed non può più essere riutilizzato. Può passare valori a se stesso chiamando la sua funzione next. 62 / 81
118. Subject vs Observable La principale differenza, è che il Subject ha uno stato interno: salva la lista degli observers. 63 / 81
119. Subject vs Observable La principale differenza, è che il Subject ha uno stato interno: salva la lista degli observers. const tick$ = Observable.interval(1000); const subject = new Subject(); subject.subscribe(observer1); subject.subscribe(observer2); tick$.subscribe(subject); In questo esempio vediamo che tick$ viene "multicastato" in due observer distinti. 63 / 81
120. Subject vs Observable La principale differenza, è che il Subject ha uno stato interno: salva la lista degli observers. const tick$ = Observable.interval(1000); const subject = new Subject(); subject.subscribe(observer1); subject.subscribe(observer2); tick$.subscribe(subject); In questo esempio vediamo che tick$ viene "multicastato" in due observer distinti. Questo è l'uso primario che ha il Subject. 63 / 81
121. Il Subject è, quindi, un proxy/bridge. 64 / 81
122. BehaviorSubject (the current value) Utile per rappresentare valori che cambiano nel tempo Ogni BehaviorSubject ha sempre un valore: quello iniziale l'ultimo valore emesso 65 / 81
123. BehaviorSubject (the current value) Utile per rappresentare valori che cambiano nel tempo Ogni BehaviorSubject ha sempre un valore: quello iniziale l'ultimo valore emesso NOTA: Nei Service di Angular si usa spesso il BehaviorSubject per la gestione dei dati. Infatti, il servizio spesso si inzializza prima del component e il behavior subject ci garantisce che ci sarà un valore iniziale che poi verrà aggiornato appena ce ne sarà disponibile uno più recente, "pescato" dal server. 65 / 81
124. Higher Order Observables 66 / 81
125. Higher Order Observables const numObservable = Rx.Observable.interval(1000).take(4) const higherOrderObservable = numObservable .map(x => Rx.Observable.of(1,2)) higherOrderObservable .subscribe(obs =>s obs.subscribe(x => console.log(x)) ) 67 / 81
126. Higher Order Observables const numObservable = Rx.Observable.interval(1000).take(4) const higherOrderObservable = numObservable .map(x => Rx.Observable.of(1,2)) higherOrderObservable .subscribe(obs =>s obs.subscribe(x => console.log(x)) ) const clickObservable = Rx.Observable .fromEvent(document, 'click') const clockObservable = clickObservable .map(click => Rx.Observable.interval(1000)) clockObservable .subscribe(clock => clock.subscribe(x => console.log(x)) ) 67 / 81
127. Flattening operators Si applicano ad "Observable di Observable" Tornano i valori dell'Observable interno, rispettandone il tipo in: Observable<Observable<number>> method: flatten() out: Observable<number> 68 / 81
128. .switch() const clickObservable = Rx.Observable .fromEvent(document, 'click') const clockObservable = clickObservable .map(click => Rx.Observable.interval(1000)) .switch() // a: --------+--------+------------------------ // \ \ // -0-1-2-3 -0-1-2-3-4-5-6 // switch(a, b) // b: ---------0-1-2-3--0-1-2-3-4-5-6 clockObservable .subscribe(x => console.log(x)) 69 / 81
129. .mergeAll() const clickObservable = Rx.Observable .fromEvent(document, 'click') const clockObservable = clickObservable .map(click => Rx.Observable.interval(1000)) .mergeAll(2) // --------+--------+------------------------ // \ \ // -0-1-2-3 -0-1-2-3-4-5-6 // mergeAll // ----------0-1-2-3-405162738495... clockObservable .subscribe(x => console.log(x)) 70 / 81
130. .concatAll() const clickObservable = Rx.Observable .fromEvent(document, 'click') const clockObservable = clickObservable .map(click => Rx.Observable.interval(1000).take(5)) .concatAll() // megeAll(1) // --------+--------------+-+---- // \ // -0-1-2-3-4| // concatAll // ----------0-1-2-3-4-----0-1-2-3-4--0-1-2-3-4 clockObservable .subscribe(x => console.log(x)) 71 / 81
131. Operatori composti map() + concatAll() = concatMap() map() + mergeAll() = mergeMap()/flatMap() map() + switch() = switchMap() 72 / 81
132. .switchMap() const clickObservable = Rx.Observable .fromEvent(document, 'click') function performRequest() { return fetch('https://jsonplaceholder.typicode.com/users/1') .then(res => res.json()) } // Observable<Event> ---> Observable<Response> const responseObservable = clickObservable .switchMap(click => performRequest()) // switchMap = map ... + ... switch responseObservable .subscribe(x => console.log(x.email)) 73 / 81
133. .mergeMap() const clickObservable = Rx.Observable .fromEvent(document, 'click') function performRequest() { return fetch('https://jsonplaceholder.typicode.com/users/1') .then(res => res.json()) } const emailObservable = clickObservable .mergeMap(click => performRequest(), (click, res) => res.email, 3) // mergeMap = map ... + ... mergeAll emailObservable .subscribe(email => console.log(email)) 74 / 81
134. .concatMap() const clickObservable = Rx.Observable .fromEvent(document, 'click') function performRequest() { return fetch('https://jsonplaceholder.typicode.com/users/1') .then(res => res.json()) } const emailObservable = clickObservable .concatMap(click => performRequest(), (click, res) => res.email) // concatMap = map ... + ... concatAll emailObservable .subscribe(email => console.log(email)) 75 / 81
135. Esempio di typeahead const obs1 = Observable.fromEvent(input, 'keyup') .map(e => e.target.value) .filter(value => value.length > 2) .distinctUntilChanged() .debounceTime(500) .mergeMap(word => this.http.get('...')) // Angular 2 http observable .retry(2) .subscribe(res => console.log(res)) 76 / 81
136. Risorse ReactiveX Learnrxjs RxMarbles Egghead.io 77 / 81
137. Grazie! 78 / 81
138. 1. FilterService: CREATE A PROVIDER import { Http } from '@angular/http'; import { Injectable } from '@angular/core'; @Injectable() export class FilterService { constructor(private http: Http) {} getAll(id: number) { return this.http.get('http://jsonplaceholder.typicode.com/users'); } } 79 / 81
139. 2. <my-component>: INJECT THE PROVIDER import { Component } from '@angular/core'; import { FilterService } from './services/filter.service'; @Component({ selector: 'my-component', template: ` <results [data]="list"></results> ` }) export class MyComponent { list: any[]; // Array of users constructor(filterSrv: FilterService) { filterSrv.getAll() .subscribe(res => this.list = res) } } 80 / 81
140. 3. component: display data import { Component, Input, SimpleChanges, OnChanges } from '@angular/core'; @Component({ selector: 'results', template: ` <h2>{{text}}</h2> <pre>{{data | json}}</pre> ` }) export class ResultsComponent implements OnChanges { @Input() data: any[]; @Input() text: string; ngOnChanges(changes: SimpleChanges) { console.log ('CHANGES on ResultsComponent', changes) // i.e.: http.get('/api/).subscribe(res => ...) } } 81 / 81