in action with

Reactive Programming

RxJS 5

Paul Taylor

@trxcllnt

UI PLATFORM TEAM @

Falcor

RxJS 5

ReactiveX.io/rxjs

github.com/reactivex/rxjs

Entropy causes us to experience time in only one direction

Relativity

Is Time Symmetric

Hardware

Experiences Forward Time

But Software Can Be

Time Symmetric

time

t = 0

t = -10

t = 10

(x, y)

past

future

Our representation for data in
the                       isn't symmetrical with our representation of data in the

EventEmitter

• listeners[]

• emit(event, data)

• addListener(e, observer)

• removeListener(e, observer)

function emit(event, data) {
  listeners[event].forEach(listener =>
    listener(data)
}

Generator

1. yield next value
2. throw an error
3. return when done

Iterator

1. use next value
2. catch errors
3. exit when done
4. break early

(next, ...) error|complete

makes all this possible:

Generators

Iterators

Interactive Programming is when                      pull values from

Observers

Observables

Reactive Programming

is when                               push data to

Consumers

Producers

Reactive Programming flips the direction of the arrow between

Iterator

Observer

Generator

Observable

DUALITY

Arrays

0s

1s

2s

2.5s

4s

Observables

ReactiveX Family

Rx.NET

RxJava

RxScala

RxClojure

RxSwift

RxPHP

and others

RxJS + Angular 2

Observables

are making their way through TC39 as we speak

https://tc39.github.io/proposal-observable/

Anatomy of Observable

CREATION

SUBSCRIPTION

DISPOSAL

Anatomy of Observable

var randomNumbers = new Observable((observer) => {
    var i = setTimeout(() => {
        observer.next(Math.random());
        observer.complete();
    }, 100);
    return () => clearTimeout(i);
});

var subscription = randomNumbers.subscribe({
    next(x) { console.log(x); },
    error(e) { console.error(e); },
    complete() { console.log('done') }
});

subscription.unsubscribe();

Anatomy of Observable

randomNumbers.subscribe((x) => console.log(x));
// > 1: 0.1231982301923192831231

randomNumbers.subscribe((x) => console.log(x));
// > 2: 0.8178491823912837129834

Anatomy of Observable

var randomNumbers = new Observable((observer) => {
    var i = setTimeout(() => {
        observer.next(Math.random());
        observer.complete();
    }, 100);
    return () => clearTimeout(i);
});

Each Observer is run in an isolated memory space

Observable is a function that, when invoked, returns 0-∞ values between now and the end of time.

.map(ball => makeSquare(ball))

Operators

Operators

map, filter, scan, reduce, flatMap, zip, combineLatest, take, skip, timeInterval, delay, debounce, sample, throttle, ...

Methods that Perform
Calculations with the Values

like lodash, but for data from the future

Schedulers

Schedulers

Centralized Dispatchers to Control Time and Coorinate Concurrency

combines

RxJS

                                 functional
programming,

You Will Feel Like

an immortal

Time Wizard

Now let's

What can be Observed?

Observable
    .fromEvent(document, 'mousedown')

.scan((x, y) => x + y, 0)

scan

3

2

24

7

18

3

5

29

36

54

.flatMap(x =>            )

flatMap

3

24

18

x*2

x*2

x*2

6

6

6

48

48

48

36

36

36

.takeUntil(              
                         )

takeUntil

3

2

24

7

18

3

2

.windowTime(100)

windowTime

3

2

24

7

18

3

5

29

36

54

RxJS Resources

http://reactivex.io/

http://rxmarbles.com/

github.com/ReactiveX/RxJS

https://redux-observable.js.org

https://tc39.github.io/proposal-observable/