Asynchronous Programming at Netflix

Async JavaScript at Netflix
Jafar Husain
@jhusain

InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/async-programming-netflix

Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Presented at QCon San Francisco
www.qconsf.com

Who is Jafar?
Cross-Team Technical Lead for Netflix UIs
Architect of Netflix UI Data Platform
Member of JavaScript standards committee
(TC39)
16 years in the industry, formerly worked at
Microsoft and GE

This is the story of how Netflix solved
BIGasync problems
by thinking differently about
Events.

Async Programming was very
HARD

The Netflix App was plagued by
Race Conditions
Memory Leaks
Complex State Machines
Uncaught Async Errors

Playing a Movie Asynchronously
function play(movieId, cancelButton, callback) {
var movieTicket,
playError,
tryFinish = function() {
if (playError) {
callback(null, playError);
}
else if (movieTicket && player.initialized) {
callback(null, ticket);
}
};
cancelButton.addEventListener(“click”, function() { playError = “cancelled”; }
if (!player.initialized) {
player.init(function(error) {
playError = error;
tryFinish();
}
}
authorizeMovie(function(error, ticket) {
playError = error;
movieTicket = ticket;
tryFinish();
});
});
var movieTicket,
playError,
if (playError) {
}
}
};
playError = error;
tryFinish();
});
}
playError = error;
tryFinish();
});
});
var movieTicket,
playError,
if (playError) {
}
}
};
playError = error;
tryFinish();
});
}
playError = error;
tryFinish();
});
});
var movieTicket,
playError,
if (playError) {
}
}
};
playError = error;
tryFinish();
}
}
playError = error;
tryFinish();
});
});

the majority of Netflix’s async code
is written with just a few flexible
functions.
Today

But first a brief
JavaScript 6 tutorial…

Functions
x + 1function(x) { return x + 1; }x =>
function(x, y) { return x + y; }(x, y) x + y=>
JS
6
5

ForEach
> [1, 2, 3].forEach(x => console.log(x))
> 1
> 2
> 3
>

Map
> [1, 2, 3].map(x => x + 1)
> [2, 3, 4]
>

Filter
> [1, 2, 3].filter(x => x > 1)
> [2, 3]
>

concatAll
> [ [1], [2, 3], [], [4] ].concatAll()
> [1, 2, 3, 4]
>

Map/Filter/ConcatAll
> [1, 2, 3].map(x => x + 1)
> [2, 3, 4]
> [1, 2, 3].filter(x => x > 1)
> [2, 3]
> [ [1], [2, 3], [], [4] ].concatAll()
> [1, 2, 3, 4]
>

Asynchronous Programming at Netflix

Let’s use map, filter, and concatAll to
get a list of your favorite Netflix titles.

Top-rated Movies Collection
var getTopRatedFilms = user =>
user.videoLists.
map(videoList =>
videoList.videos.
filter(video => video.rating === 5.0)).
concatAll();
getTopRatedFilms(user).
forEach(film => console.log(film));

What if I told you…
…that you could create a drag event…
…with nearly the same code?

Mouse Drags Collection
var getElementDrags = elmt =>
elmt.mouseDowns.
map(mouseDown =>
document.mouseMoves.
filter takeUntil(document.mouseUps)).
concatAll();
getElementDrags(image).
forEach(pos => image.position = pos);

“What’s the difference between an Array…
[{x: 23, y: 44}, {x:27, y:55}, {x:27, y:55}]

… and an Event?
{x: 23, y: 44}...{x:27, y:55}.... {x:27, y:55}......

Events and Arrays are both
collections.

So why don’t we program
them the same way?

Iterator
> var iterator = [1,2,3].iterator();
> { value: 1, done: false }
>
> console.log(iterator.next());
> console.log(iterator.next());
>> console.log(iterator.next());
>> console.log(iterator.next());
> { done: true }
>

Map, Filter, and ConcatAll can be
implemented using an Iterator.

Observer Pattern
> document.addEventListener(
“mousemove”,
function next(e) {
console.log(e);
});
> { clientX: 425, clientY: 543 }

Iterator Observerprogressively send information to consumer

The Iterator and Observer Pattern
are Symmetrical.

The authors of
“Design Patterns”
missedthis symmetry.

As a result, they gave
Iterator and Observer
different semantics.

So Many Push APIs
DOM Events
Websockets
Server-sent Events
Node Streams
Service Workers
jQuery Events
XMLHttpRequest
setInterval

Observable === Collection + Time
Introducing Observable

Observables can model…
Events
Animations
Async Server Requests

Reactive Extensions
Events as Streams
Open Source (Apache2)
Ported to many languages
C
.NET
JavaScript
Java (Netflix)
Objective-C

http://reactivex.io

Events to Observables
var mouseMoves =
Observable.
fromEvent(element, “mousemove”);

Adapt Push APIs to Observable
DOM Events
Websockets
Server-sent Events
Node Streams
Service Workers
jQuery Events
XMLHttpRequest
setInterval
Observable

Event Subscription
// “subscribe”
var handler = (e) => console.log(e);
document.addEventListener(“mousemoves”, handler);
// “unsubscribe”
document.removeEventListener(“mousemoves”, handler);

Observable.forEach
// “subscribe”
var subscription =
mouseMoves.forEach(console.log);
subscription.dispose();

Expanded Observable.forEach
// “subscribe”
var subscription =
mouseMoves.forEach(
// next data
event => console.log(event),
// error
error => console.error(error),
// completed
() => console.log(“done”));
optional

Expanded Observable.forEach
// “subscribe”
var subscription =
mouseMoves.forEach({
onNext: event => console.log(event),
// error
onError: error => console.error(error),
// completed
onCompleted: () => console.log(“done”)
});
Observer

Converting Events to Observables
Observable.fromEvent = function(dom, eventName) {
// returning Observable object
return {
forEach: function(observer) {
var handler = (e) => observer.onNext(e);
dom.addEventListener(eventName, handler);
// returning Subscription object
return {
dispose: function() {
dom.removeEventListener(eventName, handler);
}
};
}
};
}

Observable Literal
JS6
time
{1……2…………3}

ForEach
> {1……2…………3}.forEach(console.log)
> 1
>> 2
>> 3
>
time
> {1……2…………3}

Map
> {1……2…………3}.map(x => x + 1)
> 2
>> 3
>> 4
>
time

> 2
> 3
>
Filter
> {1……2…………3}.filter(x => x + 1)
>> 2
>
time

concatAll
[
[1]
[2, 3],
[],
[4]
].concatAll()
[1, 2, 3, 4]

concatAll
{
…{1}
………{2………………3},
……………{}
………………{4}
}.concatAll()
{…1…2………………3…4}
time

TakeUntil
{…1…2…………3}.takeUntil(
{……………4})
{…1…2…}
time
Source collection
Stop collection

Mouse Drags Collection
var getElementDrags = elmt =>
elmt.mouseDowns.
map(mouseDown =>
document.mouseMoves.
takeUntil(document.mouseUps)).
concatAll();
getElementDrags(image).
forEach(pos => image.position = pos);

mergeAll
{
…{1}
………{2………………3},
……………{}
………………{4}
}.mergeAll()
{…1…2……4………3}
time

switchLatest
{
…{1}
………{2………………3},
……………{}
………………{4}
}.switchLatest()
{…1…2……4}
time
subscription.dispose()

Don’t unsubscribe from Events.
Complete them when another
event fires.

Netflix Search
var searchResultSets =
keyPresses.
throttle(250).
map(key =>
getJSON(“/searchResults?q=” + input.value).
retry(3).
takeUntil(keyPresses)).
concatAll();
searchResultSets.forEach(
resultSet => updateSearchResults(resultSet),
error => showMessage(“the server appears to be down.”));

Netflix Search
keyPresses.
throttle(250).
map(key =>
retry(3).
takeUntil(keyPresses)).
concatAll switchLatest();

Netflix Search
keyPresses.
throttle(250).
map(key =>
retry(3)).
switchLatest();

Player Callback Hell
var movieTicket,
playError,
if (playError) {
}
}
};
cancelButton.addEventListener(“click”, function() { playError = “cancel”; });
playError = error;
tryFinish();
}
}
authorizeMovie(movieId, function(error, ticket) {
playError = error;
tryFinish();
});
});

Player with Observable
var authorizations =
player.
init().
map(() =>
playAttempts.
map(movieId =>
player.authorize(movieId).
catch(e => Observable.empty).
takeUntil(cancels)).
concatAll())).
concatAll();
authorizations.forEach(
license => player.play(license),
error => showDialog(“Sorry, can’t play right now.”));

Netflix: Observable Everywhere
App Startup
Player
Data Access
Animations
View/Model binding

Interactive Learning Exercises
http://jhusain.github.io/learnrx/

Observable in JavaScript 7?
async function* getStocks() {
let reader = new AsyncFileReader(“stocks.txt”);
try {
while(!reader.eof) {
let line = await reader.readLine();
await yield JSON.parse(line);
}
}
finally {
reader.close();
}
}
async function writeStockInfos() {
let writer = new AsyncFileWriter(“stocksAndPrices.txt”);
try {
for(let name on getStocks()) {
let price = await getStockPrice(name);
await writer.writeLine(JSON.stringify({name, price}));
}
}
finally {
writer.close();
}
}

Resources
 reactivetrader.azurewebsites.net
 https://github.com/Reactive-Extensions/RxJS
 RxJava
 http://jhusain.github.io/learnrx/
 @jhusain

Watch the video with slide synchronization
on InfoQ.com!
http://www.infoq.com/presentations/async-
programming-netflix

Asynchronous Programming at Netflix

Recommended

More Related Content

What's hot (20)

Similar to Asynchronous Programming at Netflix (20)

More from C4Media (20)

Recently uploaded (20)

Asynchronous Programming at Netflix