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

Embracing Ember Conventions: Loading and Error ...

Chris Ball
December 02, 2014

Embracing Ember Conventions: Loading and Error Substates

Ember is built around conventions. Conventions are great for developers because they can leverage framework decisions to be productive and eliminate a lot of boilerplate or repetitive code.

Loading and Error Substates can and should be used in your Ember applications to provide user feedback for these common states. We’ll look at examples of nested templates and built-in event hooks. Using http-mocks, we’ll look at handling errors and simulate using an app on a slow connection to see how important and easy this type feedback is.

Repo that was used for demos is available here:
https://github.com/cball/loading-error-substates-example

Chris Ball

December 02, 2014
Tweet

More Decks by Chris Ball

Other Decks in Programming

Transcript

  1. What We’ll Cover Why we need conventions Conventions in Ember

    Application States / Substates Substates in Ember How to implement them # # # # #
  2. The “Wild West” put files anywhere! name anything! fetch data

    your way! byo build tools! complete control!
  3. A naming structure Asset concatenation Ways to install addons Serialize/Deserialize

    JSON A folder structure Asset minification Front-end App Needs
  4. “For us, the biggest unexpected benefit has been leveraging Ember’s

    framework conventions to just get work done.” - Allen Cheung, Square http://www.talentbuddy.co/blog/building-with-ember-js-advice-for-full-stack-developers-and-more-with-allen-cheung-engineering-manager-at-square/
  5. Why Conventions? Take away common pain points. Bring organization. Make

    you more efficient. Give you superpowers. Reduce boilerplate code. Help you know your way around. ⋆ ⋆ ⋆ ⋆ ⋆ ⋆
  6. Loading/Error Substates Pods Routing Data Binding Naming Conventions Promises Everywhere

    ember-cli Computed Properties outlet The Resolver Standardized Naming Yes Resource Name -> API Url & Yes, you still made the slides.
  7. .save() with Ember Data - Transforms Ember Model -> JSON

    - Figures out POST/PUT - Deals with host, namespace, headers - Handles error/success response - Translates JSON -> properties - Updates Model with new values
  8. Loading/Error Substates Pods Routing Data Binding Naming Conventions Promises Everywhere

    ember-cli Computed Properties outlet The Resolver Standardized Naming Yes Resource Name -> API Url & We are going to focus here.
  9. Add to cart View cart ' ' ) When moving

    buckets, things can happen.
  10. // router.js Router.map(function() { this.resource('artist', { path: '/artists/:artist_id' }, function()

    { }); this.resource('albums', { path: '/artists/:artist_id/albums' }, function() { this.route('popular'); }); this.resource('album', { path: '/albums/:album_id' }, function() { this.resource('comments', function() { }); }); }); & function passed, routes generated & no function, no generated routes
  11. To render substate templates into named outlets, override the route

    and the renderTemplate hook. Named Outlets
  12. Use Actions Loading Sibling // routes/albums/index.js actions: { loading: {

    doStuff(); return true; } } & return true to use default substate behavior & time slow actions, custom behavior, etc.
  13. Error Substates // error.hbs <h2>Mike is sorry. We’ve told him

    about the error.</h2> {{#if development}} Hey dev. Here’s some more info: <h3>{{message}}</h3> <p>{{stack}}</p> {{/if}}
  14. Error Substates // controllers/application.js import Ember from 'ember'; import ENV

    from 'appname/config/environment'; export default Ember.Controller.extend({ development: Ember.computed.equal(ENV.environment, "development"); });
  15. Use Actions Error // routes/application.js actions: { error: { if

    (tooManyErrors) { userHavingBadTime(); } return true; } } & return true to use default substate behavior