Taming the Asynchronous Beast in JavaScript

Tech talk I gave at Citrix on the evolution of asynchronous programming in JavaScript and some of the challenges with using callbacks/promises. I'll also give an intro to newer solutions, namely generators (ES6) and async.. await (ES7) and how it helps make our jobs a bit easier

Transcript

1. Taming the Asynchronous Beast in JavaScript Vasanth Krishnamoorthy
2. We’ll look into.. •  Event Loop •  Callbacks •  Promises (ES6) •  Generators (ES6) •  Async funcHons (ES7)
3. Event Loop basics •  JavaScript runHme is single threaded One thread === Single call stack === One thing at a Hme
4. 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.
5. Callback hell Callbacks === conHnuaHons Kinda like IncepHon….
6. Inspired by callback hell
7. Callback Hell - FlaXening
8. Callbacks -the real problem Inversion of control
9. Promises to the rescue
10. Promises A proxy for a value that will eventually become available
11. 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.
12. Promises Un-inversion of control
13. 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.
14. Generators (ES6) WriHng Async code in a Sync fashion… Almost there…
15. 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.
16. Generators - Syntax
17. Generators Async
18. Generator - Async •  Async code (with callbacks)
19. Generator - Async •  Async code (with generators)
20. Async FuncHons (ES7) Synchronizing Async code
21. 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)
22. Async FuncHons - Chaining
23. Async FuncHons – Handling Errors Async funcHons sHll uHlize built- in promises/generators, but they do so under the hood.
24. 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