Async Routing in Ember.js [OUTDATED]

49612ba6e616ca3c4c668ad35e3e84ce?s=47 Luke Melia
September 19, 2012

Async Routing in Ember.js [OUTDATED]

NOTE: This presentation is not up-to-date with changed to Ember since September 2012.

A short talk on how to use promises with the Ember Router.

49612ba6e616ca3c4c668ad35e3e84ce?s=128

Luke Melia

September 19, 2012
Tweet

Transcript

  1. Async Routing in Ember.js Luke Melia Ember.js NYC Meetup September

    18th, 2012
  2. About this Embereño 2

  3. ▪ /yapps/:yapp_id ▪ /pages/:page_id ▪ Loading a Yapp will sideload

    its pages 3 Simple routing example
  4. 4 Simple routing example

  5. 5

  6. 6 Working example: http://jsfiddle.net/XdFvr/6/show/#/yapps/42/pages/7 Synchronous Load (No problem)

  7. 7 Working example: http://jsfiddle.net/XdFvr/5/show/#/yapps/42/pages/7 Asynchronous Load (Uh oh)

  8. ▪ If deserialize returns a promise, the Router will enter

    a loading state and until the promise resolves. ▪ Promises are detected based on presence of then method. 8 Solution: The Ember Router Understands Promises
  9. ▪ “A promise represents the eventual value returned from the

    single completion of an operation.” ▪ http://wiki.commonjs.org/wiki/Promises/A 9 What are promises?
  10. ▪ Has a function “then”: ▪ then(fulfilledHandler, errorHandler) ▪ Adds

    a fulfilledHandler and errorHandler to be called for completion of a promise. The fulfilledHandler is called when the promise is fulfilled. The errorHandler is called when a promise fails. 10 What are promises?
  11. 11 Working example: http://jsfiddle.net/XdFvr/4/show/#/yapps/42/pages/7 Async Load with Promises (No Problem)

  12. Loading Indicator ▪ The loading state can connect an outlet

    or update controllers on enter and exit to present a loading indicator. 12
  13. Loading States ▪ Note that you need a loading state

    on every parent of a route that will return a promise from deserialize. 13
  14. Future Plans ▪ ember-data will eventually provide promises automatically (without

    using jQuery) ▪ For a jQuery-based mixin that you can use for now, see https://gist.github.com/ 45b100e8dc9bcb3069be 14
  15. Other Uses ▪ Promises can wait on anything ▪ For

    example: CSS or Javascript modules to be loaded 15
  16. Warning: Router API is in flux ▪ A fresh API

    is currently being added to the Ember router in master ▪ Heavier emphasis on rendering templates ▪ Async behavior will likely remain consistent 16
  17. Q & A Follow me @lukemelia Some examples appear courtesy

    of my company, Yapp (which is hiring now or soon). Creative Commons photo credits: flickr.com/photos/javic/3611069497 17