What the Flux and RxJS!

by Jon Hoguet and Adam Hutton

disclaimer

An Intro to RxJS

(sometimes, it’s okay to cross the streams)

RxJS?

• Reactive Extensions for JavaScript (Rx = “Reactive Extensions”, JS = “JavaScript”)
• a set of libraries to compose asynchronous and event-based programs using observable collections and Array#extras style composition in JavaScript
• actively developed by Microsoft Open Technologies, Inc., in collaboration with a community of open source developers
• RxJS = Observables + Operators + Schedulers

— https://github.com/Reactive-Extensions/RxJS

ReactiveX is…

• a combination of the best ideas from the Observer pattern, the Iterator pattern, and functional programming
• an API for asynchronous programming with observable streams

​

Observables? Streams?

• An Observable is a collection that arrives over time.
• https://egghead.io/lessons/javascript-introducing-the-observable
• A [data] stream is an observable sequence,�like an ever-growing Array of emitted “things.”
• data-driven events (payload received)
• user-driven events (clicks, mouseovers)
• derived observables

Reactive Programming

http://www.slideshare.net/stefanmayer13/functional-reactive-programming-with-rxjs/18

Observables? Streams?

The Reactive Extensions for JavaScript unifies both the world of Promises, callbacks as well as evented data such as DOM Input, Web Workers, Web Sockets.

Once we have unified these concepts, this enables rich composition.

— https://github.com/Reactive-Extensions/RxJS#why-rxjs

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Streams Everywhere

…and let’s talk a bit about “side effects.”

Other players in this space

​

https://rpominov.github.io/kefir/ - a Reactive Programming library for JavaScript with focus on high performance and low memory usage.

https://baconjs.github.io/ - a small functional reactive programming lib for JavaScript

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/mapping/bacon.js/whyrx.md

Other players in this space

​

http://highlandjs.org/ - Re-thinking the JavaScript utility belt, Highland manages synchronous and asynchronous code easily, using nothing more than standard JavaScript and Node-like streams.

https://github.com/caolan/async - Async is a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript.

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/mapping/highland/whyrx.md

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/mapping/async/comparing.md

HIGHLAND

The Developer’s (i.e., My) Perspective

/*

​

over --1-----1.1---------1--2-----2---3-------4---------->

out ----1-----1.1---------1-2-------2----3-------4------>

click -------------1----------------------3------4----4--->

​

active --1--------------------2N----2---3-------4------N--->

​

​

hoveredListItemStream

--1-------------------N2N----2--N3---N---4---N------>

click -------------1----------------------3------4----4--->

active --1--------------------2N----2---3-------4------N--->

​

*/

​

​

The Developer’s (i.e., My) Perspective

The Streamosphere

Subscribe Land

Step 1: Streams are born.

Step 2: Streams are manipulated.

Step 3: Sh*t gets real; “Here Be Side Effects.”

(Also, you can debug now.)

Step One: Make an Observable (or Subject)

Rx.Observable.fromArray([1, 2, 3]);

Rx.Observable.fromEvent(input, 'click');�Rx.Observable.fromEvent(eventEmitter, 'data', fn);

Rx.Observable.fromCallback(fs.exists);�Rx.Observable.fromNodeCallback(fs.exists);�Rx.Observable.fromPromise(somePromise);�Rx.Observable.fromIterable(function*() {yield 20});

Rx.Observable.just({team: 'Refactoids'});

Rx.BehaviorSubject(null);

based on http://www.slideshare.net/stefanmayer13/functional-reactive-programming-with-rxjs/21

​

Step Three (Yes, I Skipped Step Two): Subscribe

​

var rangeStream = Rx.Observable.range(1, 3), // 1, 2, 3

rangeSubscription1 = rangeStream.subscribe(function (value) {� // do stuff here.� });�� rangeStream.subscribe(� function (value) { /* onNext */ },� function (error) { /* onError */ },� function () { /* onCompleted */ }� );

/* When we're done */�rangeSubscription1.dispose();

based on http://www.slideshare.net/stefanmayer13/functional-reactive-programming-with-rxjs/22

Step Two: Marble Madness

RxMarbles: Interactive diagrams of Rx Observables

http://rxmarbles.com/

Basics: map

http://rxmarbles.com/#map

Basics: map (let’s see some code)

var simpleStream = Rx.Observable.fromArray([1, 2, 3]);

simpleStream� .map(function (x) {� return x * 10;� })� .subscribe(function (val) {� window.console.log(val);� });

// 10, 20, 30

Basics: filter

http://rxmarbles.com/#filter

Basics: reduce

http://rxmarbles.com/#reduce

Advanced: scan

http://rxmarbles.com/#scan

Advanced: combineLatest

http://rxmarbles.com/#combineLatest

Advanced: flatMap…and friends

http://reactivex.io/documentation/operators/flatmap.html

​

A Story

Angular 1.x

there must be something better

github scrumboard

React

it’s what all the cool kids are doing

Just add Flux

single dispatcher

so that

changes can be propagated in a deterministic order

unidirectional data flow

so that

easier to reason about

resolve updates in one loop

prevent cascading updates

​

​

What the Flux?

Redux

A Flux Reducer

Code...

The good

and the bad

github-scrumboard

with Redux

github-scrumboard

with Redux++

github-scrumboard

with RxJS

You can use RxJS to get the Redux Pattern

Good Enough

Warnings about RxJS

the callstacks becomes worthless

documentation can be a bit academic

hot vs cold adds to cognitive overhead

all the variations (bacon, kefir)

synchronous subject

​

References

rx-book (first chapter was great into)

Intro to Rx Videos (not free)

Video on Hot and Cold Observables

Good Bye Flux, welcome bacon / RxJS

https://github.com/acdlite/react-rx-component haven’t used this yet but it looks promising

Redux and Rx Comparison

Resources

Reactive-Extensions/RxJS → ReactiveX/RxJS�[ReactiveX/RxJS] is a rewrite of Reactive-Extensions/RxJS and is intended to supersede it once [it] is ready.�https://github.com/Reactive-Extensions/RxJS → https://github.com/ReactiveX/RxJS

Functional Reactive Programming with RxJS�http://www.slideshare.net/stefanmayer13/functional-reactive-programming-with-rxjs

The introduction to Reactive Programming you've been missing�https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Introducing the Observable�https://egghead.io/lessons/javascript-introducing-the-observable

To Use Subject Or Not To Use Subject?�http://davesexton.com/blog/post/To-Use-Subject-Or-Not-To-Use-Subject.aspx

RxMarbles: Interactive diagrams of Rx Observables�http://rxmarbles.com/