Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Thenez vos promesses
Search
Deyine
June 24, 2018
Programming
0
110
Thenez vos promesses
Dans cette présentation, on fait le tour de l'evolution de la programmation asyncrone en JS
Deyine
June 24, 2018
Tweet
Share
More Decks by Deyine
See All by Deyine
Android development flow
deyine
3
130
MVP architecture
deyine
2
82
Other Decks in Programming
See All in Programming
今インフラ技術をイチから学び直すなら
yuhta28
1
140
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
420
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
3
870
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
GraphQL あるいは React における自律的なデータ取得について
quramy
11
3k
Securify_エンジニア採用資料
3shake
0
110
The Shape of a Service Object
inem
0
520
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
610
What is Parser
yui_knk
9
4.2k
Jakarta EE meets AI
ivargrimstad
0
390
Featured
See All Featured
How to name files
jennybc
75
98k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
Into the Great Unknown - MozCon
thekraken
29
1.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
158
15k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
Faster Mobile Websites
deanohume
304
30k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Side Projects
sachag
451
42k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Transcript
THENEZ VOS PROMISES DEYINE JIDDOU Presented by:
THENEZ VOS PROMISES 2
THENEZ VOS PROMISES 3 La plupart du temps on écrit
du code synchrone AKA BLOCKING
THENEZ VOS PROMISES 4
THENEZ VOS PROMISES 5 Traitements lourds, difficile à optimiser MULTI-THREADING
THREAD POOL BACKGROUND WORKER INVOKE KILL/PAUSE ERROR HANDLING RETRY WAIT
THENEZ VOS PROMISES 6 En JAVASCRIPT, on fait les choses
différemment
THENEZ VOS PROMISES 7 Un seul Thread en Javascript
THENEZ VOS PROMISES 8 console.log(1); setTimeout(function() { console.log('Finished'); }, 10);
console.log(2); console.log(3); console.log(4);
THENEZ VOS PROMISES 9 The Event loop CALL STACK console.log(1)
THENEZ VOS PROMISES 10 The Event loop CALL STACK setTimeout
THENEZ VOS PROMISES 11 The Event loop CALL STACK setTimeout
BROWSER DOM Events XHR(Ajax) Timers …
THENEZ VOS PROMISES 12 The Event loop CALL STACK setTimeout
BROWSER DOM Events XHR(Ajax) Timers … console.log(2) …
THENEZ VOS PROMISES 13 The Event loop CALL STACK setTimeout
BROWSER DOM Events XHR(Ajax) Timers … console.log(2) … EVENT QUEUE Function1
THENEZ VOS PROMISES 14 The Event loop CALL STACK setTimeout
BROWSER DOM Events XHR(Ajax) Timers … console.log(2) … EVENT QUEUE Function1
THENEZ VOS PROMISES 15
THENEZ VOS PROMISES 16 function getMeetup() { var meetup; $.get('/meetup',
function(data) { meetup = data; }); return meetup; } var JsMeetup = getMeetup(); console.log(JsMeetup); // null
THENEZ VOS PROMISES 17 Traiter le résultat au moment de
la récupération
THENEZ VOS PROMISES 18 function getMeetup(callback) { $.get('/meetup', function(data) {
callback(data); }); } var JsMeetup = getMeetup(function(meetup) { console.log(JsMeetup); // Object });
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 });
THENEZ VOS PROMISES 20 CALLBACK HELL
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; }
THENEZ VOS PROMISES 22 Vous pouvez écrire une petite librairie
pour simplifier
THENEZ VOS PROMISES 23 En réalité beaucoup l’ont fait
THENEZ VOS PROMISES 24 PROMISES
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
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); });
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
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
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
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
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
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
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
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
THENEZ VOS PROMISES 35 PROMISES
THENEZ VOS PROMISES 36 PROMISES ES7 - couche au dessus
des Promises
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
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
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
THENEZ VOS PROMISES 40 ASYNC / AWAIT HELL AWAIT AWAIT
AWAIT AWAIT AWAIT
THENEZ VOS PROMISES 41 Parallèle Await uniquement si le résultat
d’une fonction est utile Regrouper les Await lié Promise.all
THANK YOU!