Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Async Routing in Ember.js [OUTDATED]

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.

Luke Melia

September 19, 2012
Tweet

More Decks by Luke Melia

Other Decks in Technology

Transcript

  1. Async
    Routing
    in Ember.js
    Luke Melia
    Ember.js NYC Meetup
    September 18th, 2012

    View full-size slide

  2. About this Embereño
    2

    View full-size slide

  3. ■ /yapps/:yapp_id
    ■ /pages/:page_id
    ■ Loading a Yapp will sideload its
    pages
    3
    Simple routing example

    View full-size slide

  4. 4
    Simple routing example

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. ■ “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?

    View full-size slide

  9. ■ 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?

    View full-size slide

  10. 11
    Working example: http://jsfiddle.net/XdFvr/4/show/#/yapps/42/pages/7
    Async Load with Promises
    (No Problem)

    View full-size slide

  11. Loading Indicator
    ■ The loading state can connect an
    outlet or update controllers on enter
    and exit to present a loading indicator.
    12

    View full-size slide

  12. Loading States
    ■ Note that you need a loading state on
    every parent of a route that will return
    a promise from deserialize.
    13

    View full-size slide

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

    View full-size slide

  14. Other Uses
    ■ Promises can wait on anything
    ■ For example: CSS or Javascript
    modules to be loaded
    15

    View full-size slide

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

    View full-size slide

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

    View full-size slide