Embed Size (px)
Citation preview
www.luxoft.com
Reactive programming demystifiedDatsenko Andrii <[email protected]>16 February 2017
PRACTICAL RXJS
www.luxoft.com
Who is that guy?
Andrii Datsenko Luxoft Senior JavaScript Developer 5+ years experience AngularJS, React lover http://github.com/
andrewdacenko
www.luxoft.com
WHAT IS FRONT-END ABOUT?
www.luxoft.com
REACT TO USER ACTIONS
www.luxoft.com
Actions
Mouse events Keyboard events Data loading events Animation events File processing events Socket events Web Workers events
www.luxoft.com
WHAT IS THE KEY?
www.luxoft.com
EVENTS
www.luxoft.com
Events love callbacks
www.luxoft.com
Handling Events
Callbacks Promises …
Better way?
Callback Hell Single value …
Zero or more future values
www.luxoft.com
RXJS IS LODASH FOR EVENTS
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) );
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!'));
www.luxoft.com
Observables
Observables are lazy Push collections of multiple values.
Single Multiple
Pull Function IteratorPush Promise Observable
www.luxoft.com
Observable Creation
www.luxoft.com
Observable Creation
www.luxoft.com
Observable Complete
www.luxoft.com
Observable Error
www.luxoft.com
Observable Dispose
www.luxoft.com
Same with JS
www.luxoft.com
HOT VS COLD
www.luxoft.com
U Hot & U Cold
www.luxoft.com
Hot vs Cold
Cold Hot
www.luxoft.com
Hot vs Cold
Cold Hot
www.luxoft.com
Hot
www.luxoft.com
SUBJECT
www.luxoft.com
www.luxoft.com
Subject Observable Observer
www.luxoft.com
Behavior Subject
www.luxoft.com
Behavior Subject
www.luxoft.com
Replay Subject
www.luxoft.com
Replay Subject
www.luxoft.com
OPERATORS
www.luxoft.com
OPERATORS BE LIKE
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 distinctUntillChange
d …
www.luxoft.com
Operators
Combination Operators combine concat merge race zip …
Multicasting Operators cache multicast publish share …
Error Handling Operators catch retry retryWhen
www.luxoft.com
Marbles
www.luxoft.com
SCHEDULERS
www.luxoft.com
Schedulers
Scheduler Purposenull Constant-time operations or tail recursive
operationsRx.Scheduler.queue Current event frame for iteration operationsRx.Scheduler.asap Micro task queue, which uses the fastest
transport mechanism availableRx.Scheduler.async setInterval for time-based operations
www.luxoft.com
REAL USE AND LIBS
www.luxoft.com
WebSockets
make wsemit messageclose connectionmake it hot
close socket
create socket
create socket
www.luxoft.com
Real Project External updates
Internal filtersInternal sorting
www.luxoft.com
Real Project
External updatesInternal sortingInternal filtering
Cancel existing request
Change to other ObservableDon’t fail when error occurs
And we can subscribe
www.luxoft.com
Angular
www.luxoft.com
Redux
www.luxoft.com
Resources
http://rxmarbles.com https://www.learnrxjs.io http://reactivex.io/rxjs/ https://egghead.io/technologies/rx
www.luxoft.com
THANK YOU
