Promises in JavaScript with jQuery

Promises in JavaScript with jQuery

• 1.
  Promises in JavaScript with jQuery BrisJs Meetup - July 2011
• 2.
  Futures and Promises • Futures is the concept behind simplifying the management of asynchronous data or computations with chainable callbacks. • Futures is the concept, promises and deferreds are the implementations of this concept. • Becoming popular because of implementations by jQuery (1.5) Dojo (0.9). • Goal - simplify callback management with benefits!
• 3.
  JavaScript implementations • jQuery - http://api.jquery.com/category/deferred- object • Dojo - http://dojotoolkit.org/reference-guide/dojo/ Deferred.html • FuturesJS - http://coolaj86.info/futures/ • Note: Futures are not JavaScript specific. http://en.wikipedia.org/wiki/Futures_and_promisesFutures_and_promises
• 4.
  Why is thiscool? • Because you attach success or fail callbacks instantly to the returned result! • Instead of passing success and error callbacks to the computation. • You could then pass the result around to other code to register their own success or fail callbacks.
• 5.
  No really, WTFis this promises stuff. • A typical futures pattern could look like: when(task1, task2) -> then() or fail() where task1 and task2 are deferreds (stuff that resolves/completes later). • The point of when() is allowing multiple promises to complete before calling the callbacks cued for then() or fail() are called. • You can also do task1 -> then() or fail() • “then” is synonymous with “success”. • Important! Deferreds and Promises are not interchangeable terms. Why?
• 6.
  What are Deferreds •Deferreds are implementations of futures that use promises (internally) to determine the state (resolved, un-resolved)of the result in a read-only fashion!
• 7.
  Deferreds • Deferreds give you (as the author) control of setting the state of the underlying promise, what callbacks are fired off and and when. • When using deferreds, you should only ever return the (read only) promise object of the deferred, never the deferred itself.
• 8.
  Why is adeferreds promise read only? • Because otherwise, external code could set the the state of the internal promise (e.g. to resolved when it was actually unresolved).
• 9.
  Ok, so whatare promises then? • Each deferred has a promise which is read only to the outside world and only manipulated by the deferred itself. • Promises have state: - unresolved, - resolved, or - failed. • The promise object allows code to access the state of the promise and to append callbacks and errbacks but not to affect the state of the promise itself.
• 10.
  So how doI use deferreds? • Deferreds enable you to immediately start chaining success and error methods to the deferred object without waiting for the computation or request to complete. • If when callbacks methods are attached the request or computation is done, the method(s) will be executed straight away. If not, it will get cued up and called later.
• 11.
  Deferred Resources • http://developer.yahoo.com/yui/theater/video.php? v=crockonjs-3 • http://addyosmani.com/blog/digging-into-deferreds-1/ • http://www.erichynds.com/jquery/using-deferreds-in-jquery/ • http://msdn.microsoft.com/en-us/scriptjunkie/gg723713.aspx
• 12.
  jQuery and Deferreds AJAX • jQuery introduced deferreds in 1.5 with the rewrite of the ajax module. • The ajax module returns the underlying promise of a deferred allowing you to chain callbacks for success(), error() onto the jqXHR object returned. • jQuery adds more than just then() and fail() to it’s deferreds.
• 13.
  jQuery and Deferreds AJAX • This was awesome for two reasons: • Made for more readable code • Allowed multiple callbacks for the one Ajax request easy • Note: Passing around promises may not always be the best way for other parts of your app to be notified about Ajax data events.
• 14.
  Deferreds in jQuery 1.6 • deferred.always() (like complete for the ajax module), • deferred.pipe() which is a way of filtering or chaining deferreds, and • promise() which is an easy way of dynamically generating a promise object outside of a deferred implementation.
• 15.
  Practical example • Handlebars.jsremote template render using jQuery ajax promise • https://gist.github.com/1064084
• 16.
  The main problemsDeferreds helps us solve now • Multiple ajax calls, then(...) • Easy caching of ajax responses • Sequential animations - jQuery 1.6
• 17.
  Thanks! • Ryan Blunden ryan.blunden@gmail.com @ryan_blunden