1) Yesterday asynchronous code used callbacks, which led to callback hell. 2) Today Promises provide a better solution but still have issues. 3) Tomorrow Generators may help make asynchronous code look synchronous but have limitations and require wrappers. 4) The day after tomorrow, ES7 async/await promises to solve asynchronous code issues in an elegant way similar to synchronous code but it is still early in development.

1. Handling asynchronous: yesterday, today, tomorrow, and after
ParisJS #44

2. CALLBACKS1

3. 3
We get the data after 1000ms

4. 4
What if I need to chain callbacks?

5. 5
Wtf…

6. 6

7. PROMISES2

8. 8
ES6 Promises, A+ implementation

9. 9
ES6 Promises, how to use them

10. 10
Back to our example: we get the data after 1000ms

11. 11
Getting better! But still not perfect

12. 12
Should we start using ES6 Promises?
Yes with a polyfill (eg: Babel)

13. GENERATORS3

14. 14
The function* declaration defines a generator function
Which returns a Generator object

15. 15
The body is not executed. When asked to,
the code is executed until the first ‘yield’ expression

16. 16
How to use a generator function by calling
generator.next()

17. 17
Keep calling .next() till `done` is true

18. 18
Back to our example

19. 19
Wow! Looks great!
Does it work? No

20. 20
Wrapped inside a custom `async` function, it works
Asynchronous code like if it was synchronous

21. 21
The async function is trivial to implement
Or you can use the Q library (Q.spawn)
Or the co library

22. 22
Looking great! Want better?

23. 23
Should we use it yet?
Why not.
- Custom async implementation
- ES6 to ES5 with BabelJS
- BabelJS polyfill for Promises

24. ES7
ASYNC / AWAIT4

25. 25
ES7 native async / await
`getData` returns a Promise

26. 26
Now that’s awesome
Asynchronous code like if it was synchronous

27. 27
Should we use it yet?
No.
Or just for fun,
it’s too early and things are still moving.
(BabelJS in experimental mode)

28. SUMMARY5

29. 29
Yesterday: callbacks

30. 30
Today: Promises

31. 31
Tomorrow: Generators?

32. 32
The day after tomorrow: ES7 async / await

33. THANK YOU
@gmajoulet