Async Therefore Await

This talk is an introduction to async/await in JavaScript, why it's better than Promises, how it works and how to use it today.

Transcript

1. Async Therefore Await ..Or how to write async JavaScript without losing your sanity
2. Who Am I? Mohamed Oun Software engineer by day.. And night. @Mohamed3on Mohamed3on@gmail.com Mohamed3on.online
3. Why even write asynchronous code?
4. Why even write asynchronous code? • JavaScript is single threaded, with lots of processes sharing the same thread • DOM rendering, network requests, your client-side code • They can’t all (and don’t have to) wait for each other
5. Example in Python
6. Same example in JavaScript
7. That’s awesome, right?!
8. But it’s not so rosy.. • Async code comes with added complexity • It’s usually harder to read and reason about • Easy to get into the infamous callback hell with more complex code
9. How JavaScript handles asynchronous code 1. First, there were callbacks
11. How JavaScript handles asynchronous code 1. First, there were callbacks 2. Then came Promises • .then() and .catch() • Easier to read and understand
13. Better, but still room for improvement
14. Mandatory cats example
15. Code example by @mpjme
16. In comes our hero Async/Await
17. Code example by @mpjme
18. Async/Await is ‘syntactic sugar’ over Promises • Use the keyword async before your function declaration • Await acts like .then() and pauses the execution until the promise is fulfilled • Looks like synchronous code, but waits in the background, instead of hanging the main thread • We get the performance benefits of asynchronous code and the readability of synchronous code • Best of both worlds!
19. Because async/await is essentially an abstraction over Promises: • An async function is a the same as a function which returns a promise
20. Because async/await is essentially an abstraction over Promises: • An async function that throws an exception is equivalent to a function that returns a rejected Promise
21. Because async/await is essentially an abstraction over Promises: • You can use await Promise.all([]) to run multiple promises in parallel
22. Top-level await workaround • Top-level (global scope) await doesn’t work • You can only await in an async function • But do I call the function I just wrote? • We can use IIFEs to get around that
23. Ok, but how do you handle errors? There has to be a .catch()!
24. You can use try/catch
25. You can attach .catch(), just like Promises
26. Support for async/await • Supported in Node 8+ • Supported in all major modern browsers
27. What if I need to support IE? (Poor you) • You can use Babel, specifically babel-preset-env • automatically compiles your code based on the browsers you’re targeting • You can configure it to only include the polyfills and transforms needed for the browsers you support. • Transpiling only what's needed to make your bundles smaller
28. That’s it, you made it to the end!
29. Resources • Await and Async Explained with Diagrams and Examples • async / await in JavaScript - What, Why and How - Fun Fun Function • dotJS 2017 - Wes Bos - Async + Await