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

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