Practical JavaScript Promises

Practical JavaScript Promises

• 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 varmyPromise = new Promise(function(f, r) { setTimeout(function() { f(‘Hello world’); }, 500); });
• 19.
  Deferred Syntax vard = 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 ofpromises • Data retrieval • Anything involving an external call • Loading CSS • Animation • Template rendering
• 29.
  Promise vs Eventvs 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 highorder function myPromise .then(generateSumPartial(5)) .then(output)
• 32.
  The high orderfunction 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