Thenez vos promesses

Dans cette présentation, on fait le tour de l'evolution de la programmation asyncrone en JS

Transcript

1. THENEZ VOS PROMISES DEYINE JIDDOU Presented by:
2. THENEZ VOS PROMISES 2
3. THENEZ VOS PROMISES 3 La plupart du temps on écrit du code synchrone AKA BLOCKING
4. THENEZ VOS PROMISES 4
5. THENEZ VOS PROMISES 5 Traitements lourds, difficile à optimiser MULTI-THREADING THREAD POOL BACKGROUND WORKER INVOKE KILL/PAUSE ERROR HANDLING RETRY WAIT
6. THENEZ VOS PROMISES 6 En JAVASCRIPT, on fait les choses différemment
7. THENEZ VOS PROMISES 7 Un seul Thread en Javascript
8. THENEZ VOS PROMISES 8 console.log(1); setTimeout(function() { console.log('Finished'); }, 10); console.log(2); console.log(3); console.log(4);
9. THENEZ VOS PROMISES 9 The Event loop CALL STACK console.log(1)
10. THENEZ VOS PROMISES 10 The Event loop CALL STACK setTimeout
11. THENEZ VOS PROMISES 11 The Event loop CALL STACK setTimeout BROWSER DOM Events XHR(Ajax) Timers …
12. THENEZ VOS PROMISES 12 The Event loop CALL STACK setTimeout BROWSER DOM Events XHR(Ajax) Timers … console.log(2) …
13. THENEZ VOS PROMISES 13 The Event loop CALL STACK setTimeout BROWSER DOM Events XHR(Ajax) Timers … console.log(2) … EVENT QUEUE Function1
14. THENEZ VOS PROMISES 14 The Event loop CALL STACK setTimeout BROWSER DOM Events XHR(Ajax) Timers … console.log(2) … EVENT QUEUE Function1
15. THENEZ VOS PROMISES 15
16. THENEZ VOS PROMISES 16 function getMeetup() { var meetup; $.get('/meetup', function(data) { meetup = data; }); return meetup; } var JsMeetup = getMeetup(); console.log(JsMeetup); // null
17. THENEZ VOS PROMISES 17 Traiter le résultat au moment de la récupération
18. THENEZ VOS PROMISES 18 function getMeetup(callback) { $.get('/meetup', function(data) { callback(data); }); } var JsMeetup = getMeetup(function(meetup) { console.log(JsMeetup); // Object });
19. THENEZ VOS PROMISES 19 function getMeetup(callback) { $.get('/meetup', function(data) { $.get('/members', function(response) { callback(data); }); }); } var JsMeetup = getMeetup(function(meetup) { console.log(JsMeetup); // Object });
20. THENEZ VOS PROMISES 20 CALLBACK HELL
21. THENEZ VOS PROMISES 21 SPAGHETTI var JsMeetup = null; var members = null; var finished = 0; function getMeetup() { $.get('/meetup', function(data) { JsMeetup = data; finished++; }); } function getMembers() { $.get('/members', function(data) { members = data; finished++; }); } getMeetup(); getMembers(); while (true) { if(finished == 2) { console.log(JsMeetup); // Object console.log(members); // Object break; }
22. THENEZ VOS PROMISES 22 Vous pouvez écrire une petite librairie pour simplifier
23. THENEZ VOS PROMISES 23 En réalité beaucoup l’ont fait
24. THENEZ VOS PROMISES 24 PROMISES
25. THENEZ VOS PROMISES 25 Promise est tout simplement un OBJET Représente le résultat de l’execution d’une fonction 3 états possibles • pending • fulfilled • rejected Supporté nativement Then-able
26. THENEZ VOS PROMISES 26 function getMeetup() { var task = $.Deferred(); $.get('/meetup', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } var JsMeetup = getMeetup() .then(function(data) { console.log(JsMeetup); });
27. THENEZ VOS PROMISES 27 function getMembers(meetup) { var task = $.Deferred(); $.get(‘/meetup/' + meetup.id + '/members', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } var JsMeetup = getMeetup() .then(function(data) { return getMembers(data) }) .then(function(result) { console.log(result); }); Chaining
28. THENEZ VOS PROMISES 28 function getMembers(meetup) { var task = $.Deferred(); $.get(‘/meetup/' + meetup.id + '/members', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } var JsMeetup = getMeetup() .then((data) => { return getMembers(data) }) .then((result) => { console.log(result); }); Chaining
29. THENEZ VOS PROMISES 29 function getMembers(meetup) { var task = $.Deferred(); $.get(‘/meetup/' + meetup.id + '/members', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } var JsMeetup = getMeetup() .then(data => getMembers(data)) .then(result => console.log(result)); Chaining
30. THENEZ VOS PROMISES 30 function getMembers(meetup) { var task = $.Deferred(); $.get(‘/meetup/' + meetup.id + '/members', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } var JsMeetup = getMeetup() .then(getMembers) .then(console.log); Chaining
31. THENEZ VOS PROMISES 31 function getMembers(dateMeetup, meetup) { var task = $.Deferred(); $.get(‘/meetup/' + meetup.id + '/members', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } var JsMeetup = getMeetup() .then(data => getMembers.bind(new Date(), data)) .then(console.log); Chaining
32. THENEZ VOS PROMISES 32 var JsMeetup = getMeetup() .then(data => getMembers(data)) .then(result => console.log(result)) .catch(err => { console.log('And error occured during data fetching'); }); Error handling
33. THENEZ VOS PROMISES 33 var JsMeetup = getMeetup() .then(data => { if(!data || data.length == 0){ throw new Error('No meetup found'); } return getMembers(data); }) .then(result => console.log(result)) .catch(err => { console.log('And error occured during data fetching' + err); }); Error handling
34. THENEZ VOS PROMISES 34 var JsMeetup = getMeetup() .then(data => { if(!data || data.length == 0){ throw new Error('No meetup found'); } return getMembers(data); }) .then(result => console.log(result)) .catch(err => { console.log('And error occured during data fetching' + err); }); Try / Catch / Finally
35. THENEZ VOS PROMISES 35 PROMISES
36. THENEZ VOS PROMISES 36 PROMISES ES7 - couche au dessus des Promises
37. THENEZ VOS PROMISES 37 var config; return SmsConfig.find() .exec() .then(selectMatchedConfig.bind(null, sms)) // Ordre des params .then(c => { config = c; // Réutilisation d’un résultat return extractValues(sms, config); }) .then(vals => { prepareDetectorParams(vals); return updateTransaction(sms, config, vals); }); PROMISE HELL
38. THENEZ VOS PROMISES 38 async function getMeetup() { var task = $.Deferred(); $.get('/meetup', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } async function getMembers(meetup) { var task = $.Deferred(); $.get('/meetup/' + meetup.id + '/members', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); ASYNC / AWAIT
39. THENEZ VOS PROMISES 39 (async () => { try { startSpinner(); var meetup = await getMeetup(); var members = await getMembers(meetup); console.log(meetup); stopSpinner(); } catch(err) { displayError(); } })() ASYNC / AWAIT
40. THENEZ VOS PROMISES 40 ASYNC / AWAIT HELL AWAIT AWAIT AWAIT AWAIT AWAIT
41. THENEZ VOS PROMISES 41 Parallèle Await uniquement si le résultat d’une fonction est utile Regrouper les Await lié Promise.all
42. THANK YOU!