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

Don't call me back - How Ember uses promises an...

Don't call me back - How Ember uses promises and how you can, too

Introduction to promises (RSVP.js), a few ingenious ways Ember uses promises combined with the run loop to achieve great things and some promise constructs to solve problems that could arise (have arisen) when developing Ember apps.

This is the presentation I gave at EmberFest, Barcelona, on 08/29/2014.

Balint Erdi

August 29, 2014
Tweet

More Decks by Balint Erdi

Other Decks in Technology

Transcript

  1. “A fiat-money currency generally loses value once the issuing government

    or central bank either loses the ability to or refuses to further guarantee its value.”
  2. I’m Balint Erdi, … • @baaz • balinterdi.com • Got

    acquainted and fell in love with Ember 1.5 year ago • Do (mostly) Ember consulting/development • Happy as a clam
  3. “A promise represents the eventual result of an asynchronous operation.

    The primary way of interacting with a promise is through its then method, which registers callbacks to receive either a promise’s eventual value or the reason why the promise cannot be fulfilled.” ! (From the Promises/A+ spec)
  4. Selling points • Allow writing async code that looks sync

    • Provide a first-class, composable construct • Simple error handling
  5. Promises/A+ • A promise must provide a “then” method •

    promise.then(fulfillmentHandler, rejectionHandler) • Exactly in one state: pending, fulfilled, rejected • Handlers must be executed in the order they were registered • “then” must return a promise (=> chainability)
  6. Vocabulary • fulfill: move from pending to fulfilled • reject:

    move from pending to rejected • resolve: move from pending to either fulfilled or rejected • (RSVP.js) settle: what is meant by “resolve” in Promises/A+ • (RSVP.js) resolve: what is meant by “fulfill” in Promises/ A+
  7. “Trickle down” • if promise1 is fulfilled/rejected and onFulfilled/ onRejected

    is not a function, promise2 should be fulfilled/rejected with the same value
  8. Exception handling • if onFulfilled or onRejected throws an exception

    “e”, promise2 must be rejected with “e” as the reason • made possible by trickling down + rejection when exception is thrown
  9. “In cases where data is available asynchronously, you can just

    return a promise from the model hook, and Ember will wait until that promise is resolved before rendering the template.”
  10. How? • Ember.run.queues => ["sync", "actions", "routerTransitions", "render", "afterRender", “destroy"]

    • RSVP promises get resolved in the “actions” queue • Router transitions happen in “routerTransitions” • Template rendering happens in “render” • ember-routing/lib/ext/run_loop.js
  11. To provide visual feedback that data is being fetched for

    the page (to counter the “white screen of death”)
  12. How? • Ember.run.queues => ["sync", "actions", "routerTransitions", "render", "afterRender", “destroy"]

    • beforeModel calls a willResolveModel hook that schedules triggering a “loading” event in the “routerTransitions” queue • the loading event is fired unless the router has already finalized the transition • the loading event transitions to the appropriate loading route and will render the template that belongs to it
  13. How? • All async helpers (visit, click, fillIn, etc.) return

    a promise (a call to `wait`) which is resolved when all async operations are complete • Added bonus: test code is “fake synchronous” (read Cory Forsyth’s blog post: http:// coryforsyth.com/2014/07/10/demystifing-ember- async-testing/)
  14. How? • store.find, save & destroy return promises • backend

    operation completes • all the RSVP arsenal is at our disposal to deal with success/failure scenarios
  15. Piqued your interest? • Promise Anti-patterns • Promises/A+ spec •

    Async Javascript • General Theory of Reactivity
  16. Image credits • Rich Hickey • Unicorn, Facepalm, Femme avec

    baguette, • Bill of Exchange • Cashier’s check • HSBC check • Fiat money • Winnie the Pooh - friendship • Wedding • Fire insurance • Promise-related some e-cards
  17. References • Loading Routes in Ember.js • Dashboard type views

    • Demystifying Ember Async Testing • Javascript Promises with RSVP.js • The Revealing Constructor Pattern