04.07.2015 WebCamp:Front-end Developers Day Александр Мостовенко (Python developer at Prom.ua) "Rx.js - делаем асинхронное программирование проще" В данном докладе будет рассмотрено преимущество FRP подхода к построению javascript приложений на примере библиотеки Rx.js. Узнаем как Rx.js позволяет избавиться от callback hell и превращает сложные вещи в простые. Подробнее: http://geekslab.co, http://webcamp.in.ua/ https://www.facebook.com/GeeksLab.co , https://www.facebook.com/OdessaInnovationWeek https://www.youtube.com/user/GeeksLabVideo

1. Rx.js
making async programming simpler

2. About me
Mostovenko Alexander
Python developer at
Writing mostly in python and coffeescript.
Love FP stuff.
Traveling, snowboarding, cycling.
https://twitter.com/MostovenkoA
https://github.com/AlexMost

3. Why Rx.js and not another FRP lib?
● Implemented in a lot of languages
(.NET, Java, Ruby, Python, Clojure, Scala,
Haskell, Objective-C).
● Has a huge amount of docs and examples.
● Why not?

4. Asynchronous code

5. Async code in javascript
● Some computation with delayed result.
(data fetch, animations, DOM operations)
● Reacting to events (event handlers)

6. Sync vs Async dataflow

7. Synchronous dataflow

8. Synchronous dataflow
In

9. Synchronous dataflow
In
1

10. Synchronous dataflow
In
1
2

11. Synchronous dataflow
In
1
2
...

12. Synchronous dataflow
In
1
2
Out
...

13. Asynchronous dataflow
time
Actions

14. Asynchronous dataflow (autocomplete)
time
Actions
keyup

15. Asynchronous dataflow (autocomplete)
time
Actions
keyup
per 2 seconds

16. Asynchronous dataflow (autocomplete)
time
Actions
keyup
per 2 seconds
ajax request

17. Asynchronous dataflow (autocomplete)
time
Actions
keyup
per 2 seconds
ajax request
ajax response

18. Asynchronous dataflow (autocomplete)
time
Actions
keyup
per 2 seconds
ajax request
ajax response
show suggest

19. Asynchronous dataflow (autocomplete)
time
Actions
keyup
per 2 seconds
ajax request
ajax response
show suggest

20. Asynchronous dataflow (autocomplete)
time
Actions
keyup
per 2 seconds
ajax request
ajax response
show suggest
Ooooops

21. Problems with async code
1. How to manage async flow in code?
2. How to handle errors?
3. How to compose?

22. Callbacks
● Event notification
● Manage control flow

23. Callbacks
● Event notification - Yes
● Manage control flow - Nooooooooooo

24. Callback hell
async_func1(function(err, data){
async_func2(function(err, data){
async_func3(function(err, data){
async_func4(function(err, data){
});
});
});
});

25. Callback hell yeah !!!
async_func1(function(err, data){
if (!err) {
async_func2(function(err, data){
if (!err) {
async_func3(function(err, data){
if (!err) {
async_func4(function(err, data){
});
} else {
log(err);
}
});
} else {
log(err);
}
});
} else {
log(err);
}
});

26. Callback hell yeah !!!
async_func1(function(err, data){
if (!err) {
async_func2(function(err, data){
if (!err) {
async_func3(function(err, data){
if (!err) {
async_func4(function(err, data){
});
} else {
log(err);
}
});
} else {
log(err);
}
});
} else {
log(err);
}
});
UNREADABLE !!!
UNMANAGABLE !!!
UNTESTABLE !!!
UNCOMPOSABLE !!!
PIECE OF ….
CODE

28. Monad
A monad is just a monoid in the category of
endofunctors

29. Callback vs Black hole
some_async_func(function(err, result) {
// ... looks like we are in trap
another_wonderful_func(function(err, result){
// ... you are in trap
});
});

30. Callback vs Black Hole
1. No return value (undefined)

31. Callback vs Black Hole
1. No return value (undefined)
2. One way ticket (callback hell)

32. How about Promise?

33. Promise
var promise = new Promise((resolve, reject) => {
// ... some async staff
});
promise.then(
(result) => {},
(error) => {}
)

34. Promise
1. Step forward from callbacks for control flow
managing
2. Error handling

35. Why we should look at Observable?
1. Promise represents only single value.
2. How to cancel?
3. Lazy execution.
4. We can work with Observable as easy as with
promise.

36. Promise is Observable only with a single value

37. Observable
The Observable object represents a push
based collection (streams).

38. Observable
var source = Rx.Observable.create((observer) =>
// some async operation
observer.onNext(data)
// or ..
observer.onError(data)
// or ..
observer.onCompleted(data)
);
source.subscribe(
(data) => {}
(err) => {}
)

39. Observlable vs promise example
var source = Rx.Observable.create((observer) => {
setTimeout(() => {
console.log("observable timeout hit");
observer.onNext(25);
}, 500);
console.log('observable started')});
source.subscribe(x => console.log(`observable value ${x}`));
Observable
> observable started
> observable timeout hit
> observable value 25

40. Observlable vs promise example
var promise = new Promise((resolve) => {
setTimeout(() => {
console.log("promise timeout hit");
resolve(25);
}, 500);
console.log("promise started");});
promise.then(x => console.log(`promise value ${x}`));
Promise
> promise started
> promise timeout hit
> promise value 25

41. Lazy execution
var source = Rx.Observable.create((observer) => {
setTimeout(() => {
console.log("observable timeout hit");
observer.onNext(25);
}, 500);
console.log('observable started')});
// source.subscribe(x => console.log(`observable value ${x}`));
>

42. Promise can’t do that
var promise = new Promise((resolve) => {
setTimeout(() => {
console.log("promise timeout hit");
resolve(25);
}, 500);
console.log("promise started");});
// promise.then(x => console.log(`promise value ${x}`));
Promise
> promise started
> promise timeout hit

43. Observable can be canceled
var source = Rx.Observable.create((observer) => {
var id = setTimeout(() => {
console.log("observable timeout hit");
observer.onNext(25);
}, 500);
console.log('observable started');
return () => {
console.log("dispose called")
clearTimeout(id);}
});
var disposable = source.subscribe(
x => console.log(`observable value ${x}`));
setTimeout(() => disposable.dispose(), 100)
> observable started
> dispose called

44. Asynchronous programming landscape
multiple
values
single
value
sync async
a = f(x) a = f(x).then(...)
collection = [1, 2, 3]
a = collection
.filter((v) => v > 2)
Promise
Array
Sync value
?

45. Asynchronous programming landscape
multiple
values
single
value
sync async
a = f(x) a = f(x).then(...)
collection = [1, 2, 3]
a = collection
.filter((v) => v > 2)
move = Rx.Observable.fromEvent(document, 'mousemove')
my_moves = move
.filter((ev) => ev.clientX > 100)
my_moves.subscribe(...)
Promise
Array
value
Observable

46. Observable stream from :
● Observable.create
● Observable.fromEvent
● Observable.fromNodeCallback
● Observable.fromArray
● Observable.fromPromise

47. Drag & Drop example
What if i told you ….
That mouse move event is an array and you
can map, filter over it?
demo - http://alexmost.github.io/talks/rx.js/demo/drag_and_drop.html

48. var dragTarget = document.getElementById('dragTarget');
// Get the three major events collections
var mouseup = Rx.DOM.fromEvent(dragTarget, 'mouseup');
var mousemove = Rx.DOM.fromEvent(document, 'mousemove');
var mousedown = Rx.DOM.fromEvent(dragTarget, 'mousedown');
var mousedrag = mousedown.flatMap(({offsetX, offsetY}) => {
return mousemove
.map(({clientX: x, clientY: y}) => {
return {left: x - offsetX, top: y - offsetY}})
.takeUntil(mouseup)
});
var subscription = mousedrag.subscribe((pos) => {
dragTarget.style.top = pos.top + 'px';
dragTarget.style.left = pos.left + 'px';
});

49. var dragTarget = document.getElementById('dragTarget');
// Get the three major events collections
var mouseup = Rx.DOM.fromEvent(dragTarget, 'mouseup');
var mousemove = Rx.DOM.fromEvent(document, 'mousemove');
var mousedown = Rx.DOM.fromEvent(dragTarget, 'mousedown');
var mousedrag = mousedown.flatMap(({offsetX, offsetY}) => {
return mousemove
.map(({clientX: x, clientY: y}) => {
return {left: x - offsetX, top: y - offsetY}})
.takeUntil(mouseup)
});
var subscription = mousedrag.subscribe((pos) => {
dragTarget.style.top = pos.top + 'px';
dragTarget.style.left = pos.left + 'px';
});
Create observable collections
from DOM events

50. var dragTarget = document.getElementById('dragTarget');
// Get the three major events collections
var mouseup = Rx.DOM.fromEvent(dragTarget, 'mouseup');
var mousemove = Rx.DOM.fromEvent(document, 'mousemove');
var mousedown = Rx.DOM.fromEvent(dragTarget, 'mousedown');
var mousedrag = mousedown.flatMap(({offsetX, offsetY}) => {
return mousemove
.map(({clientX: x, clientY: y}) => {
return {left: x - offsetX, top: y - offsetY}})
.takeUntil(mouseup)
});
var subscription = mousedrag.subscribe((pos) => {
dragTarget.style.top = pos.top + 'px';
dragTarget.style.left = pos.left + 'px';
});
Using power of Rx, combine
existing event streams to produce
mouse drag event collection

51. var dragTarget = document.getElementById('dragTarget');
// Get the three major events collections
var mouseup = Rx.DOM.fromEvent(dragTarget, 'mouseup');
var mousemove = Rx.DOM.fromEvent(document, 'mousemove');
var mousedown = Rx.DOM.fromEvent(dragTarget, 'mousedown');
var mousedrag = mousedown.flatMap(({offsetX, offsetY}) => {
return mousemove
.map(({clientX: x, clientY: y}) => {
return {left: x - offsetX, top: y - offsetY}})
.takeUntil(mouseup)
});
var subscription = mousedrag.subscribe((pos) => {
dragTarget.style.top = pos.top + 'px';
dragTarget.style.left = pos.left + 'px';
});
Subscribe on mouse drag events,
updating top and left attributes

52. Observable are first class objects
Can be:
- passed as a parameter
- returned from a function
- assigned to a variable

53. Live example - Morse parser

54. Morse logic
1. Parse signals (.... --- … ---)
2. Parse spaces (letters - 3 span, word - 7 span)
3. Decode in Letters
4. Collect in words

55. Demo
http://alexmost.github.io/morse/
source - https://github.com/AlexMost/morse

56. Challenges
1. Dot or line?
2. Different length of letter codes.
3. Track pause between letters (3 spans).
4. Track pause between words (7 spans).

57. DOM events (keyUp, keyDown, Click, e.t.c)
Signal start, signal end
dots, lines, spaces
letter codes (array of dot’s and lines)
words, letters, sentence
Composable streams

58. DOM events (keyUp, keyDown, Click, e.t.c)
Signal start, signal end
dots, lines, spaces
letter codes (array of dot’s and lines)
words, letters, sentence
Can use each separately

59. Space key down/up as collection
var spaceKeyDowns = Rx.Observable.fromEvent(document, 'keydown').filter((ev) => ev.keyCode == 32)
var spaceKeyUps = Rx.Observable.fromEvent(document, 'keyup').filter((ev) => ev.keyCode == 32)

60. Code for dot’s and lines
var signalStarts = eventStream.filter(({action}) => action === "signal_start").timestamp()
var signalEnds = eventStream.filter(({action}) => action === "signal_end").timestamp()
var signalTimeSpans = signalStarts.flatMap((startArgs) => {
return signalEnds
.map((endArgs) => endArgs.timestamp - startArgs.timestamp)
.first()
})
var dotsStream = signalTimeSpans.filter((v) => v <= SPAN).map(() => ".")
var lineStream = signalTimeSpans.filter((v) => v > SPAN).map(() => "-")
var dotsAndLines = Rx.Observable.merge(dotsStream, lineStream)

61. Code for dot’s and lines
var signalStarts = eventStream.filter(({action}) => action === "signal_start").timestamp()
var signalEnds = eventStream.filter(({action}) => action === "signal_end").timestamp()
var signalTimeSpans = signalStarts.flatMap((startArgs) => {
return signalEnds
.map((endArgs) => endArgs.timestamp - startArgs.timestamp)
.first()
})
var dotsStream = signalTimeSpans.filter((v) => v <= SPAN).map(() => ".")
var lineStream = signalTimeSpans.filter((v) => v > SPAN).map(() => "-")
var dotsAndLines = Rx.Observable.merge(dotsStream, lineStream)
Abstraction on top of key down,
key up, mouse down, mouse up,
e.t.c with timestamp

62. Code for dot’s and lines
var signalStarts = eventStream.filter(({action}) => action === "signal_start").timestamp()
var signalEnds = eventStream.filter(({action}) => action === "signal_end").timestamp()
var signalTimeSpans = signalStarts.flatMap((startArgs) => {
return signalEnds
.map((endArgs) => endArgs.timestamp - startArgs.timestamp)
.first()
})
var dotsStream = signalTimeSpans.filter((v) => v <= SPAN).map(() => ".")
var lineStream = signalTimeSpans.filter((v) => v > SPAN).map(() => "-")
var dotsAndLines = Rx.Observable.merge(dotsStream, lineStream)
Signal duration count

63. Code for dot’s and lines
var signalStarts = eventStream.filter(({action}) => action === "signal_start").timestamp()
var signalEnds = eventStream.filter(({action}) => action === "signal_end").timestamp()
var signalTimeSpans = signalStarts.flatMap((startArgs) => {
return signalEnds
.map((endArgs) => endArgs.timestamp - startArgs.timestamp)
.first()
})
var dotsStream = signalTimeSpans.filter((v) => v <= SPAN).map(() => ".")
var lineStream = signalTimeSpans.filter((v) => v > SPAN).map(() => "-")
var dotsAndLines = Rx.Observable.merge(dotsStream, lineStream)
dot’s stream
lines stream

64. Code for dot’s and lines
var signalStarts = eventStream.filter(({action}) => action === "signal_start").timestamp()
var signalEnds = eventStream.filter(({action}) => action === "signal_end").timestamp()
var signalTimeSpans = signalStarts.flatMap((startArgs) => {
return signalEnds
.map((endArgs) => endArgs.timestamp - startArgs.timestamp)
.first()
})
var dotsStream = signalTimeSpans.filter((v) => v <= SPAN).map(() => ".")
var lineStream = signalTimeSpans.filter((v) => v > SPAN).map(() => "-")
var dotsAndLines = Rx.Observable.merge(dotsStream, lineStream) dot’s and lines !!!

65. Push based collections in result
var lettersStream = letterCodes.map((codes) => morse.decode(codes.join("")))
var wordsStream = lettersStream.buffer(wordsWhitespaces).map((w) => w.join(""))

66. Use Observable as collection
var setCatImgStream = wordsStream.filter((word) => word == "CAT").map(setCatImg)

67. Cat demo
http://alexmost.github.io/morse/

69. Some common basic operations
map
filter
reduce
zip
merge
flatMap
...
https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observable.md

70. map
http://rxmarbles.com/#map

71. filter
http://rxmarbles.com/#filter

72. var mousedrag_in_area = mousedrag.filter(({top, left}) => {
return top <= 200 && left <= 200
});
var subscription = mousedrag_in_area.subscribe((pos) => {
dragTarget.style.top = pos.top + 'px';
dragTarget.style.left = pos.left + 'px';
});
let’s filter drag area
demo - http://alexmost.github.io/talks/rx.js/demo/filter.html

73. delay
http://rxmarbles.com/#delay

74. let’s create slow mouse drag
var slow_mousedrag = mousedrag.delay(700)
var subscription = slow_mousedrag.subscribe((pos) => {
dragTarget.style.top = pos.top + 'px';
dragTarget.style.left = pos.left + 'px';
});
demo - http://alexmost.github.io/talks/rx.js/demo/delay.html

75. reduce
http://rxmarbles.com/#reduce

76. let’s record our drag path
var drag_path = mousedrag
.takeUntil(mouseup)
.reduce(((a, b) => a + `${b.top} ${b.left};`), "")
drag_path.subscribe((path) => pathTarget.innerHTML = path)
demo - http://alexmost.github.io/talks/rx.js/demo/reduce.html

77. flatMap

78. flatMap
var mousedrag = mousedown.flatMap(({offsetX, offsetY}) => {
return mousemove
.map(({clientX: x, clientY: y}) => {
return {left: x - offsetX, top: y - offsetY}})
.takeUntil(mouseup)
});

79. flatMap
var mousedrag = mousedown.flatMap(({offsetX, offsetY}) => {
return mousemove
.map(({clientX: x, clientY: y}) => {
return {left: x - offsetX, top: y - offsetY}})
.takeUntil(mouseup)
});
Outer stream

80. flatMap
var mousedrag = mousedown.flatMap(({offsetX, offsetY}) => {
return mousemove
.map(({clientX: x, clientY: y}) => {
return {left: x - offsetX, top: y - offsetY}})
.takeUntil(mouseup)
});
value as a stream

81. merge
http://rxmarbles.com/#merge

82. merge demo
demo - http://alexmost.github.io/talks/rx.js/demo/merge.html

83. merge
var btnTarget = document.getElementById('okbtn');
var buttonClicks = Rx.DOM.fromEvent(btnTarget, 'click');
var move_to_100 = buttonClicks.map(() => {return {left: 100, top: 100}});
var change_position = Rx.Observable.merge(mousedrag, move_to_100)
change_position.subscribe((pos) => {
dragTarget.style.top = pos.top + 'px';
dragTarget.style.left = pos.left + 'px';
});

84. merge
var btnTarget = document.getElementById('okbtn');
var buttonClicks = Rx.DOM.fromEvent(btnTarget, 'click');
var move_to_100 = buttonClicks.map(() => {return {left: 100, top: 100}});
var change_position = Rx.Observable.merge(mousedrag, move_to_100)
change_position.subscribe((pos) => {
dragTarget.style.top = pos.top + 'px';
dragTarget.style.left = pos.left + 'px';
});
new stream

85. And a lot of other methods ….
● amb
● and
● asObservable
● average
● buffer
● bufferWithCount
● bufferWithTime
● bufferWithTimeOrCount
● catch | catchError
● combineLatest
● concat
● concatAll
● concatMap
● concatMapObserver
● connect
● includes
● controlled
● count
● debounce
● debounceWithSelector
● defaultIfEmpty
● delay
● delaySubscription
● delayWithSelector
● dematerialize
● distinct
● distinctUntilChanged
● do
● doOnNext
● doOnError
● doOnCompleted
● doWhile
● elementAt
● elementAtOrDefault
● every
● expand
● extend
● filter
● find
● findIndex
● first
● firstOrDefault
● flatMap
● flatMapObserver
● flatMapLatest
● forkJoin
● groupBy
● groupByUntil
● groupJoin
● ignoreElements
● indexOf
● isEmpty
● join
● jortSort
● jortSortUntil
● last
● lastOrDefault
● merge
● mergeAll
● min
● minBy
● multicast
● observeOn
● onErrorResumeNext
● pairwise
● partition
● pausable
● pausableBuffered
● pluck
● publish
● publishLast
● publishValue
● share
● shareReplay
● shareValue
● refCount
● reduce
● repeat
● replay
● retry
● retryWhen
● sample
● scan
● select
● selectConcat
● selectConcatObserver
● selectMany
● selectManyObserver
● selectSwitch
● sequenceEqual
● single
● singleOrDefault
● singleInstance
● skip
● skipLast
● skipLastWithTime
● skipUntil
https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observable.md

86. Testing with time machine
Rx.TestScheduler

87. var mult_stream = some_stream.debounce(100).map((n) => n * 2)
assertRxActions(
mult_stream,
[
[100, {value: 20}],
[200, {value: 40}]
],
[
[200, {value: 80}]
],
(result) => assertTrue(result)
)

88. var mult_stream = some_stream.debounce(100).map((n) => n * 2)
assertRxActions(
mult_stream,
[
[100, {value: 20}],
[200, {value: 40}]
],
[
[200, {value: 80}]
],
(result) => assertTrue(result)
)
stream to test

89. var mult_stream = some_stream.debounce(100).map((n) => n * 2)
assertRxActions(
mult_stream,
[
[100, {value: 20}],
[200, {value: 40}]
],
[
[200, {value: 80}]
],
(result) => assertTrue(result)
)
Input stream messages

90. var mult_stream = some_stream.debounce(100).map((n) => n * 2)
assertRxActions(
mult_stream,
[
[100, {value: 20}],
[200, {value: 40}]
],
[
[200, {value: 80}]
],
(result) => assertTrue(result)
)
time

91. var mult_stream = some_stream.debounce(100).map((n) => n * 2)
assertRxActions(
mult_stream,
[
[100, {value: 20}],
[200, {value: 40}]
],
[
[200, {value: 80}]
],
(result) => assertTrue(result)
)
Expected result at time

92. var mult_stream = some_stream.debounce(100).map((n) => n * 2)
assertRxActions(
mult_stream,
[
[100, {value: 20}],
[200, {value: 40}]
],
[
[200, {value: 80}]
],
(result) => assertTrue(result)
)
callback for assert

93. React ?
● Rx-React
● RxReact
● cycle-react
● React RxJS Autocomplete
● React RxJS TODO MVC
● Rx TODO MVC
● React RxJS Router
● React + RxJS + Angular 2.0 di.js TODO MVC
● React + RxJS Reactive Cube
● Real-Time with React + RxJS + Meteor
● React + RxJS Flow
● Reactive Widgets
● React RxJS Infinite Scroll

94. Flux ?
● Rx-Flux
● ReactiveFlux
● Thundercats.js
● Flurx
● RR

95. Conclusion
● Use Rx

96. Resources
http://rxmarbles.com/
http://jaredforsyth.com/rxvision/
https://github.com/jhusain/learnrx

97. Talk demos here
https://github.com/AlexMost/talks/tree/master/rx.js

98. Thanks : D