Promises Are So Passé

Transcript

1. Promises ARE SO PASSÉ Tim Perry - @pimterry - Senior software engineer at resin.io
3. "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." — Martin Fowler
4. LET'S TALK ABOUT JavaScript
5. Async
6. JavaScript REMOVES ASYNC CHALLENGES BUT CAN'T DIRECTLY EXPRESS ASYNC
7. JavaScript REMOVES ASYNC CHALLENGES
8. EVENT-DRIVEN RUN-TO-COMPLETION SINGLE-THREADING
9. WE HAVE AN ASYNCHRONOUS ECOSYSTEM
10. SIMPLER BUT NOT SIMPLE
11. JavaScript CAN'T DIRECTLY EXPRESS ASYNC
12. WE NEED HIGH-LEVEL ASYNC CONSTRUCTS
13. Callbacks
14. PATTERN: SEQUENTIAL DEPENDENT OPERATIONS - Get the user from the database - Get that user's best friend - Get that best friend's profile picture - Add a mustache to everybody in the picture - Show the transformed picture on the page
15. PATTERN: SEQUENTIAL DEPENDENT OPERATIONS function mustachify(userId, callback) { loadUserFromDatabase(userId, function (err, user) { if (err) callback(err); else user.getBestFriend(function (err, friend) { if (err) callback(err); else friend.getBestPhoto(function (err, photo) { if (err) callback(err); else addMustache(photo, function (err, betterPhoto) { if (err) callback(err); else showPhotoToUser(user, betterPhoto, callback); }); }); }); }); }
16. PATTERN: CROSS-OPERATION ERROR HANDLING function mustachify(userId, callback) { try { loadUserFromDatabase(userId, function (err, user) { if (err) callback(err); else { try { user.getBestFriend(function (err, friend) { if (err) callback(err); else { try { friend.getBestPhoto(function (err, photo) { if (err) callback(err); else { try { addMustache(photo, function (err, betterPhoto) { if (err) callback(err); else { try { showPhotoToUser(user, betterPhoto, callback); } catch (e) { callback(e) } } }); } catch (e) { callback(e) } } }); } catch (e) { callback(e) } } }); } catch (e) { callback(e) } } }); } catch (e) { callback(e) } }
17. Promises
18. PROMISES RECAP A promise is a representation of a (potentially) ongoing process. ▸ Pending ▸ Fulfilled ▸ Rejected
19. PROMISES RECAP Define a new promise: var p = new Promise(function (resolve, reject) { // ... Do some asynchronous things // Eventually call resolve or reject }); Promise.resolve({ myResult: 123 }); Promise.reject(new Error("BAD THINGS"));
20. PROMISES RECAP Chain promises together: loadData().then(function (data) { return transformData(data); }).then(function (transformedData) { showData(data); });
21. PROMISES RECAP Catch errors across steps: loadData().then(function (data) { return transformData(data); }).then(function (transformedData) { showData(data); }).catch(function (error) { console.log(error); });
22. PROMISES RECAP Combine promises: var allData = Promise.all([ loadData("company-one"), loadData("company-two") ]); var firstResponse = Promise.race([ getDataFromDataCenter1(), getDataFromDataCenter2() ]);
23. PROMISES ARE OUR CURRENT BEST SOLUTION
24. PROMISES STILL HAVE TOO MUCH CEREMONY
25. PROMISES STILL COUPLE FUNCTION SCOPES WITH ASYNC OPERATIONS
26. PATTERN: COMBINING SEQUENTIAL RESULTS - Get the current user's data - Load the timeline for that user - Show the user's details & timeline on screen
27. PATTERN: COMBINING SEQUENTIAL RESULTS var user; getUser().then(function (userData) { user = userData; // <- Ick return getTimeline(user); }).then(function (timeline) { showUser(user); showTimeline(timeline); });
28. PATTERN: ASYNC IN A LOOP - For each task: - Run the task to completion - Add the result to the task results array - Move on to the next task - Return the array of task results
29. PATTERN: ASYNC IN A LOOP function runTasks(tasks) { var accumulatedPromise = Promise.resolve([]); for (var task of tasks) { accumulatedPromise.then(function (accumulatedResults) { return task.run().then(function (result) { return accumulatedResults.concat(result); }); }); } return accumulatedPromise; }
30. PATTERN: CONDITIONAL ON ASYNC RESULT - If the server is up and the user's login is valid: - Save their data - Show a nice message - Otherwise: - Show an error
31. PATTERN: CONDITIONAL ON ASYNC RESULT isServerAvailable().then(function (serverIsAvailable) { return serverIsAvailable && isAuthenticationValid(); }).then(function (canSave) { if (canSave) { return saveData().then(function () { showMessage("Data saved"); }); } else { showWarning("Couldn't save data"); } });
32. PROMISES GIVE US A MODEL FOR ASYNC PROCESSES
33. BUT THEIR API DOESN'T PLAY NICELY WITH EXISTING CONSTRUCTS
34. Generators
35. GENERATORS ARE FUNCTIONS THAT REPEATEDLY YIELD VALUES
36. GENERATORS ARE FUNCTIONS THAT PAUSE
37. function* generateEveryNumber() { var n = 0; while(true) { yield n; n += 1; } }
38. function* generateEveryNumber() { var n = 0; while(true) { yield n; n += 1; } } var allNumbers = generateEveryNumber(); allNumbers.next(); // { value: 0, done: false } allNumbers.next(); // { value: 1, done: false } allNumbers.next(); // { value: 2, done: false }
39. function* generateEveryNumber() { var n = 0; while(true) { yield n; n += 1; } } for (var number of generateEveryNumber()) { if (number > 1000) break; console.log(number); // 1, 2, 3 ... 1000 }
40. function* sumUpNumbers() { var accumulator = (yield); while (true) { var nextAddition = (yield accumulator); accumulator += nextAddition; } } var sum = sumUpNumbers(); sum.next(); // Need an initial next(), to run to first yield. sum.next(1); // { value: 1, done: false } sum.next(5); // { value: 6, done: false }
41. Promises + Generators
42. PATTERN: CONDITIONAL ON ASYNC RESULT - If the server is up and the user's login is valid: - Save their data - Show a nice message - Otherwise: - Show an error
43. PATTERN: CONDITIONAL ON ASYNC RESULT spawn(function* () { if ((yield isServerAccessible()) && (yield isAuthenticationValid())) { yield saveData(); showMessage("Data saved"); } else { showWarning("Couldn't save data"); } });
44. WRAPPING A GENERATOR function spawn(generatorConstructor) { var generator = generatorConstructor(); function step(input) { var result = generator.next(input); var value = Promise.resolve(result.value); if (result.done) return value; else return value.then(step); } return step(); } // (Error handling omitted)
45. PATTERN: CONDITIONAL ON ASYNC RESULT spawn(function* () { if ((yield isServerAccessible()) && (yield isAuthenticationValid())) { yield saveData(); showMessage("Data saved"); } else { showWarning("Couldn't save data"); } });
46. PROMISES ARE DEAD LONG LIVE PROMISES
47. Async / Await
48. ASYNC/AWAIT IS THE SAME MAGIC BUT BUILT IN
49. PATTERN: CONDITIONAL ON ASYNC RESULT async function save() { if ((await isServerAccessible()) && (await isAuthenticationValid())) { await saveData(); showMessage("Data saved"); } else { showWarning("Couldn't save data"); } }
50. PATTERN: COMBINING SEQUENTIAL RESULTS async function showUserAndTimeline() { var user = await getUser(); var timeline = await getTimeline(user); showUser(user); showTimeline(timeline); }
51. PATTERN: ASYNC IN A LOOP async function runTasks(tasks) { var results = []; for (task of tasks) { results.push(await task.run()); } return results; }
52. THIS IS NOT ALL ROSES
53. GOTCHA: YOU STILL HAVE TO CATCH ERRORS
54. ASYNC/AWAIT ERROR HANDLING async function mustachify(userId) { var user = await loadUserFromDatabase(userId); var friend = await getBestFriend(user); var photo = await friend.getBestPhoto(); var betterPhoto = await addMustache(photo); return showPhotoToUser(user, betterPhoto); } mustachify(userId).catch(function (error) { // You can still use catch() - it's promises under the hood });
55. ASYNC/AWAIT ERROR HANDLING async function mustachify(userId) { try { var user = await loadUserFromDatabase(userId); var friend = await getBestFriend(user); var photo = await friend.getBestPhoto(); var betterPhoto = await addMustache(photo); return showPhotoToUser(user, betterPhoto); } catch (error) { // Try/catch now works with promises & async too } } mustachify(userId);
56. GOTCHA: CAN'T AWAIT IN NESTED FUNCTIONS async function getAllFriendNames() { var friendData = friendIds.map(function (friendId) { // This code isn't in an async function, // so this is a syntax error. return (await getUserData(friendId)); }); return friendData.map(function (friend) { return friend.name; }); }
57. GOTCHA: CAN'T AWAIT IN NESTED FUNCTIONS async function getAllFriendNames() { var friendData = friendIds.map(async function (friendId) { return (await getUserData(friendId)); }); // Map() doesn't care about async, so our getUserData // calls haven't actually finished yet. return friendData.map(function (friend) { return friend.name; }); }
58. GOTCHA: CAN'T AWAIT IN NESTED FUNCTIONS async function getAllFriendNames() { var friendData = await Promise.all( friendIds.map(function (friendId) { return getUserData(friendId); }) ); return friendData.map(function (friend) { return friend.name; }); }
59. GOTCHA: EASY TO OVERUSE AWAIT
60. HOW DO YOU START USING THIS?
61. Available in Chrome Behind a flag in Edge Coming in FireFox 52 Implemented in WebKit
63. THESE ARE OUR HIGH-LEVEL ASYNC CONSTRUCTS
64. Promises ARE SO PASSÉ Tim Perry - @pimterry - Senior software engineer at resin.io