Going

at

About Me

Senior UI Engineer At Netflix!

ranklam@netflix.com!

@bittersweetryan

The Rest!44%

FacebookBitTorrent

iTunes

YouTube!13%

Netflix!34%

Peak Downstream Traffic 1H 2014

https://www.sandvine.com/downloads/general/global-internet-phenomena/2014/1h-2014-global-internet-phenomena-report.pdf

"MS Freedom of the Seas in its maiden voyage" by Andres Manuel Rodriguez -

We have this

Stable

"MS Freedom of the Seas in its maiden voyage" by Andres Manuel Rodriguez -

We have this

Full Featured

"MS Freedom of the Seas in its maiden voyage" by Andres Manuel Rodriguez -

We have this

Needs a diverse crew

"MS Freedom of the Seas in its maiden voyage" by Andres Manuel Rodriguez -

We have this

Not very agile

"Lewis Hamilton 2014 China Race" by emperornie

We want this

…but not for the reason you think

Modular

…but not for the reason you think

Lightweight

…but not for the reason you think

Very Agile

Shakti

Why Node?

UI Engineers Write the JavaScript They Love

Node is the New UI Layer

Client

Node Request Time HTML

Post Request HTML

Service Calls

Client JS

Services

Build Process

The event loop fits our needs well

The Node Event Loop

http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

function contextMiddleware( req, res, next ){ var movieId = req.params.movieId || 0; movie.fetch( movieId, function( movieData ){ res.set( { movieData : movieData } ) next(); } ); }

The Node Event Loop

http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

function contextMiddleware( req, res, next ){ var movieId = req.params.movieId || 0; movie.fetch( movieId, function( movieData ){ res.set( { movieData : movieData } ) next(); } ); }

The Node Event Loop

http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

function contextMiddleware( req, res, next ){ var movieId = req.params.movieId || 0; movie.fetch( movieId, function( movieData ){ res.set( { movieData : movieData } ) next(); } ); }

The Node Event Loop

http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

function contextMiddleware( req, res, next ){ var movieId = req.params.movieId || 0; movie.fetch( movieId, function( movieData ){ res.set( { movieData : movieData } ) next(); } ); }

Allowed us to remove many runtime dependencies

Shakti was built with a few core principals

Embrace the JavaScript Ecosystem.

Embrace the JavaScript Ecosystem.

express web application framework for node

Embrace the JavaScript Ecosystem.

Embrace the JavaScript Ecosystem.

{dust}

Embrace the JavaScript Ecosystem.

Use Existing Infrastructure

Jasori Lewis

Simple API, Reduce Depencencies

http://www.launchphotography.com/Discovery_Flight_Deck.html

http://www.launchphotography.com/Discovery_Flight_Deck.html

Simplify By Removing Dependencies

We do have a few unique challenges

http://sjmagazine.net/wp-content/uploads/2014/07/NUP_163855_0336.jpg

Assets

http://www.wired.com/wp-content/uploads/blogs/wiredenterprise/wp-content/uploads/2012/10/ff_googleinfrastructure_large.jpg

Templating / i18n

http://2.bp.blogspot.com/-4KCTn2jSdU0/TlZFNNwofPI/AAAAAAAAFc0/K0ogqSByYlY/s1600/IMG_5947.JPG

Middle Tier Services

Build Process

http://3.bp.blogspot.com/-o-LcrSq_w1o/T1ywq9G57gI/AAAAAAAACQU/sRYxh6A6fBA/s1600/P1120378.jpg

Modules

http://www.launchphotography.com/Discovery_Flight_Deck.html

commonjs

Modules

http://www.launchphotography.com/Discovery_Flight_Deck.html

es6

Modules

http://www.launchphotography.com/Discovery_Flight_Deck.html

NPM

We Learned A Few Things On Our Journey

http://i.huffpost.com/gen/951056/thumbs/o-CANADA-LIGHT-BULB-BAN-facebook.jpg

Nothing Is Ever Done

Engineers are opinionated creative.

Automate as many things is you can

Allow for diverse inputs, always have predictable outputs

function getLocalizedStrings( arrayOrBundle, key, callback ){ if( arrayOrBundle.isArray() ){ return new Promise( function( resolve, reject ){ //return localized object } ); } else if( typeof arrayOrBundle === ‘string’ ){ return new Promise( function( resolve, reject ){ //return localized object } ); } }

Keep async API’s async

function getLocalizedString( package, key, callback ){ if( this.cache[ package ] && this.cache[ package ][ key ] ){ callback( this.cache[ package ][ key ] ); //not async } else{ this.getString( package, key, callback ); //async call } }

function getLocalizedString( package, key, callback ){ if( this.cache[ package ] && this.cache[ package ][ key ] ){ setTimeout( function( ){ callback( this.cache[ package ][ key ] ); }, 0 ); } else{ this.getString( package, key, callback ); } }

Questions

http://eugenebrandt.files.wordpress.com/2013/09/hands-voting.jpg

Thank You!

Please stop me in the halls and talk to me about all the cool things Netflix is doing with JavaScript! I love to talk about this stuff!

ranklam@netflix.com