Talk given at pdx-react meetup on using React with RX-style Observables

1. Observables + React!

2. hello.
Ian Irvine
@IanIrvine
ian@meridianapps.com

3. Meridian = apps for places
Retailers, stadiums, airports,
hospitals, etc.
CARRIER 8:30 AM 100%
CARRIER 8:30 AM 100%
CARRIER 8:30 AM 100%
Transportation
CARRIER 8:30 AM 100%
Retail
Hospitals
Hotels
Campus
CARRIER 8:30 AM 100%

6. Agenda
Who cares about Observables!
Wait, first, what’s an Observable!
How they’ve helped me out in React!
How they might one day help you out in React

7. Fair Warning

8. Why should I care about Observables (you jerk)
Why should I learn yet another async paradigm when obviously
${_.sample([Promises, Tasks, streams, generators, async/await,
CSP, Futures, Fibers, just use callbacks dammit])} are better…

10. They’re coming to React (maybe)
https://github.com/facebook/react/issues/3398

11. They’re coming to Javascript (maybe)
https://www.youtube.com/watch?v=DqMFX91ToLw

12. They’re coming to Angular 2! (maybe)
http://victorsavkin.com/post/110170125256/change-detection-in-angular-2

13. One more sloth slide

14. Events
document.addEventListener(
"mousemove",
(e) => console.log(e)
);
!
emitter.on('thing', (e) => console.log(e));
model.on('change:attr', (e) => console.log(e));

15. Events
var isDown = false, state;
!
function mousedown(e) {
isDown = true;
state = {
startX: e.offsetX,
startY: e.offsetY
};
}
!
function mousemove(e) {
if (!isDown) { return; }
var delta = {
endX: e.clientX - state.startX,
endY: e.clientY - state.startY
};
!
//code goes here
}
!
function mouseup(e) {
isDown = false;
state = null;
}
function dispose() {
elem.removeEventListener('mousedown', mousedown, false);
elem.removeEventListener('mouseup', mouseup, false);
doc.removeEventListener('mousemove', mousemove, false);
}
!
elem.addEventListener('mousedown', mousedown, false);
elem.addEventListener('mouseup', mouseup, false);
doc.addEventListener('mousemove', mousemove, false);

16. Iterators
interface Iterable<T> {
iterator(): Iterator<T>;
}
!
interface Iterator<T> {
hasNext(): Boolean;
next(): T;
}
var things = getIterator();
!
while (things.hasNext()) {
console.log(things.next());
}
!
// or
!
for (let next of things) {
console.log(next);
}
> { value: ‘thing1’ done:false }
> { value: ‘thing2’ done:false }
> { value: ‘thing3’ done:true }

17. So what’s an Observable
It’s the Iterable<T> to event streams.
interface Observable<T> {
subscribe(observer: Observer<T>): Disposable;
}
!
interface Observer<T> {
onNext(value: T): void;
onError(exception: any): void;
onCompleted(): void;
}

18. Observables from Iterables
interface Enumerable<T> {
[Symbol.iterator](): Enumerator<T>;
}
!
interface Enumerator<T> {
next(): EnumeratorValue<T>;
}
!
interface EnumeratorValue<T> {
done: Boolean;
value: T;
}
interface Observable<T> {
subscribe(observer: Observer<T>): Disposable;
}
!
interface Observer<T> {
onNext(value: T): void;
onError(exception: any): void;
onCompleted(): void;
}

19. interface Observable<T> {
subscribe(observer: Observer<T>): Disposable;
}
!
interface Observer<T> {
onNext(value: T): void;
onError(exception: any): void;
onCompleted(): void;
}
Observables from Iterables
interface Enumerable<T> {
[Symbol.iterator](): Enumerator<T>;
}
!
interface Enumerator<T> {
next(): EnumeratorValue<T>;
}
!
interface EnumeratorValue<T> {
done: Boolean;
value: T;
}

20. interface Observable<T> {
subscribe(observer: Observer<T>): Disposable;
}
!
interface Observer<T> {
onNext(value: T): void;
onError(exception: any): void;
onCompleted(): void;
}
Observables from Iterables
interface Enumerable<T> {
[Symbol.iterator](): Enumerator<T>;
}
!
interface Enumerator<T> {
next(): EnumeratorValue<T>;
}
!
interface EnumeratorValue<T> {
done: Boolean;
value: T;
}

21. interface Enumerable<T> {
[Symbol.iterator](): Enumerator<T>;
}
!
interface Enumerator<T> {
next(): EnumeratorValue<T>;
}
!
interface EnumeratorValue<T> {
done: Boolean;
value: T;
}
interface Observable<T> {
subscribe(observer: Observer<T>): Disposable;
}
!
interface Observer<T> {
onNext(value: T): void;
onError(exception: any): void;
onCompleted(): void;
}
Observables from Iterables

22. Observables are like Iterables stretched out across time
[“A”, “B”, “C”, “D”, “E”] //…etc
A B C D E

23. So what’s RX
RX is a particular set of rules for Observables
onNext
Zero or more values
onError
This thing that was sending
me things is done sending
me things, forever
onComplete

24. So what’s RX
Plus a boatload of operators

25. WhoCares.gif
Remember when you found out you could replace this style
of code:
let ret = [];
let xs = [1,2,3,4,5,6];
for (let i = 0; i < xs.length; i++) {
let val = xs[i];
if (!(val % 2)) {
ret.push(val);
}
}
with:
let ret = [1,2,3,4,5,6].filter((val) => !(val % 2));
?

26. RX + Observables turns Events into Collections

27. Examples
let elementDrags = (el) => {
return dom.mouseDown(el)
.map((event) => {
return dom.mousemove(document)
.takeUntil(dom.mouseup(el));
}).concatAll();
};
!
elementDrags(image)
.forEach(moveImage)

28. Examples
function searchWikipedia(term) {
return fetch(`http://en.wikipedia.org/w/api.php?action=opensearch&term=${term}`);
}
!
let keyup = Rx.Observable.fromEvent(document.querySelector('input'), 'keyup')
.map((e) => e.target.value)
.filter((text) => text.length > 2)
.debounce(750)
.distinctUntilChanged();
!
// don't send new requests for keyups that don't change the value, like arrow keys
!
let subscription = keyup.flatMapLatest(searchWikipedia)
.subscribe((data) => {
// bind data to DOM
});
!
// when we're finished
!
subscription.dispose();

29. How can we use these with React
Short answer: I don’t really know yet
• Pass streams around as props!
• Use them to manage real time event streams
(websockets etc)!
• Use them to model data flows in Flux!
• Use them to model state changes in components!
• Animations?

30. !
Historically, our apps have derived a user’s current location
through piece of network infrastructure called a Real Time
Location System (RTLS)
APs work in coordination with the RTLS to
calculate position based on RSSI
triangulation.
The Problem

31. The Problem
==>

32. The Solution
We can solve this with a simple transformation between the
two maps…
But to create this transformation we need at least two
reference points in both coordinate systems.

35. import {Observable} from 'rx';
!
export default function(id, floor, controlPointStream) {
const timer = Observable.interval(7000);
!
function url(controlPoints) {
return `${SERVER}/api/device?id=${id}&foor=${floor}&ref_points=${controlPoints}`;
}
!
function getDevices(controlPoints) {
return fetch(url(controlPoints));
}
!
return controlPointStream.flapMapLatest((controlPoints) => {
return timer.startWith(-1)
.flatMap(getDevices(controlPoints));
});
}

36. import React from 'react';
import rx from 'rx';
!
export default React.createClass({
componentWillMount() {
this.subject = new rx.BehaviorSubject(this.props.initialRefPoints);
this.stream = this.subject.asObservable();
},
!
componentDidUpdate(prevProps) {
if (prevProps.rtlsRefPointString !== this.props.rtlsRefPointString) {
this.subject.onNext(this.props.rtlsRefPointString);
}
},
!
render() {
return (
<div>
<MeridianCoordinatePicker stream={this.stream} {...this.props} />
<RTLSCoordinatePicker stream={this.stream} {...this.props} />
</div>
);
}
});

37. import React from 'react';
import rx from 'rx';
import Entity from './Entity';
import makeDeviceStream from './makeDeviceStream';
!
export default React.createClass({
getInitialState() {
return {devices: null, referencePoints: [0,0]}
},
!
componentWillMount() {
this.subscription = makeDeviceStream(
this.props.id, this.props.floor, this.props.stream)
.map((devices) => {
return Entity.from(devices);
})
.subscribe((devices) => this.setState({devices}));
},
!
componentWillUnmount() {
this.subscription.dispose();
},
!
render() {
return (
<CoordinateSurface
devices={this.state.devices}
referencePoints={this.state.referencePoints}
{...this.props} />
);
}
})

38. Demos!

39. React “side-loaded” data
class MyComponent extends React.Component {
observe() {
return {
updates: rx.DOM.fromWebsocket(this.props.url)
.map((event) => JSON.parse(event.data))
};
}
!
render() {
return (
<div>
Last Update: this.data.updates
</div>
);
}
}

40. Things I haven’t tried yet
Modeling component state as Observable stream
class SearchWikipedia extends RxReact.Component {
constructor(props) {
super(props);
this.keyup = FuncSubject.create();
}
getStateStream() {
return (
this.keyup
.map((e) => e.target.value)
.filter(text => text.length > 2)
.throttle(750)
.distinctUntilChanged()
.flatMapLatest(text => searchWikipedia(text))
.filter(data => data.length >= 2)
.map(results => ({results: results[1]}))
);
}
render() {
var results = this.state && this.state.results || [];
return (
<div>
<div>Start Typing</div>
<input type="text" id="searchtext" onKeyUp={this.keyup}/>
<ul id="results">{
results.map((result, index) =>
<li key={index}>{result}</li>
)
}</ul>
</div>
);
}
}
https://github.com/fdecampredon/rx-react

41. Things I haven’t tried yet
Combining Observables with Flux
• https://github.com/fdecampredon/rx-flux!
• http://r3dm.github.io/thundercats/!
• https://github.com/cell303/flurx

42. Things I didn’t have time for
• Backpressure in Observables
https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/backpressure.md
• Hot vs Cold Observables
https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/creating.md#cold-vs-hot-observables
• Schedulers
https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/schedulers.md

43. Sources
• Intro To Reactive Programming you’ve been missing
(https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)!
• Coursera’s Reactive Programming Course (starts this
week!)!
• reactivex.io!
• @ReactiveX

44. We’re hiring!!
!
http://www.meridianapps.com/about#jobs
!
ian@meridianapps.com

45. For more information:
Ian Irvine
ian@meridianapps.com
!