Rethink Async with RXJS

1. Rethink Async with
RXJS

2. Senior UI Engineer at
About Me
bittersweetryan
ranklam@netflix.com

3. Before We Begin

4. Before We Begin
Be KIND to those of us with OCD and…

5. Before We Begin
Change those Dropbox icons to B&W!

6. Reactive
Programming!

7. Reactive Programming
Java…
Groovy…
and JavaScript
At Netflix do a lot of RX…
.NET…

8. We Build This With RXJS

9. Reactive Programming
What if?
The iterator pattern and observer met at a bar, !
fell in love, got married, and had a baby?

10. Reactive Programming

11. Reactive Programming
What if?
This baby would allow you to use the same code to !
respond to events and asynchronous operations?

12. Meet Observable

13. Observables
What to events and async functions have in common?

14. Observables
As a mouse moves, doesn’t it just emit coordinates?
Tracking Mouse Movements

15. Observables
Tracking Mouse Movements
1s 2s
Mousedown
0s
Mouseup
{x : 200, y: 521} {x : 240, y: 552} {x : 210, y: 602} {x : 199, y: 579}
{x : 221, y: 530} {x : 218, y: 570} {x : 200, y: 599}

16. Observables
var mouseMoves =
Observable.fromEvent( mouseDown )
.takeUntil( mouseUp )
.map( function( mouseEvent ){
return {
x : mouseEvent.clientX,
y : mouseEvent.clientY
};
} ) ;
!
mouseMoves.subscribe( function( cords ){
//do stuff for each mouse move cord
});
Mouse Moves Observable

17. Observables
Observables Everywhere!
• Events!
• AJAX Requests!
• Node Functions!
• Arrays!
• Promises!
• And more….

18. Observables
Why not another Async approach?
• Replayable!
• Composable!
• Cancellable!
• Cache-able!
• Shareable!
• Can emit multiple value-able

19. Functional Review!
(With an RX twist)

20. Functional Review
Map
Reduce
Filter
Zip

21. var searchResultsSets =
keyups.
map( function( key ){
return Observable.getJSON('/search?' +
input.value)
});
Functional Review
Map - Transforms data

22. var searchResultsSets = keyups.
filter( function ( key ){
return input.value.length > 1;
}).
map( function( key ){
return Observable.getJSON('/search?' +
input.value)
);
Functional Review
Filter - Narrows Collections

23. var html =
searchResultsSets.
reduce(function( prev,curr ) {
return prev + '<li>' + curr.name + '</li>';
},'' );
Functional Review
Reduce - Turns a collection into a single value
Initial prev value.

24. Functional Review
Zip - Combines two collections
var movies = [ 'Super Troopers', 'Pulp Fiction',
'Fargo' ] ;
var boxArts =[ '/cdn/23212/120x80',
'/cdn/73212/120x80','/cdn/99212/120x80' ] ;
!
var withArt = Observable.
zip(movies, boxarts, function(movie, boxart){
return {title : movie, boxart : boxart};
});
!
//[{title : 'Super Troo…', boxart : '/cdn…'},
// {title : 'Pulp Fict…', boxart : '/cdn…' },
// {title : 'Fargo', boxart : 'cdn…' } ]

25. Functional Review
Observable Data Streams Are Like Crazy Straws
keyPresses Observable
subscribe
throttle
filter
map
distinctUntilChanged
reduce

26. Thinking Functionally

27. Thinking Functionally
Replace loops with map.
searchResults = Observable.
getJSON(‘/people?’ + input.value);
!
searchResults.
forEach( function( reps ){
var names = [];
for( var i = 1; i < resp; i++ ){
var name = data[i].fName + ' ' +
data[i].lName;
names.push( name );
}
});

28. Thinking Functionally
Replace loops with map and reduce.
searchResults = Observable.
getJSON(‘/people?’ + input.value).
map( function( data ){
return data.fName + data.lName;
} );
!
searchResults.forEach( function( resp ){
//resp will now be the names array
})

29. Thinking Functionally
Replace if’s with filters.
var keyPresses = O.fromEvent( el, 'keyup' )
!
keyPresses.forEach( function( e ){
if( e.which === keys.enter ){ //=> no!
//do something
}
});

30. Thinking Functionally
Replace if’s with filters.
var enterPresses = O.fromEvent( el, 'keyup' )
.filter( function( e ){
return e.which && e.which === keys.enter;
});
!
enterPresses.forEach( function( e ){
//do something
});

31. Thinking Functionally
Don’t put too much in a single stream.
var submits = O.fromEvent(input,'keypresses').
throttle().
map( function( e ){
return e.which
} ).
filter( function( key ){
return key === keys.enter || keys.escape;
}).
map().
reduce().
...
Smaller streams are OK.

32. Thinking Functionally
var keys =
Observable.fromEvent(input,'keypresses').
throttle().
map( function( e ){
return e.which
} );
!
var enters = keys.filter( function( key ) ){
return e.which === keys.enter;
}
!
var escapes = keys.filter( function( key ) ){
Don’t put too much in a single stream.
Smaller streams are OK.

33. Flattening Patterns!
managing concurrency!

34. Observables = Events Over Time
Key presses over time…
.5s 1s 1.5s 2s 2.5s 3s
B R E A K IJ <- N G B A D

35. Observables = Events Over Time
1s 2s 3s 4s 5s 6s
BR
BRE
BREAK
BREAKJ
BREAKING
BREAKING BA
BREAKING BAD
Ajax requests over time…

36. The Three Musketeers
Goofy as merge
Donald as concat
Mickey as switchLatest
Starring

37. Flattening Patterns
merge - combines items in a collection as each item arrives
concat - combines collections in the order they arrived
switchLatest - switches to the latest collection that !
arrives

38. Merge
1s 2s
http://jsbin.com/wehusi/13/edit
data
data
data
data

39. Concat
1s 2s
http://jsbin.com/fejod/4/edit
!
!
data
data
data
data

40. SwitchLatest
!
1s 2s
data
data
data
data

41. Building Animated
AutoComplete!
Putting Everything Together

42. Animated Autocomplete
SearchBBrBreBreaBreak

43. Observables = Events Over Time
Simple Widget, High Complexity
• Respond to key presses
• Send off Ajax requests
• Animate out when search results become invalid
• Animate in when new search results come in
• Don’t show old results
• Make sure one animation is finished before starting
another

44. var keyups =
Observable.
fromEvent( searchInput, 'keypress');
Animated Autocomplete

45. var searchResultsSets =
keyups.
filter( function ( e ){
return input.value.length > 1;
}).
map( function( e ){
return Observable.
getJSON('/search?' + input.value);
}).
switchLatest();
Animated Autocomplete

46. var animateOuts =
keyups.
map(function( resultSet ){
return animateOut(resultsDiv);
});
!
var animateIns =
searchResultsSets.
map( function( resultSet ){
return Observable.
of(resultsSet).
concat(animateIn(resultsDiv));
});
Animated Autocomplete

47. var resultSets =
animateOuts.
merge(animateIns).
concatAll();
!
resultSets.
forEach( function( resultSet ){
if (resultSet.length === 0) {
$('.search-results').addClass('hidden');
}
else {
resultsDiv.innerHTML = toHTML(resultSet );
}
} );
Animated Autocomplete

48. var keyups =
Observable.
fromEvent( searchInput, ‘keypress');
!var searchResultsSets =
keyups.
filter( function ( e ){
return input.value.length > 1;
}).
map( function( e ){
return Observable.
getJSON('/search?' + input.value);
}).
switchLatest();
var animateOuts =
keyups.
map(function( resultSet ){
return animateOut(resultsDiv);
});
!var animateIns =
searchResultsSets.
map( function( resultSet ){
return Observable.
of(resultsSet).
concat(animateIn(resultsDiv));
});
!var resultSets =
animateOuts.
merge(animateIns).
concatAll();
!resultSets.
forEach( function( resultSet ){
if (resultSet.length === 0) {
$('.search-results').addClass('hidden');
}
else {
resultsDiv.innerHTML = toHTML(resultSet );
}
} );
Animated Autocomplete

49. In Conclusion!
!
ranklam@netflix.com
@bittersweetryan!

50. In Conclusion
• Observables are a POWERFUL abstraction!
• Requires a bit of mental rewiring!
• The RX API is HUGE, take baby steps!
• Merging strategies are the key coordinating async!
• Compose streams of data from small streams

51. To Find Out More
• http://github.com/jhusain/learnrx!
• https://github.com/Reactive-Extensions/RxJS/tree/master/doc!
• Chat with me

52. Questions?!

53. Thank You.!
!
ranklam@netflix.com
@bittersweetryan!