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


Slide 6

Slide 6 text

6 Working example: Synchronous Load (No problem)

Slide 7

Slide 7 text

7 Working example: 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.” ■ 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: 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 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: 17