rxjs, javascript, marble testing

1. RXJS
A BETTER ASYNC
1

2. About me
Google Developer Expert
Telerik Developer Expert
Fullstack developer at McKinsey Digital Labs
@chris_noring
2

3. Async is hard to code without creating this
3 . 1

4. Spaghetti code
3 . 2

5. Spaghetti code in the form of this
3 . 3

6. 3 . 4

7. YOU GUESSED IT
CALLBACK HELL
3 . 5

8. getData(function(data){
getMoreData( data, function(moreData) {
getEvenMoreData( moreData, function(evenMoreData){
})
})
})
3 . 6

9. SO, WHATS BETTER?
3 . 7

10. Promises
getData()
.then( getMoreData )
.then( getEvenMoreData )
3 . 8

11. Async await
let data = await getData()
let moreData await getMoreData( data )
let evenMoreData = await getEvenMoreData( moreData )
3 . 9

12. Why should I go with RxJS over Promises?
4 . 1

13. You have problems with connectivity
Your data behaves more like a continuous stream of
data than Request/Response
Essentially: your Async code starts to look messy
and/or consists of a lot of endpoints with data that
looks and behaves differently.
4 . 2

14. PROMISES ARE NOT
ENOUGH IN
COMPLEX
SCENARIOS
4 . 3

15. Returns one value only
Hard to retry
No cancellation
Doesn't mix easily with other async concepts
4 . 4

16. RXJS AND
OBSERVABLE
TO THE RESCUE
4 . 5

17. WHAT IS AN
OBSERVABLE?
5 . 1

18. Think of an Observable as a combination of an Array
and a Promise
5 . 2

19. Array
Promise
list
.map( x = > x.prop )
.filter( x => x > 2 )
.take( 2 )
getData()
.then(
data => console.log(data),
err => console.error(error)
)
5 . 3

20. Observable
let stream$ = Rx.Observable.of({prop: 1},{prop: 2},{prop: 3});
stream$
.map( x => x.prop)
.filter( x => x > 2 )
.take( 2 )
.subscribe(
data => console.log(data),
err => console.error(error)
)
5 . 4

21. Observable = Array + Promise + Cancelling + Retry and
more =
Superpowers
5 . 5

22. An Observable is a function that takes an observer
as an argument
An observer is an object with the methods
Example
.next()
.error()
.complete()
Rx.Observable.create(observer => {
observer.next(1)
observer.error('err')
observer.complete()
});
5 . 6

23. Creating an observable - emitting data:
let stream$ = Rx.Observable.create( observer => {
observer.next( 1 ); // 1
observer.error('error'); // 2
observer.complete(); // 3
})
let subscription = stream$.subscribe(
data => console.log('Data',data), // 1
err => console.error(err), // 2
() => console.log('complete') // 3
)
5 . 7

24. Subscribing/ Unsubscribing:
let subscription = stream$.subscribe(
data => console.log('Data',data),
err => console.error(err)
)
setTimeout(() => {
subscription.unsubscribe();
},3000);
5 . 8

25. Define unsubscribe behaviour - to clean up:
let stream$ = Rx.Observable.create( observer => {
let i = 0;
let id = setInterval(() =>{
observer.next( i++ );
},1000)
return function IAmCalledOnUnsubscribe(){
clearInterval( id );
}
})
setTimeout(() => {
subscription.unsubscribe();
},3000);
5 . 9

26. CREATE
OBSERVABLES FROM
SOMETHING
6 . 1

27. Create using a factory function
6 . 2

28. And many more...
Rx.Observable.from([2,3,4,5])
Rx.Observable.from(new Promise(resolve, reject) => {
// do async work
resolve( data )
})
Rx.Observable.of(1,2);
Rx.Observable.fromEvent(document, 'mousemove')
Rx.Observable.interval(1000)
6 . 3

29. Create by wrapping an API
6 . 4

30. Emitting data - observer.next()
Handle error - observer.error()
Close the stream - observer.complete()
6 . 5

31. let stream = Rx.Observable.create((observer) => {
let request = new XMLHttpRequest();
request.open( ‘GET’, ‘url’ );
request.onload = () =>{
if(request.status === 200) {
observer.next( request.response ); // 1
observer.complete(); // 3
}
}
request.onerror = () => {
observer.error('error happened'); // 2
request.send();
}
});
6 . 6

32. OPERATORS
IS WHAT GIVE OBSERVABLES ITS POWER
7 . 1

33. There are 60+ operators
7 . 2

34. construction
conversion
combination
mathematical
time based
7 . 3

35. Just learn a few important operators from each
category to start with.
7 . 4

36. Operators are chained and happens before
.subscribe()
Rx.Observable.of(1,2,3,4)
.operator()
.operator()
.operator()
.subscribe()
7 . 5

37. What an operator does can be graphically presented as
a Marble Diagram.
See more operators at http://rxmarbles.com/
7 . 6

38. map/filter
Rx.Observable
.of( 1,2,3 )
.map( x => x +1 )
.filter( x => x % 2 === 0 );
7 . 7

39. do - use to debug, can be placed where you need it.
Rx.Observable
.of( 1,2,3 )
.do( x => console.log(x) )
.map( x => x +1 )
.filter( x => x % 2 === 0 )
.do( x => console.log(x) )
7 . 8

40. flatMap, sometimes you need to create an Observable
inside an Observable. example: Based on a keyup we
want to do an ajax call
PROBLEM : we get a list of Observables instead of 1
Observable
Rx.Observable.fromEvent(document,'keyup')
.map(ev => event.target.value)
.map( key => {
return Rx.DOM.json(url)
})
7 . 9

41. SOLUTION: flatMap
Creates a metastream instead of a list of Observables
Rx.Observable.fromEvent(document,'keyup')
.map(ev => event.target.value)
.flatMap( key => {
return Rx.DOM.json(url)
})
7 . 10

42. Sometimes `flatMap` is a bad match. You want to be
able to abandon what you were doing if precondition
change. Example a dependent call chain
7 . 11

43. This ensures the rest is thrown away if the user
changes
Rx.Observable.fromEvent(document,'keyup')
.map(ev => ev.target.value)
.switchMap(getUser)
.switchMap(getOrdersByUser)
.switchMap(getProductsByOrder)
7 . 12

44. RECIPES
8 . 1

45. Auto complete
8 . 2

46. Requirements
Listen for keyboard presses
Only do server trip a er x number of characters are
entered
Do ajax call based on filtered input
Cash responses
8 . 3

47. Procedural approach
8 . 4

48. let input = $(‘#input’);
input.bind(‘keyup’,() = >{
let val = input.val()
if(val.length >= 3 ) {
if( isCached( val ) ) {
buildList( getFromCache(val) );
return;
}
doAjax( val ).then( (response) => {
buildList( response.json() )
storeInCache( val, response.json() )
});
}
})
8 . 5

49. Rxjs - streaming approach
8 . 6

50. 8 . 7

51. let stream$ = Rx.Observable.fromEvent(input, 'keyup')
.map( ev => ev.target.value )
.filter( text => text.length >= 3 )
.distintUntilChanged()
.switchMap( val => Rx.DOM.getJSON(url_to_json))
stream$.subscribe( data => console.log(data));
8 . 8

52. RXJS VS PROMISES
9 . 1

53. I know how to do things with Promises, but how do I
do it in Rxjs?
9 . 2

54. Simple scenario:
9 . 3

55. Promise version
getData().then(
data => console.log( data ),
err => console.error( err )
)
9 . 4

56. Rxjs version
getData().subscribe(
data => console.log( data ),
err => console.error( err ),
() => console.log('completed')
)
9 . 5

57. Cascading calls, calls need to happen in a certain order
9 . 6

58. replace Promise.resolve()
getData(){
return Promise.resolve(123);
}
9 . 7

59. with Observable version
getData(){
return Rx.DOM.getJSON( 'data3.json' );;
}
9 . 8

60. AND
9 . 9

61. replace .then()
getUser()
.then(getOrderByUser)
.then(getProductsByOrder)
9 . 10

62. with .switchMap()
getUser()
.switchMap(getOrderByUser)
.switchMap(getProductsByOrder)
9 . 11

63. Short word on switchMap
First stream of cascading calls are abandoned if user is
changed
9 . 12

64. What about semi dependant calls where parts of the
data can be fetched in parallel?
9 . 13

65. Promise approach
getUser()
.then( user => {
return Promise.all([
getMessages( user.id ),
getOrders( user.id )
])
})
9 . 14

66. Observable approach
getUser()
.switchMap( user => {
return Rx.Observable.forkJoin(
getMessages( user.id ),
getOrders( user.id )
)
})
9 . 15

67. ERROR HANDLING,
WHEN STREAMS FAIL
10 . 1

68. Streams fail, and when they do you need a plan on
how to handle it
10 . 2

69. Catch and Transform
Ignore
Retry til it works, or give up trying eventually
10 . 3

70. Reaching the error callback but no completion
let stream$ = Rx.Observable.create(observer => {
observer.next( 1 );
throw { name : 'some error' }
});
stream$.subscribe(
data => console.log(data), // 1
err => console.error(err) // 'some error',
() => console.log('completed') // not reached
)
10 . 4

71. Catching the error
10 . 5

72. Effectively swallowing the error.
let stream$ = Rx.Observable.create(observer => {
observer.next( 1 );
throw { message : 'some error' }
})
.catch( err => Rx.Observable.of(err.message))
stream$.subscribe(
data => console.log(data), // 1, 'some error'
err => console.error(err), // not reached
() => console.log('completed') // completed
)
10 . 6

73. Ignoring the error
10 . 7

74. When merging different streams, what you want is
maybe to let one stream survive and the erronous
ones to fail silently
10 . 8

75. Let's first see what happens if we do nothing
10 . 9

76. We loose last stream because a stream failed before it,
order matters
Rx.Observable.merge(
Rx.Observable.of(1,2,3),
Rx.Observable.throw('err')
Rx.Observable.of(4,5)
)
.subscribe(
data => console.log(data), // 1,2,3
err => console.error(err), // err
() => console.log('completed') // not reached
)
10 . 10

77. Let the correct stream survive
10 . 11

78. Survival of the fittest with onErrorResumeNext()
Rx.Observable.onErrorResumeNext(
Rx.Observable.throw('error'),
Rx.Observable.throw('another error')
Rx.Observable.of(4,5)
)
.subscribe(
data => console.log(data), // 4,5
err => console.error(err), // not reached
() => console.log('completed') // completed
)
10 . 12

79. Retry - when you expect a different result if you retry it
in a while OR a er x times.
10 . 13

80. Simple retry, postponing when error callback is hit
10 . 14

81. Postpone when the error callback is called
Rx.Observable.create(observer => {
observer.next( 1 );
throw { message : 'err' }
})
.retry(5) // times
.subscribe(
data => console.log(data),
err => console.log(err), // hit after 5 retry attempts
() => console.log('completed')
)
10 . 15

82. For 'shaky connections where you expect to succeed
eventually
Whole stream is retried if error is thrown
let stream$ = doAjax()
.retryWhen( errors => {
return errors.delay(200);
})
stream$.subscribe( data => console.log(data));
10 . 16

83. TESTING
11 . 1

84. Async testing is normally painful
11 . 2

85. Can we actually test methods that might take 2s or 2
min to run?
11 . 3

86. Short answer is yes we can
11 . 4

87. Its' called marble testing
11 . 5

88. It has a virtual clock - i.e we can increment time as we
see fit
11 . 6

89. It's a visual comparison
11 . 7

90. Expected stream:
x-y-z-#
Actual stream:
x-y-z-|
11 . 8

91. What are these symbols?
11 . 9

92. - = a time increment has passed
| = end of stream
# = an error has occured
x,y,z etc are values being emitted
11 . 10

93. Let's see some code
11 . 11

94. Arrange
const lhsMarble = '-x-y-z';
const expected = '-x-y-z';
const expectedMap = {
x: 1,
y: 2,
z : 3
};
11 . 12

95. Act - creating a Hot Observable, define our code to test
const lhs$ = testScheduler.createHotObservable(
lhsMarble,
expectedMap
);
const myAlgorithm = ( lhs ) =>
Rx.Observable
.from( lhs )
.operator()
.operator()
const actual$ = myAlgorithm( lhs$ );
11 . 13

96. Assert
testScheduler.expectObservable(actual$).toBe(
expected,
expectedMap
);
testScheduler.flush();
11 . 14

97. In summary
RxJS shines when your Async is complex
Observables can be created from almost any async
concept
Enables rich composition
Observables are easy to retry
RxJS is easily tested by using Marble Testing
Cancellation is easy, and you should
cancel/unsubscribe, to clean up resources
It's not ketchup, use it where appropriate
12 . 1

98. Further Reading
12 . 2

99. angular.io/resources "Rxjs Ultimate" - my free book
http://reactivex.io/rxjs/ - Official documentation
TRy out your snippets with RxFiddle.net
12 . 3

100. Thank you
13