Async and Await - BandungJS - Mar 2017

Slide 1

Slide 1 text

Modern Concurrency: async and await 27th March 2017 @sstur_

Slide 2

Slide 2 text

I’m Simon JavaScript and React Enthusiast Founder at KodeFox Twitter: @sstur_

Slide 3

Slide 3 text

Today we’ll talk about Concurrency in Modern JavaScript.

Slide 4

Slide 4 text

Concurrency Doing multiple tasks in a period of time. (Generally order-independent or partially- ordered units of work)

Slide 5

Slide 5 text

Concurrency

Slide 6

Slide 6 text

Concurrency is important when waiting on input/output such as network requests, reading/ writing from disk, or user input.

Slide 7

Slide 7 text

Typically, two ways programs wait for IO: • blocking (“synchronous”) • Easy to write • Uses multi-threading • Memory and context-switching overhead • non-blocking/event-loop (“asynchronous”) • Single-threaded • High-concurrency with low-memory consumption • Great for UI and IO-bound services rather than CPU- bound

Slide 8

Slide 8 text

All modern JavaScript engines use the non-blocking/event-loop approach.

Slide 9

Slide 9 text

So what happens if you block in JavaScript? There are a few things that will block: • alert/prompt/confirm • synchronous XMLHttpRequest (rare) • fs.readFileSync and friends in Node

Slide 10

Slide 10 text

Blocking in the browser will halt everything, including all user interaction, even scrolling.

Slide 11

Slide 11 text

Callbacks Just pass a function that will be called when the task is complete.

Slide 12

Slide 12 text

Callbacks

Slide 13

Slide 13 text

Callbacks Pros: • Great low-level abstraction • Performant with low overhead • Can do almost any async task with callbacks

Slide 14

Slide 14 text

Callbacks Cons: • Doing things in sequence is hard. Doing things in parallel is harder! • Give up constructs such as for/while and try/catch • Error handling is difficult • Code readability suffers and systems become hard to maintain

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Callbacks Add Complexity It’s messy to chain tasks and difficult to do parallelism.

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Plus Error Handling We spend a lot of effort checking if an async task failed.   We completely lose try/catch.

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Readability Issues When code readability is this bad, we’re more likely to let errors sneak in.

Slide 22

Slide 22 text

OK, Let’s talk about Promises.

Slide 23

Slide 23 text

The Promise Land Thin but powerful abstraction on top of callbacks. Solves several problems: • Easy chaining; sequential/parallel tasks • Error handling • Composable; can pass around a representation

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

It’s better, I Promise In it’s basic form, it looks no better than callback style. .. but you actually get a lot more.

Slide 26

Slide 26 text

Chaining Promises

Slide 27

Slide 27 text

Flow Control We can easily combine sequential and parallel tasks to create advanced flows.

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Error Handling Attach a single catch()    Exceptions will bubble up similar to how it works in synchronous code.

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

But we’re still putting callbacks inside .then()    Can we do better?

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

But JavaScript is fundamentally single-threaded.    So we still can’t block.

Slide 34

Slide 34 text

However…    There is a special thing called a “Generator Function”  that can be paused.

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Promises + Generators = Awesome!

Slide 37

Slide 37 text

async/await is basically a thin layer of syntax over Promises and Generators

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Total Win We get back most of our traditional constructs: • for/while • try/catch • readable, sequential program flow • powerful inter-op with promises

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

It’s just promises • An async function always returns a promise. • When we await a promise, our function pauses until the promise is ready (resolved) • We can still use all our favorite promise helpers such as Promise.all()

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Pro Tips • Don't forget to await! • Be careful about doing too much sequentially when you can actually do it in parallel • Using await in map/filter won't do what you might expect! • Even though it looks synchronous, remember your code has been paused/resumed

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

You can use this Today! • Chrome • Firefox • Node • Use Babel for the rest.

Slide 47

Slide 47 text

Thanks for Listening! simon@kodefox.com github.com/sstur @sstur_