Applying promises to real, production applications.

1. Practical JS promises
github.com/asakusuma/promise-workshop
Asa Kusuma

2. Async operations are
1st class citizens,
represented as objects

3. var loadContainer = showPage('#photo-view');
var loadController = Controller.load(id, authToken);
!
Promises.all([
loadContainer,
loadController
]).then(Controller.pageDidLoad)
.then(null, handleError);
!
loadController.then(null, handleError);

4. pageDidLoad: function(results) {
var loadContainerResult = results[0];
var loadControllerResult = results[1];
}

5. load: function(id, authToken) {
return DataStore.get(id, authToken)
.then(_.bind(this.display, this));
}

6. Compose functions without
introducing coupling to the
functions themselves

7. Promise handlers accept
a single parameter

8. Functional Programming
• Input arguments
• Do operations
• Return result
• Avoid state
• Avoid mutation
• Avoid side-effects

9. The A+ Spec
• 3 states: pending, fulfilled, rejected (settled*)
• .then(), which takes handler functions as params
• Can call multiple times; attach multiple handlers
• Handler called even if then() called after settled
• Once fulfilled or rejected, cannot change state

10. Pending
Fulfilled Rejected
Settled
onFulfilled() onRejected()

11. .then(onFulfill, onReject)
• onFulfill called when promise is fulfilled
• onReject called when promise is rejected
• Return val becomes promise returned by then()***
• Handler execution deferred to nextTick

12. fulfilledPromise
.then(function(){
console.log(‘world!’);
});
console.log(‘Hello, ’);

13. Promise lingo
• Handler parameter
• Fulfillment value
• Rejection reason
• Resolved == settled

14. Error handling
• Error in onFulfill will reject returned promise
• Throwing rejects next promise in chain
• Non A+ features
• Long stack traces
• Global error listener

15. myPromise.then(
handleSuccess,
handleError
);

16. myPromise.then(
handleSuccess,
handleError
).then(null, handleError);

17. How are promises
created?

18. Closure Syntax
var myPromise =
new Promise(function(f, r) {
setTimeout(function() {
f(‘Hello world’);
}, 500);
});

19. Deferred Syntax
var d = RSVP.defer();
!
setTimeout(function() {
d.resolve(‘Hello world’);
}, 500);
!
var myPromise = d.promise;

20. var partialLoad = promises.defer();
…
view.on(‘renderPartial’, function() {
partialLoad.fulfill($el);
});
…
return partialLoad.promise;

21. view.on(‘renderPartial’,
_.partial(partialLoad.fulfill, $el));

22. Deferreds are the
read-write parent of
the read-only promise

23. Exercise
Creating Promises

24. getMessage: function(callback)
!
RSVP.defer()
new RSVP.Promise(function(f, r) { … })

25. Async or sync?
Promise don’t care

26. createContext()
.then(fetchUser)
.then(initializeRouters)
.then(initializeBindings)

27. Use promises to
wrap any potentially
non-blocking code

28. Common uses of promises
• Data retrieval
• Anything involving an external call
• Loading CSS
• Animation
• Template rendering

29. Promise vs Event vs Stream
• Promises are for operations executed once
• Events and streams are for repeated events
• Promises and streams are both object-based

30. High-order functions
• Functions that input and/or output functions
• Examples
• _.partial(func, arg)
• _.bind(func, context)
• Very useful with promises

31. Using a high order function
myPromise
.then(generateSumPartial(5))
.then(output)

32. The high order function
function generateSumPartial(n) {
return function(resolutionValue) {
return n + resolutionValue;
}
}

33. Exercise
Advanced Chaining

34. Promise Libraries
• Promise creation
• Promise inspection
• Utility functions
• Error handling
• Native vs. Library

35. Utility Functions
• .all()/allSettled()
• .hash()
• .spread()
• .map()
• Static vs member functions

36. Where jQuery will $@#% you
$.ajax()
.then(onFulfill, onReject)
.then(output, errorPage);

37. Testing
• .then() handler always on nextTick
• Most tests assume synchronous
• sinon.stub(process, ‘nextTick’).yields();
• Use the it() callback done handler

38. it(‘should blah’, function(done) {
testThis.then(function(result) {
expect(result).to.be.ok();
done();
}).then(null, done);
});

39. Questions?
github.com/asakusuma/promise-workshop
akusuma@linkedin.com