Rxjs

Transcript

1. ReactiveX Marchenkov Danila, Software Developer
3. RxJS RxJava Rx.NET RxScala RxSwift RxClosure RxCpp RxGo RxGroovy RxJRuby RxPHP RxPY Rx.rb RxDart RxLua
4. FRP Asynchronous - Observables Synchronous - Iterators
5. Observable
6. DOM-events Async operations Any data flow within app
7. Api?
8. • audit • auditTime • filter • last • buffer • bufferWhen • catch • combine • combineAll • combineLatest • concat • count • debounce • delay • distinct • do • every • exhaust • expand • findIndex • find • forEach • groupBy • isEmpty • lift • map • mapTo • max • merge • mergeAll • min • multicast
9. const obs = Observable.from([1, 2, 3, 4]); obs.subscribe(it => console.log(‘obs’ + it)); >obs1 >obs2 >obs3 >obs4
10. const obs = Observable.from([1, 2, 3, 4]); obs .map(val => `obs${val}`) .subscribe(it => console.log(it)); >obs1 >obs2 >obs3 >obs4
11. let emitter; const obs: Observable<number> = new Observable(e => emitter = e); [1, 2, 3, 4].forEach(it => emitter.next(it)); obs.subscribe(it => console.log(it));
12. let emitter; const obs: Observable<number> = new Observable(e => emitter = e); [1, 2, 3, 4].forEach(it => emitter.next(it)); obs.subscribe(it => console.log(it)); >ERROR TypeError: Cannot read property 'next' of undefined
13. let emitter; const obs: Observable<number> = new Observable(e => emitter = e); obs.subscribe(it => console.log(it)); [1, 2, 3, 4].forEach(it => emitter.next(it)); >1 >2 >3 >4
14. import { Observable } from ‘rxjs/Rx'; export class Service { private stream: Observable<T> = new Observable(obs => this.emitter = obs) private emitter; public get onSteamEvent() { return this.steam; } private someMethod() { . . . this.emitter.next({someData}); } }
15. import { Observable } from ‘rxjs/Rx'; export class Service { private stream: Observable<T> = new Observable(obs => this.emitter = obs).share(); private emitter; public get onSteamEvent() { return this.steam; } private someMethod() { . . . this.emitter.next({someData}); } }
16. HOT vs COLD Observables
17. var cold = new Observable((observer) => { var producer = new Producer(); // have observer listen to producer here }); COLD
18. HOT var producer = new Producer(); var hot = new Observable((observer) => { // have observer listen to producer here });
19. Multicasting
20. const obs: Observable<number> = new Observable(e => emitter = e); obs.subscribe(it => console.log(it)); obs.map(it => it + 1).subscribe(it => console.log(it)); [1, 2, 3, 4].forEach(it => emitter.next(it));
21. const obs: Observable<number> = new Observable(e => emitter = e); obs.subscribe(it => console.log(it)); obs.map(it => it + 1).subscribe(it => console.log(it)); [1, 2, 3, 4].forEach(it => emitter.next(it)); >2 >3 >4 >5
22. const obs = new Observable<number>(e => emitter = e).share(); obs.subscribe(it => console.log(it)); obs.map(it => it + 1).subscribe(it => console.log(it)); [1, 2, 3, 4].forEach(it => emitter.next(it)); >1 >2 >2 >3 >3 >4 >5
23. Profit over Promise?
24. Observable > Promise • Observable is reusable • Observable is cancellable • A lot of powerful operators • Hot & Cold observables • Merging a lot of observables • Multiple pipeline instead of only .then, .catch • Obs can become Promise :3
25. Subject
26. or BehaviourSubject AsyncSubject AnonymousSubject ReplaySubject
27. Every Subject is an Observable. Every Subject is an Observer.
28. let subj = new Subject(); subj.next(1); subj.subscribe(it => console.log(it)); subj.next(2); >2
29. let lastNOperations = Infinity; let subj = new ReplaySubject(lastNOpearions); subj.next(1); subj.subscribe(it => console.log(it)); subj.next(2); >1 >2
30. let subj = new BehaviorSubject(1); subj.subscribe(it => console.log(it)); subj.next(2); >1 >2
31. Careful
32. Subject will NOT be disposed after all subscribers disconnected Use Subjects only in place, where two-way data flow is certainly needed!
33. Useful operations except map, reduce, filter, find
34. Distinct
35. Reduce
36. Repeat
37. Partition
38. Concat
39. Merge