Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (14)
Similar to Andrii Datsenko «Practical RxJS»
Similar to Andrii Datsenko «Practical RxJS» (20)
More from LogeekNightUkraine
More from LogeekNightUkraine (20)
Recently uploaded
Recently uploaded (20)
Andrii Datsenko «Practical RxJS»
- 1. www.luxoft.com Reactive programming demystified Datsenko Andrii <ASDatsenko@luxoft.com> 16 February 2017 PRACTICAL RXJS
- 2. www.luxoft.com Who is that guy? Andrii Datsenko Luxoft Senior JavaScript Developer 5+ years experience AngularJS, React lover http://github.com/andrewdacenko
- 3. www.luxoft.com WHAT IS FRONT-END ABOUT?
- 4. www.luxoft.com REACT TO USER ACTIONS
- 5. www.luxoft.com Actions Mouse events Keyboard events Data loading events Animation events File processing events Socket events Web Workers events
- 6. www.luxoft.com WHAT IS THE KEY?
- 9. www.luxoft.com Handling Events Callbacks Promises … Better way? Callback Hell Single value … Zero or more future values
- 10. www.luxoft.com RXJS IS LODASH FOR EVENTS
- 11. www.luxoft.com Array Like const x = list .map(x => x.prop) .filter(x => x > 2); console.log(x) list .map(x => x.prop) .filter(x => x > 2) .subscribe(x => console.log(x) );
- 12. www.luxoft.com Events Example var button = document.querySelector('button'); button.addEventListener('click', () => console.log('Clicked!')); var button = document.querySelector('button'); Rx.Observable.fromEvent(button, 'click') .subscribe(() => console.log('Clicked!'));
- 13. www.luxoft.com Observables Observables are lazy Push collections of multiple values. Single Multiple Pull Function Iterator Push Promise Observable
- 21. www.luxoft.com U Hot & U Cold
- 22. www.luxoft.com Hot vs Cold Cold Hot
- 23. www.luxoft.com Hot vs Cold Cold Hot
- 26. www.luxoft.com
- 27. www.luxoft.com Subject Observable Observer
- 34. www.luxoft.com Operators Creation Operators create of empty fromEvent fromPromise interval … Transform Operators map mergeMap pluck window buffer scan … Filtering Operators filter take last debounce throttle distinctUntillChanged …
- 35. www.luxoft.com Operators Combination Operators combine concat merge race zip … Multicasting Operators cache multicast publish share … Error Handling Operators catch retry retryWhen
- 38. www.luxoft.com Schedulers Scheduler Purpose null Constant-time operations or tail recursive operations Rx.Scheduler.queue Current event frame for iteration operations Rx.Scheduler.asap Micro task queue, which uses the fastest transport mechanism available Rx.Scheduler.async setInterval for time-based operations
- 39. www.luxoft.com REAL USE AND LIBS
- 40. www.luxoft.com WebSockets make ws emit message close connection make it hot close socket create socket create socket
- 41. www.luxoft.com Real Project External updates Internal filters Internal sorting
- 42. www.luxoft.com Real Project External updates Internal sorting Internal filtering Cancel existing request Change to other Observable Don’t fail when error occurs And we can subscribe
- 45. www.luxoft.com Resources http://rxmarbles.com https://www.learnrxjs.io http://reactivex.io/rxjs/ https://egghead.io/technologies/rx