Taming the Asynchronous Beast in JavaScript Vasanth Krishnamoorthy 

We’ll look into.. •  Event Loop •  Callbacks •  Promises (ES6) •  Generators (ES6) •  Async funcHons (ES7) 

Event Loop basics •  JavaScript runHme is single threaded One thread === Single call stack === One thing at a Hme 

Callbacks •  In JavaScript - FuncHons are 1st class objects –  FuncHons can be stored in variables, passed as arguments to funcHons, created within funcHons and returned from funcHons Because funcHons are first-class objects, we can pass a funcHon as an argument in another funcHon and later execute that passed-in funcHon. 

Callback hell Callbacks === conHnuaHons Kinda like IncepHon…. 

Inspired by callback hell 

Callback Hell - FlaXening 

Callbacks -the real problem Inversion of control 

Promises to the rescue 

Promises A proxy for a value that will eventually become available 

Promises - Syntax Promises can be chained, that is to say - you can save a reference to any point in the promise chain and then tack more promises on top of it. This is one of the fundamental points to understanding promises. 

Promises Un-inversion of control 

Promises – SeXling it •  Promises can exist in three states: pending, fulfilled, and rejected. •  Pending is the default state. From there, a promise can be “se4led” into either fulfillment or rejec9on. •  Promise.all(p1, p2, p3) –  SeXle with a single rejecHon reason as soon as one of its dependencies is rejected. –  SeXle with all fulfillment results as soon as all of its dependencies are fulfilled. •  Promise.race(p1, p2, p3) –  Promise.race() is similar to Promise.all, except the first promise to seXle will “win” the race, and its value will be passed along to branches of the race. –  RejecHons will also finish the race, and the race promise will be rejected. 

Generators (ES6) WriHng Async code in a Sync fashion… Almost there… 

Generators (ES6) •  Generators are func-ons which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances. •  Helps us to handle asynchronous funcHon calls, just like it happened synchronously. •  Two things disHnguish genFunc from a normal funcHon declaraHon: –  It starts with the “keyword” funcHon*. –  It is paused in the middle via yield. 

Generators - Syntax 

Generators Async 

Generator - Async •  Async code (with callbacks) 

Generator - Async •  Async code (with generators) 

Async FuncHons (ES7) Synchronizing Async code 

Async FuncHons (ES7) •  Async funcHons take the idea of using generators for asynchronous programming and give them their own simple and semanHc syntax. - Removes boilerplate code mulHple returns as in promises - async fns implicitly return a promise that resolves to val - ES7 Stage 3 Drad (Babelify and all good to go) 

Async FuncHons - Chaining 

Async FuncHons – Handling Errors Async funcHons sHll uHlize built- in promises/generators, but they do so under the hood. 

QuesHons? Thanks to… Kyle Simpson @geHfy - Author, You Don’t Know JS Jafar Husain @jhusain - Tech Lead, NeFlix Axel Rauschmayer @rauschma - 2ality blog For more code samples, check my repo: hXps://github.com/vasanthk/async-javascript