Slide 1

Slide 1 text

Async Therefore Await ..Or how to write async JavaScript without losing your sanity

Slide 2

Slide 2 text

Who Am I? Mohamed Oun Software engineer by day.. And night. @Mohamed3on [email protected] Mohamed3on.online

Slide 3

Slide 3 text

Why even write asynchronous code?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Example in Python

Slide 6

Slide 6 text

Same example in JavaScript

Slide 7

Slide 7 text

That’s awesome, right?!

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

How JavaScript handles asynchronous code 1. First, there were callbacks

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

How JavaScript handles asynchronous code 1. First, there were callbacks 2. Then came Promises • .then() and .catch() • Easier to read and understand

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Better, but still room for improvement

Slide 14

Slide 14 text

Mandatory cats example

Slide 15

Slide 15 text

Code example by @mpjme

Slide 16

Slide 16 text

In comes our hero Async/Await

Slide 17

Slide 17 text

Code example by @mpjme

Slide 18

Slide 18 text

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!

Slide 19

Slide 19 text

Because async/await is essentially an abstraction over Promises: • An async function is a the same as a function which returns a promise

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Because async/await is essentially an abstraction over Promises: • You can use await Promise.all([]) to run multiple promises in parallel

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Ok, but how do you handle errors? There has to be a .catch()!

Slide 24

Slide 24 text

You can use try/catch

Slide 25

Slide 25 text

You can attach .catch(), just like Promises

Slide 26

Slide 26 text

Support for async/await • Supported in Node 8+ • Supported in all major modern browsers

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

That’s it, you made it to the end!

Slide 29

Slide 29 text

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