Souvent décrié, Javascript est un langage aujourd'hui incontournable, et qui a beaucoup mûri depuis ses premières implémentations. Résolument monothread, Javascript est pourtant utilisé côté server (Node.js) pour faire tourner de grosses applications et n'a pas à rougir face à la concurrence. Dans cette présentation, nous nous proposons de démystifier la gestion de l'asynchronisme dans le language. En commençant par rappeler la différence entre asynchrone et multithread, nous étudierons tout d'abord le mécanisme de callback. Source de frustration (callback hell), nous présenterons l'API Promise et les solutions qu'elle y apporte. Nous conclurons par une discussion sur les limites de cette API et ouvrirons la réflexion sur le futur de Javascript, à savoir les instructions async/await.

1. 1
Tél : +41 21 312 94 15
www.octo.com
© OCTO 2015
Avenue du théâtre 7
CH-1005 Lausanne - SUISSE
Grégory Bataille
@gregbfiveten
Romain Felden
@herrFelden
Javascript
A language full of Promises
source : wall.alphacoders.com

2. 2
Multithreading vs Asynchronous
The callback
Promises: the good and the bad
The future

3. 3
Multithreading vs Asynchronous

4. 4

5. 5

6. 6
Programs usually performs many blocking
operations (like IOs)
Time wasted for the application
Modern CPU have several cores
Resources wasted for the application
With several thread in the application
Continue to work even when something is blocked
Takes advantage of multi core CPUs (or multi CPUs)
Multithreading

7. 7
Concurrency on shared resources (like shared memory)
Controls through mutex/semaphores
Multithreading - issues
Complex and hard to debug programs

8. 8
Multithreading – a visual

9. 9
Multithreading – issues

10. 10
Some programming language / framework
are saying “Away with this complexity”
They are
Mono-thread
Don’t have concurrency issues
But they are still fast, sometimes faster!
That’s when you say WTF!!!
Asynchronous

11. 11
Async – a visual

12. 12
The callback

13. 13
Basically just a pointer to a function
Not strictly equivalent to asynchronous
Synchronous callback examples
Some list processing API : list.foreach(callback)
a method that rather than returning a complex object structure, calls back a
function with several parameters
But typically async like for the Ajax jQuery API
What is a callback?

14. 14
A simple example

15. 15
The
pyramid
of doom

16. 16
Limits of callbacks – the callback hell
http://thecodebarbarian.com/2015/03/20/callback-hell-is-a-myth
Another
pyramid
of
doom

17. 17
Callback hell is a myth

18. 18
Another limit – calling something “at the end”
Parse has the notion of beforeSave triggers
The “hook” must call response.success() or
response.error() at the END of a treatment
It stops any other running code
With callbacks, it might get very tricky to figure that one out
Find the right place
Ensure that all other callbacks if any are done with !
What if you launch 2 asynchronous calls one after the other? Which
one finishes first

19. 19

20. 20
Promises
The Good Part

21. 21
API (ES6 / ES2015) – jQuery Deferred since 2011

22. 22
Promises abstract all the callback complexity into a nice fluent
API framework
You don’t embed callbacks into one another, rather you chain
promises
What does it change?

23. 23

24. 24

25. 25
What does it changes – real life example

26. 26
Real real life example

27. 27
The “call at the end issue” from before

28. 28
Promises
The Bad Part

29. 29
http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html
So what’s the catch?
Can you tell what those are doing?

30. 30
#1
This is almost the best form

31. 31
Were you expecting that one?
Return null is actually implied!
#2

32. 32
We can do worse!
We call a function rather than passing a reference to it
#3

33. 33
The clean way to write it
#4

34. 34
“Then” takes
A function (not a call to a function!)
This function should return a promise if we want to
chain other “then” calls
This function should take arguments that are
going to be passed by the promise resolution
API - Then

35. 35
There is a nice fallback to the “next” error
handler in the then API
Error handling

36. 36
The Promise API wraps the errors in
handlers, and it is possible to “loose” one by
mistake
Error handling

37. 37

38. 38

39. 39
Promises are powerful
Promises don’t have a developer friendly API
We’ve seen that with the 4 examples before
Promises are hard to debug
Use of libraries like Bluebird
Conclusion

40. 40
The future

41. 41
Some ugly code
https://jakearchibald.com/2014/es7-async-functions/

42. 42
New API
Lower level in the language
Declare function as async
Wait inside on some other async function completion
Async/await

43. 43
In the code

44. 44
https://jakearchibald.com/2014/es7-async-functions/

45. 45