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
2. Hi cball_ ! cball.me "
3. What We’ll Cover Why we need conventions Conventions in Ember Application States / Substates Substates in Ember How to implement them # # # # #
4. Why do we need conventions? #
5. We often encounter hard problems.
6. Even simple tasks are hard to get right.
7. What if some of these decisions could be made for you? correctly ^
8. Conventions.
9. “Conventions are too restrictive!”
10. The “Wild West” put files anywhere! name anything! fetch data your way! byo build tools! complete control!
11. Freedom.
12. The “Wild West” real ^
14. How do we avoid the mess?
15. Extract common pain points.
16. Use them to create conventions.
17. Let developers focus on the hard stuff.
18. Bring organization.
19. How?
20. The “Collective Mind”
21. A naming structure Asset concatenation Ways to install addons Serialize/Deserialize JSON A folder structure Asset minification Front-end App Needs
22. ◦
23. Your app is not a special flower.
24. Spend the bulk of your time where it counts.
25. Rails is proof that this works
26. More benefits please.
27. Conventions breed efficiency.
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/
29. Conventions give you superpowers. http://realitypod.com/wp-content/uploads/2011/03/super-strength.jpg
30. “That just works?! I only wrote 2 lines!” - Me
31. Easy to know your way around projects.
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. ⋆ ⋆ ⋆ ⋆ ⋆ ⋆
33. Ember is packed with conventions! #
34. Conventions in Ember come from many real-world apps.
35. I asked for community favorites.
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.
37. Powerful.
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
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.
40. # Let’s talk application state.
41. Buckets of things that occur in your app. Add to cart Pay View item View cart
42. User moves between buckets. Add to cart Pay ' ' ' View item View cart
43. When moving buckets, things can happen. Add to cart View cart ' ' ( ' '
44. Add to cart View cart ' ' ) When moving buckets, things can happen.
45. Inform your user about this!
46. = bad.
47. # Things that happen between states are called substates.
48. # How do substates work in Ember?
49. Ember generates loading and error substates for all routes.
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
52. No conventions = No Ember Inspector!
53. Loading substates
54. Route transitions. * /posts * /posts/2 ' + model:
55. If model hooks return normal objects, transition completes immediately.
56. If model hooks return a promise, transition will wait.
57. Route transitions. * /posts * /posts/2 ' ' API ' + model:
58. Transitions that wait are lazy. (default)
59. If you provide loading route/template, they become eager.
60. (demo lazy / eager)
61. The router automatically transitions to/from the loading substate.
62. Remember ) ?
63. The router automatically transitions to an error substate if there is an error/rejected promise.
64. # How do you implement substates?
65. Now things get fun.
66. > ember g template loading Root Loading Template
67. Any loading substate will show this template unless overridden.
68. (demo)
69. > ember g template albums/loading Sibling Loading Template
70. Loading substate will show this template instead of the root.
71. (demo)
72. > ember g template comments/loading Nested Loading Template > ember g template album/loading
73. Loading substate will show comment loading template.
74. (demo)
75. To render substate templates into named outlets, override the route and the renderTemplate hook. Named Outlets
76. // routes/albums/loading.js export default Ember.Route.extend({ renderTemplate: function() { this.render({ outlet: 'albums'}); } }); Named Outlets
77. > ember g route albums/index Use Actions Loading Sibling
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.
79. (demo)
80. Remember, route actions bubble up to parents until handled.
81. Implement templates/routes the same way as loading substates. Error Substates
82. Use {[statusText}}, {{message}} or {{stack}} for extra info in development. Error Substates
83. 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}}
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"); });
85. (demo)
86. Use Actions Error // routes/application.js actions: { error: { if (tooManyErrors) { userHavingBadTime(); } return true; } } & return true to use default substate behavior
87. Implement Substates Override template/route Event hooks Nested template/route Named outlets Error Substate Bonuses ⋆ ⋆ ⋆ ⋆ ⋆
88. # Feedback about loading or errors is critical.
89. # Loading / Error substates will make development easier.
90. Let conventions be your guide.
91. Thanks! cball_ ! cball.me "