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 Slide

  2. Hi
    cball_
    !
    cball.me
    "

    View Slide

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

    View Slide

  4. Why do we
    need conventions?
    #

    View Slide

  5. We often encounter
    hard problems.

    View Slide

  6. Even simple
    tasks are hard
    to get right.

    View Slide

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

    View Slide

  8. Conventions.

    View Slide

  9. “Conventions are
    too restrictive!”

    View Slide

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

    View Slide

  11. Freedom.

    View Slide

  12. The “Wild West”
    real
    ^

    View Slide

  13. View Slide

  14. How do we avoid
    the mess?

    View Slide

  15. Extract common
    pain points.

    View Slide

  16. Use them to create
    conventions.

    View Slide

  17. Let developers focus
    on the hard stuff.

    View Slide

  18. Bring
    organization.

    View Slide

  19. How?

    View Slide

  20. The “Collective Mind”

    View Slide

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

    View Slide



  22. View Slide

  23. Your app is not
    a special flower.

    View Slide

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

    View Slide

  25. Rails is proof that this works

    View Slide

  26. More benefits please.

    View Slide

  27. Conventions breed
    efficiency.

    View Slide

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

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

    View Slide

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

    View Slide

  31. Easy to know your way
    around projects.

    View Slide

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

  33. Ember is
    packed with
    conventions!
    #

    View Slide

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

    View Slide

  35. I asked for community
    favorites.

    View Slide

  36. 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 Slide

  37. Powerful.

    View Slide

  38. .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 Slide

  39. 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 Slide

  40. #
    Let’s talk
    application state.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. Inform your user
    about this!

    View Slide

  46. = bad.

    View Slide

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

    View Slide

  48. #
    How do substates
    work in Ember?

    View Slide

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

    View Slide

  50. // 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 Slide

  51. View Slide

  52. No conventions
    =
    No Ember Inspector!

    View Slide

  53. Loading substates

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  58. Transitions that wait
    are lazy. (default)

    View Slide

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

    View Slide

  60. (demo lazy / eager)

    View Slide

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

    View Slide

  62. Remember
    ) ?

    View Slide

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

    View Slide

  64. #
    How do you
    implement substates?

    View Slide

  65. Now things
    get fun.

    View Slide

  66. > ember g template loading
    Root Loading Template

    View Slide

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

    View Slide

  68. (demo)

    View Slide

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

    View Slide

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

    View Slide

  71. (demo)

    View Slide

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

    View Slide

  73. Loading substate will show
    comment loading template.

    View Slide

  74. (demo)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  78. 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 Slide

  79. (demo)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  83. 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 Slide

  84. 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 Slide

  85. (demo)

    View Slide

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

    View Slide

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





    View Slide

  88. #
    Feedback about
    loading or errors is
    critical.

    View Slide

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

    View Slide

  90. Let conventions
    be your guide.

    View Slide

  91. Thanks!
    cball_
    ! cball.me
    "

    View Slide