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)

[{x, y}]
[{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

EventEmitter

  1. notify next value

Observable

  1. notify next value
  2. notify on error
  3. notify on complete

Iterator

Event Handler

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

Observer

  1. handle next value
  2. handle errors
  3. handle completion
  4. unsubscribe early
  1. handle next value

4. unsubscribe early

(next, ...) error|complete

makes all this possible:

map

filter

reduce

concat

flatten

reverse

groupBy

join

sort

find

skip

pluck

partition

zip

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

pull

push

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

Immediate
Timeout
RequestAnimationFrame

combines

RxJS

                                 functional
programming,

                                  schedulers,

and

 reactive programming

You Will Feel Like

an immortal

Time Wizard

async

^

Now let's

What can be Observed?

lots of things

Observable
    .fromEvent(document, 'mousedown')
Observable
    .interval(0, Scheduler.animationFrame)
Observable
    .bindNodeCallback(fs.readdir)
Observable
    .from(Promise.resolve('I guess?'))
Observable
    .ajax('localhost:9000/getData.json')
Observable
    .webSocket('ws://localhost:9001')
.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/

Reactive Programming In Action with RxJS 5

By ptaylor

Reactive Programming In Action with RxJS 5

  • 362
Loading comments...

More from ptaylor