Slide 1
Slide 1 text
Async
Routing
in Ember.js
Luke Melia
Ember.js NYC Meetup
September 18th, 2012
Slide 2
Slide 2 text
About this Embereño
2
Slide 3
Slide 3 text
■ /yapps/:yapp_id
■ /pages/:page_id
■ Loading a Yapp will sideload its
pages
3
Simple routing example
Slide 4
Slide 4 text
4
Simple routing example
Slide 5
Slide 5 text
5
Slide 6
Slide 6 text
6
Working example: http://jsfiddle.net/XdFvr/6/show/#/yapps/42/pages/7
Synchronous Load
(No problem)
Slide 7
Slide 7 text
7
Working example: http://jsfiddle.net/XdFvr/5/show/#/yapps/42/pages/7
Asynchronous Load (Uh oh)
Slide 8
Slide 8 text
■ 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
Slide 9
Slide 9 text
■ “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?
Slide 10
Slide 10 text
■ 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?
Slide 11
Slide 11 text
11
Working example: http://jsfiddle.net/XdFvr/4/show/#/yapps/42/pages/7
Async Load with Promises
(No Problem)
Slide 12
Slide 12 text
Loading Indicator
■ The loading state can connect an
outlet or update controllers on enter
and exit to present a loading indicator.
12
Slide 13
Slide 13 text
Loading States
■ Note that you need a loading state on
every parent of a route that will return
a promise from deserialize.
13
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Other Uses
■ Promises can wait on anything
■ For example: CSS or Javascript
modules to be loaded
15
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
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