Add Some Fun to Your Functional Programming With RXJS

Add some FUN to your
Functional programming
with RXJS

Java…
Groovy…
and JavaScript
Senior UI Engineer at Netﬂix
We do a lot of RX stuff with…
About Me

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

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

Functional Review!
(With an RX twist)

Functional Review
Map
Reduce
Filter
Zip

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

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

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

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…' } ]

Functional Review
Observable Data Streams Are Like Crazy Straws
keyPresses Observable
forEach
throttle
ﬁlter
map
distinctUntilChanged
reduce

Thinking Functionally
Replace loops with map, reduce, and ﬁlter.
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 );
}
});

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
})

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

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

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.

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

Flattening Patterns!
managing concurrency!

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

1s 2s 3s 4s 5s 6s
BR
BRE
BREAK
BREAKJ
BREAKING
BREAKING BA
BREAKING BAD
Ajax requests over time…

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

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

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

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

SwitchLatest
!
1s 2s
data
data
data
data

Building Animated
AutoComplete!
Putting Everything Together

Animated Autocomplete
SearchBBrBreBreaBreak

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 ﬁnished before starting  
another

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

var searchResultsSets =
keyups.
filter( function ( e ){
}).
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));
});

Thank You.!
!
ranklam@netﬂix.com 
@bittersweetryan!

Add Some Fun to Your Functional Programming With RXJS

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Add Some Fun to Your Functional Programming With RXJS (20)

Recently uploaded (20)

Add Some Fun to Your Functional Programming With RXJS