Promises are so passé - Tim Perry - Codemotion Milan 2016

Promises ARE
SO PASSÉ
Tim Perry - @pimterry - Senior software engineer at resin.io

"Any fool can write code that a computer can understand.
Good programmers write code that humans can understand."
— Martin Fowler

JavaScript
REMOVES ASYNC CHALLENGES
BUT
CAN'T DIRECTLY EXPRESS ASYNC

JavaScript
REMOVES ASYNC CHALLENGES

EVENT-DRIVEN
RUN-TO-COMPLETION
SINGLE-THREADING

WE HAVE AN
ASYNCHRONOUS
ECOSYSTEM

JavaScript
CAN'T DIRECTLY EXPRESS ASYNC

WE NEED
HIGH-LEVEL ASYNC CONSTRUCTS

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

PATTERN: SEQUENTIAL DEPENDENT OPERATIONS
function mustachify(userId, callback) {
loadUserFromDatabase(userId, function (err, user) {
if (err) callback(err);
else user.getBestFriend(function (err, friend) {
else friend.getBestPhoto(function (err, photo) {
else addMustache(photo, function (err, betterPhoto) {
else showPhotoToUser(user, betterPhoto, callback);
});
});
});
});
}

PATTERN: CROSS-OPERATION ERROR HANDLING
function mustachify(userId, callback) {
try {
loadUserFromDatabase(userId, function (err, user) {
else {
try {
user.getBestFriend(function (err, friend) {
else {
try {
friend.getBestPhoto(function (err, photo) {
else {
try {
addMustache(photo, function (err, betterPhoto) {
else {
try {
showPhotoToUser(user, betterPhoto, callback);
} catch (e) { callback(e) }
}
});
}
});
}
});
}
});
}

PROMISES RECAP
A promise is a representation of a (potentially) ongoing process.
▸ Pending
▸ Fulfilled
▸ Rejected

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"));

PROMISES RECAP
Chain promises together:
loadData().then(function (data) {
return transformData(data);
}).then(function (transformedData) {
showData(data);
});

PROMISES RECAP
Catch errors across steps:
loadData().then(function (data) {
return transformData(data);
}).then(function (transformedData) {
showData(data);
}).catch(function (error) {
console.log(error);
});

PROMISES RECAP
Combine promises:
var allData = Promise.all([
loadData("company-one"),
loadData("company-two")
]);
var firstResponse = Promise.race([
getDataFromDataCenter1(),
getDataFromDataCenter2()
]);

PROMISES ARE OUR
CURRENT BEST SOLUTION

PROMISES STILL HAVE
TOO MUCH CEREMONY

PROMISES STILL
COUPLE FUNCTION SCOPES
WITH ASYNC OPERATIONS

PATTERN: COMBINING SEQUENTIAL RESULTS
- Get the current user's data
- Load the timeline for that user
- Show the user's details & timeline on screen

var user;
getUser().then(function (userData) {
user = userData; // <- Ick
return getTimeline(user);
}).then(function (timeline) {
showUser(user);
showTimeline(timeline);
});

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

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

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");
}
});

PROMISES GIVE US A
MODEL FOR ASYNC
PROCESSES

BUT THEIR API
DOESN'T PLAY NICELY
WITH EXISTING CONSTRUCTS

GENERATORS ARE FUNCTIONS THAT
REPEATEDLY YIELD VALUES

GENERATORS ARE FUNCTIONS THAT
PAUSE

function* generateEveryNumber() {
var n = 0;
while(true) {
yield n;
n += 1;
}
}

var n = 0;
while(true) {
yield n;
n += 1;
}
}
var allNumbers = generateEveryNumber();
allNumbers.next(); // { value: 0, done: false }

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
}

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 }

spawn(function* () {
if ((yield isServerAccessible()) &&
(yield isAuthenticationValid())) {
yield saveData();
} else {
}
});

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)

PROMISES ARE DEAD
LONG LIVE PROMISES

ASYNC/AWAIT IS
THE SAME MAGIC
BUT BUILT IN

async function save() {
if ((await isServerAccessible()) &&
(await isAuthenticationValid())) {
await saveData();
} else {
}
}

async function showUserAndTimeline() {
var user = await getUser();
var timeline = await getTimeline(user);
showUser(user);
showTimeline(timeline);
}

async function runTasks(tasks) {
var results = [];
for (task of tasks) {
results.push(await task.run());
}
return results;
}

GOTCHA: YOU STILL HAVE TO CATCH ERRORS

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
});

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);

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;
});
}

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 friend.name;
});
}

var friendData = await Promise.all(
friendIds.map(function (friendId) {
return getUserData(friendId);
})
);
return friend.name;
});
}

Available in Chrome
Behind a flag in Edge
Coming in FireFox 52
Implemented in WebKit

THESE ARE OUR
HIGH-LEVEL ASYNC CONSTRUCTS

Promises are so passé - Tim Perry - Codemotion Milan 2016

Related slideshows

More Related Content

Promises are so passé - Tim Perry - Codemotion Milan 2016