Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Syncing Async

Syncing Async

I bet you think “callback hell” is about function nesting and levels of indentation. Not so much. I bet you’ve heard that Promises replace callbacks. Nope.

We need some clarity on what async flow control is all about in JavaScript. We’ll explore the perils of “Inversion of Control”, and see just what hell that leads us to. Then we’ll talk about promises as “continuation events” for function calls, and abstractions on top of promises that clean up our code. Finally, we’ll see how generators give us synchronous-looking async, and even how we can create cooperative concurrency with coroutines.

Yield those confused async notions and control your flow. I promise we’ll get your thoughts in order.

Kyle Simpson
PRO

October 16, 2015
Tweet

More Decks by Kyle Simpson

Other Decks in Programming

Transcript

  1. syncing
    async
    kyle simpson
    @getify
    http://getify.me

    View Slide

  2. vs.
    parallel
    async

    View Slide

  3. threads

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. event-loop
    concurrency

    View Slide

  9. 1
    2
    3
    4
    1
    2
    3

    View Slide

  10. 1
    2
    3
    4
    1
    2
    3 done!
    done!

    View Slide

  11. async
    patterns

    View Slide

  12. callbacks
    ==
    continuations

    View Slide

  13. callbacks
    got
    problems
    2 major
    ^

    View Slide

  14. “callback hell”

    View Slide

  15. still “callback hell”

    View Slide

  16. inversion of
    control

    View Slide

  17. View Slide

  18. trust:
    1. not too early
    2. not too late
    3. not too many times
    4. not too few times
    5. no lost context
    6. no swallowed errors
    ...

    View Slide

  19. View Slide

  20. nested callbacks
    are not
    reasonable

    View Slide

  21. View Slide

  22. View Slide

  23. we write

    View Slide

  24. we think

    View Slide

  25. js thinks

    View Slide

  26. sync-looking
    async
    synchronous
    sequential
    blocking

    View Slide

  27. hell is
    callbacks
    -Sartre

    View Slide

  28. promise: future value

    View Slide

  29. promise: “completion” event

    View Slide

  30. View Slide

  31. View Slide

  32. promises:
    1. only resolved once
    2. either success OR error
    3. messages passed/kept
    4. exceptions become errors
    5. immutable once resolved

    View Slide

  33. uninversion of
    control

    View Slide

  34. steps

    View Slide

  35. promise: flow control

    View Slide

  36. View Slide

  37. scenario:
    load files in
    parallel, render in
    order, but ASAP

    View Slide

  38. View Slide

  39. cool story, bro.
    but...

    View Slide

  40. View Slide

  41. scenario:
    timeout of a promise

    View Slide

  42. View Slide

  43. blog.getify.com/promises-part-1/
    github.com/getify/native-promise-only

    View Slide

  44. promise
    abstractions

    View Slide

  45. sequence
    =
    series of
    automatically
    chained promises

    View Slide

  46. github.com/getify/asynquence
    async + sequence
    =
    asynquence

    View Slide

  47. View Slide

  48. remember?
    load files in
    parallel, render in
    order, but ASAP

    View Slide

  49. View Slide

  50. View Slide

  51. promises
    without all
    the fuss

    View Slide

  52. gimme
    moar sync

    View Slide

  53. ES6
    generators
    davidwalsh.name/es6-generators

    View Slide

  54. generator + promises
    yield promises

    View Slide

  55. ES2016
    async ?
    github.com/lukehoban/ecmascript-asyncawait

    View Slide

  56. View Slide

  57. View Slide

  58. github.com/getify/a-tale-of-three-lists

    View Slide

  59. “if you like it then you shoulda put async in it...”

    View Slide

  60. thx!
    kyle simpson
    @getify
    http://getify.me

    View Slide