Promises, Promises: Mastering Async I/O in Javascript with the Promise Pattern

Promises, PromisesMastering Async in Javascript

with the Promise Pattern

by Christian Lilleyabout.me/xml

Thursday, September 19, 13

1st, our Problem...Do Thing A.

Do Thing B using output of Thing A.

But Thing A hasn’t returned yet, & you don’t know when it will!!!


Then, the *Name*YMMV. Ignore the name if you need to.

also: ‘Futures’, ‘Deferrables’, et al.

Some of those are misleading...

But still pithier than my ‘Time-Independent Proxy Objects’

TIPOs!

Better: ‘Timeless Values’, ‘IOUs’


The Nature of JS


The Nature of JS(Terminology on this stuff varies: smarter people than me argue about ‘blocking’ vs. ‘non-blocking’, etc.)

FWIW, JS doesn’t have ‘real’ concurrency or coroutines

‘Just’ a Single-Threaded Event Loop

Which actually works really well, once you understand it.

Hence, Node’s doing pretty well.


The Default OptionSo, by default, Async in JS is all about callbacks.

Callbacks get an otherwise blocking long-lived function out of the loop. They’re the exception to sequential, ‘blocking’ execution.

Callbacks don’t return values, they have *side-effects*

If you miss them, they’re gone forever


Callback RealitySo, callbacks work, but they’re a pain to compose and think about: tons of manual control-flow, custom event systems, caching of process states...

People hate callbacks so much, they come up with colorful names for what they make their code look like:

“Callback Hell”, or...

“Callback Spaghetti”, or...


step1(value1, function (output) { step2(output1, function(output2) { step3(output2, function(output3) { step4(output3, function(output4) { // Do something with value4,

quick, before it disappears!!!

}); }); });});


PYRAMID OF DOOOM!!!!


Doom is bad.


Instead, how about...


Q.fcall(step1).then(step2).then(step3).then(step4);

Nice! Although, what if we don’t want to chain everything at once?...


var myPromise = Q.fcall(step1);

// later...var newPromise = myPromise.then(step2);

// much later...newPromise.then(step3).then(step4);

// and some other time entirely...myPromise.then(step5)


Or, Aggregation!


// First, do one thing:var 1stPromise = Q.fcall(step1);

// After that, do 3 other thingsvar 2ndPromise = myPromise.then(step2);

var 3rdPromise = myPromise.then(step3);

var 4thPromise = myPromise.then(step4);

// And only after those 3 finish...Q.all([2ndPromise, 3rdPromise, 4thPromise]).then(step5)


So, what’s going on?Q.js is a utility library for generating promises. There are others, but Q is the gold-standard, and fully compliant with Promises/A+ spec.

Subset of Q is in Angular: $Q

JQuery has an implementation: avoid

In the past, folks used Async.js, other utilities, for similar purposes.


But, what’s a Promise?!?

A promise is something very simple, but very powerful:

a container that holds a value, or will hold a value

a time-independent proxy for a remote/external object

an instance of a class that has utility methods like .then()


But, what’s a Promise?!?

A ‘frozen event’ you can learn status of at any time.

It’s a first-class object, so you can:

Pass itReference itChain it

All these things, in ONE PACKAGE


Metaphors:


Mailbox/Loading-DockA package containing a new drive is coming. Will be delivered to this spot, but not sure when.

var newDriveReady = orderDrive().then(openBox).then(copyData)

var oldDriveGone = newDriveReady.then(wipeDrive).then(sellDrive)

var newDriveInstalled = newDriveReady.then(installDrive)

Q.all([newDriveInstalled, oldDriveGone]).done(downloadMoreMusic)


Family MessagingRather than standing waiting for your kid at school, & for spouse at work, make plans & do other stuff.

var kidPromise = kidToSchool();

var childHome = kidPromise.then(smsReceived).then(pickUpKid);

var foodAvailable = kidPromise.then(goShopping);

var spouseHome = spouseToWork().then(vmReceived).then(pickUpSpouse);

Q.all([childHome, spouseHome, foodAvailable]).then(makeDinner).done(eatDinner);


MoneyThe callback approach to life is that you get paid for your work in perishable goods, like food.

You have to preserve or sell it to be able to store it.

Wouldn’t you rather just get paid in money, which you can spend, save, or even take out loans against?


So, yes: it’s very nice syntactic sugar for composing more readable interactions, especially with callback-based applications.

But that’s missing the bigger points:

Persistent Events

Cached Values from I/O operations

Error-Handling

Take async out of controllers, etc., w/ patterns like Angular’s


Infinitely chainable: Promise methods return a promise, either transformed or original.

Aggregation, with .all

Furthermore...


How-To


Consuming At first, consume promises from Angular's $HTTP, similar methods that return promises that you've maybe been ignoring all along.

Inspect the state of a promise with:

promise.inspect() (returns state & value or reason)

promise.isPending()

promise.isFulfilled()

promise.isRejected()


Consuming But once you've seen how much easier life gets when you take maximum advantage of Promises, you'll want to not only consume them, but produce your own...


Producing - Step 1 Start Simple, by wrapping a basic value or function output in a Promise, so you can .then() or .all()

Q.fcall(function() {return 10;});

Q.fcall(calculateSomething(data));

These promises will already be resolved. (They’re not async, right?)


Producing - Step 2 Take callback-producing functions and turn them easily into promise-producing functions, especially in Node:

var filePromise = Q.nfcall(FS.readFile, "foo.txt", "utf-8");

filePromise.done(handler);

(‘nfcall()’ = node function call, but you can use it elsewhere)

(There’s also nfapply(), of course.)


Producing - Step 3 If you want to assemble your own promise-generating functions, from-scratch, and resolve or reject when/how you wish, you want...


Deferreds


What’s a Deferred?If a Promise is a container for a value, then a Deferred is the custodian of the container, taking care of it until it grows up & leaves home.

The promise is a property of the deferred, which also has special methods for resolving the promise.

So, re-using the previous example:


The Promise is a separate object, to which the

Deferred holds a reference:


Deferredfor creating,

resolving promises

PromiseUser/Consumer

methods live here.

.resolve()

.reject()

.promise

.then()

.done()

.all()

.inspect()

.state

.value

.catch()

.fcall()

etc...


Which can do What?You can’t change the state of a Promise directly. Only its Deferred object can do that.

The Deferred is able to resolve or reject the Promise. If you don’t have the Deferred, you’re just a consumer.

Promise is a bit like the compiled binary, Deferred is the source.


Let’s beat that mailbox metaphor to death, shall we?


If the Promise is the mailbox, then the Deferred:

Is the Postman.


No, not that one, thank

God...


If the Promise is the mailbox, then the Deferred:

Is the Postman.

The Postman is the only one who’s allowed to:

Assign you a new mailbox. (ie. create a promise)Put new packages into the mailbox. (resolve the promise)Raise the little flag on the side. (set state of the promise)


Recap:


Promises Get YouClear, Declarative Control-Flow That Works Regardless of Time & Place

Persistent Events, Clear Handlers

Parallelism, Aggregation

Caching of Async Values

Excellent Error-Handling


Advanced Patterns


Promises from Other Libraries

Not all promises are Promises/A+ spec

I’m looking at you, JQuery.

Also, some spec libraries are limited

Wrap any other promise in conversion methods like Q(jqueryPromise);

Just like wrapping a bare DOM element in JQuery, so you can use those methods.


Angular & PromisesAngular shows what you can do when you start thinking in Promises.

Most async methods return promises.

($resource used to be an exception, but that’s changing in 1.2)


Angular & Promises`resolve` property on routes: always resolved before controller instantiated, view rendered.

allows controllers, views to be fully time-agnostic

more modular, reusable, focused

Make use of a *service* (a persistent singleton) to cache your promises, perhaps using...


Lazy PromisesUse a simple getter function that will return a promise if it already exists (whether resolved yet, or not), or generate one if needed.

Works well with namespace() for creating hierarchies on the fly.

Promises/A+ considering standardizing

AMD loaders basically built on them


function getDivision(divisionName) { if (!divisionObjects[divisionName]) { divisionObjects[divisionName] =

$http.get(baseUrl + divisionName).error(function(data, status) {

console.error('getDivision failed, error:' + status) }); } else { return divisionObjects[divisionName]; }}


NotesAsync.JS - Still useful, but promises are a better overall abstraction, that can change your whole structure.

AMD/Require.JS is async and is a version of promises: *lazy* promises.

I lied before: Web Workers are bringing real concurrency/multi-threading to JS !!! (IE 10 or better) But they won’t make callbacks go away.


NotesNode is recent enough that they certainly could have used Promises instead of callbacks. And servers are all about I/O. But everybody already understands callbacks...

Robust, readable error-handling is another great feature of Promises.


ReferencesJohn Resig: How Timers Work (Also generally about the whole JS event-loop)

Trevor Burnham: Flow-Control With Promises

Callbacks are imperative, promises are functional: Node’s biggest missed opportunity

Domenic: You’re Missing the Point of Promises

Trevor Burnham’s Async Javascript (Book @ PragProg)

Writing Asynchronous Javascript 101 (It should actually be a ‘301’, and is dated, but good info)


http://ejohn.org/blog/how-javascript-timers-work/

http://ejohn.org/blog/how-javascript-timers-work/

http://trevorburnham.com/presentations/flow-control-with-promises/#/21

http://trevorburnham.com/presentations/flow-control-with-promises/#/21

http://blog.jcoglan.com/2013/03/30/callbacks-are-imperative-promises-are-functional-nodes-biggest-missed-opportunity/




http://domenic.me/2012/10/14/youre-missing-the-point-of-promises/

http://domenic.me/2012/10/14/youre-missing-the-point-of-promises/

http://pragprog.com/book/tbajs/async-javascript

http://pragprog.com/book/tbajs/async-javascript

http://www.slideshare.net/clutchski/writing-asynchronous-javascript-101

http://www.slideshare.net/clutchski/writing-asynchronous-javascript-101

Promises, Promises: Mastering Async I/O in Javascript with the Promise Pattern

Technology

Transcript of Promises, Promises: Mastering Async I/O in Javascript with the Promise Pattern