andrii datsenko «practical rxjs»

www.luxoft.com

Reactive programming demystifiedDatsenko Andrii <ASDatsenko@luxoft.com>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