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.

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. 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