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
120
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
140
MVP architecture
deyine
2
96
Other Decks in Programming
See All in Programming
CSC509 Lecture 05
javiergs
PRO
0
300
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
430
オープンソースソフトウェアへの解像度🔬
utam0k
12
2.6k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
CSC509 Lecture 06
javiergs
PRO
0
260
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
株式会社 Sun terras カンパニーデック
sunterras
0
280
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
120
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
460
Cursorハンズオン実践!
eltociear
2
980
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.3k
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
470
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
It's Worth the Effort
3n
187
28k
Making Projects Easy
brettharned
119
6.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Bash Introduction
62gerente
615
210k
Being A Developer After 40
akosma
91
590k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
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!