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.

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
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