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

Embracing Ember Conventions: Loading and Error Substates

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. Embracing
    loading and error substates
    Conventions

    View full-size slide

  2. Hi
    cball_
    !
    cball.me
    "

    View full-size slide

  3. What We’ll Cover
    Why we need conventions
    Conventions in Ember
    Application States / Substates
    Substates in Ember
    How to implement them
    #
    #
    #
    #
    #

    View full-size slide

  4. Why do we
    need conventions?
    #

    View full-size slide

  5. We often encounter
    hard problems.

    View full-size slide

  6. Even simple
    tasks are hard
    to get right.

    View full-size slide

  7. What if some of these
    decisions could
    be made for you?
    correctly
    ^

    View full-size slide

  8. Conventions.

    View full-size slide

  9. “Conventions are
    too restrictive!”

    View full-size slide

  10. The “Wild West”
    put files anywhere! name anything!
    fetch data your way!
    byo build tools!
    complete control!

    View full-size slide

  11. The “Wild West”
    real
    ^

    View full-size slide

  12. How do we avoid
    the mess?

    View full-size slide

  13. Extract common
    pain points.

    View full-size slide

  14. Use them to create
    conventions.

    View full-size slide

  15. Let developers focus
    on the hard stuff.

    View full-size slide

  16. Bring
    organization.

    View full-size slide

  17. The “Collective Mind”

    View full-size slide

  18. A naming structure
    Asset concatenation
    Ways to install addons
    Serialize/Deserialize JSON
    A folder structure
    Asset minification
    Front-end App Needs

    View full-size slide

  19. Your app is not
    a special flower.

    View full-size slide

  20. Spend the bulk of your
    time where it counts.

    View full-size slide

  21. Rails is proof that this works

    View full-size slide

  22. More benefits please.

    View full-size slide

  23. Conventions breed
    efficiency.

    View full-size slide

  24. “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/

    View full-size slide

  25. Conventions give you superpowers.
    http://realitypod.com/wp-content/uploads/2011/03/super-strength.jpg

    View full-size slide

  26. “That just works?!
    I only wrote 2 lines!”
    - Me

    View full-size slide

  27. Easy to know your way
    around projects.

    View full-size slide

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






    View full-size slide

  29. Ember is
    packed with
    conventions!
    #

    View full-size slide

  30. Conventions in Ember
    come from many
    real-world apps.

    View full-size slide

  31. I asked for community
    favorites.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. #
    Let’s talk
    application state.

    View full-size slide

  36. Buckets of things
    that occur in your app.
    Add to cart Pay
    View item View cart

    View full-size slide

  37. User moves
    between buckets.
    Add to cart Pay
    ' ' '
    View item View cart

    View full-size slide

  38. When moving buckets,
    things can happen.
    Add to cart View cart
    ' ' ( ' '

    View full-size slide

  39. Add to cart View cart
    ' '
    )
    When moving buckets,
    things can happen.

    View full-size slide

  40. Inform your user
    about this!

    View full-size slide

  41. #
    Things that happen
    between states are
    called substates.

    View full-size slide

  42. #
    How do substates
    work in Ember?

    View full-size slide

  43. Ember generates loading
    and error substates
    for all routes.

    View full-size slide

  44. // 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

    View full-size slide

  45. No conventions
    =
    No Ember Inspector!

    View full-size slide

  46. Loading substates

    View full-size slide

  47. Route transitions.
    *
    /posts
    *
    /posts/2
    '
    + model:

    View full-size slide

  48. If model hooks
    return normal objects,
    transition completes
    immediately.

    View full-size slide

  49. If model hooks return
    a promise,
    transition will wait.

    View full-size slide

  50. Route transitions.
    *
    /posts
    *
    /posts/2
    ' ' API
    '
    + model:

    View full-size slide

  51. Transitions that wait
    are lazy. (default)

    View full-size slide

  52. If you provide loading
    route/template, they
    become eager.

    View full-size slide

  53. (demo lazy / eager)

    View full-size slide

  54. The router automatically
    transitions to/from
    the loading substate.

    View full-size slide

  55. The router automatically
    transitions to an error
    substate if there is an
    error/rejected promise.

    View full-size slide

  56. #
    How do you
    implement substates?

    View full-size slide

  57. Now things
    get fun.

    View full-size slide

  58. > ember g template loading
    Root Loading Template

    View full-size slide

  59. Any loading substate will
    show this template unless
    overridden.

    View full-size slide

  60. > ember g template albums/loading
    Sibling Loading Template

    View full-size slide

  61. Loading substate will show
    this template instead of the
    root.

    View full-size slide

  62. > ember g template comments/loading
    Nested Loading Template
    > ember g template album/loading

    View full-size slide

  63. Loading substate will show
    comment loading template.

    View full-size slide

  64. To render substate templates into
    named outlets, override the route
    and the renderTemplate hook.
    Named Outlets

    View full-size slide

  65. // routes/albums/loading.js
    export default Ember.Route.extend({
    renderTemplate: function() {
    this.render({ outlet: 'albums'});
    }
    });
    Named Outlets

    View full-size slide

  66. > ember g route albums/index
    Use Actions
    Loading Sibling

    View full-size slide

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

    View full-size slide

  68. Remember, route actions
    bubble up to parents
    until handled.

    View full-size slide

  69. Implement templates/routes
    the same way
    as loading substates.
    Error Substates

    View full-size slide

  70. Use {[statusText}}, {{message}} or
    {{stack}} for extra info in
    development.
    Error Substates

    View full-size slide

  71. Error Substates
    // error.hbs
    Mike is sorry. We’ve told him about the
    error.
    {{#if development}}
    Hey dev. Here’s some more info:
    {{message}}
    {{stack}}
    {{/if}}

    View full-size slide

  72. 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");
    });

    View full-size slide

  73. Use Actions
    Error
    // routes/application.js
    actions: {
    error: {
    if (tooManyErrors) {
    userHavingBadTime();
    }
    return true;
    }
    }
    &
    return true to use default
    substate behavior

    View full-size slide

  74. Implement Substates
    Override template/route
    Event hooks
    Nested template/route
    Named outlets
    Error Substate Bonuses





    View full-size slide

  75. #
    Feedback about
    loading or errors is
    critical.

    View full-size slide

  76. #
    Loading / Error
    substates will make
    development easier.

    View full-size slide

  77. Let conventions
    be your guide.

    View full-size slide

  78. Thanks!
    cball_
    ! cball.me
    "

    View full-size slide