Data Loading Patterns with JSON API

The talk I gave at EmberConf 2017, on 03/28/2017

Transcript

1. Data Loading Patterns EmberConf 2017, Portland 03/28/2017
2. Data Loading Patterns with JSON API EmberConf 2017, Portland 03/28/2017
3. This talk is going to be … • A series of prevalent use cases • Rich in code examples • Packed with actionable advice
4. Why JSON API?
5. What kind of API? • Backend dev: “What kind of API are we going to use?” • Me: “JSON API” • We: “Let’s start working then”
6. CoC for APIs
7. Covering The Basics
8. Covering the basics (ED) • store.findRecord(‘band’, 1) • if the record is in the store => returns it, and re-fetches it in the background • if the record is not in the store => returns a promise
9. Covering the basics (ED) • store.findAll(‘band’) • if >= 1 record in the store => returns them and triggers a refetch in the bg. • if there is no record in the store => returns a promise to fetch all of them
10. Covering the basics (ED) • store.peekRecord(‘band’, 1) • never triggers a reload • returns the record if it’s in the store • returns null if it’s not
11. Covering the basics (ED) • store.peekAll(‘band’) • never triggers a reload • returns the records already in the store
12. Covering the basics (ED) • shouldBackgroundReloadRecord • shouldBackgroundReloadAll • configurable on the adapter
13. Covering the basics (Ember) • The model hooks are resolved top-down • A child route is not entered before the hooks are run for its parent
14. Covering the basics (Ember) • Returning a promise in the model hook “blocks” rendering the page • `findRecord`, `findAll`, `query` all return promises
15. The app
16. application bands bands.band.songs bands.band
17. Balint Erdi @baaz balinterdi.com Ember.js consultant
18. Case Studies
19. Fetching Relationship Data
20. Lazy Fetching
23. Pros & cons • Simple, works out of the box • On-demand data fetching • Might trigger N requests • Disturbing flicker
24. Pre-loading the relationship
27. Move relationship data fetching to the route’s model hook if you want to block rendering
28. Pros & cons • Better UX than the lazy fetching scenario • Might still trigger N requests • RSVP.hash in the model hook is considered an anti-pattern
29. Side-loading
30. “An endpoint MAY also support an include request parameter to allow the client to customize which related resources should be returned.”
35. Why is there a flicker? Shouldn’t the songs be side-loaded and only then the page rendered?
39. Pros & cons • We leverage JSON:API • Explicit control over fetching relationship data • Delays the rendering of the band template
40. Honorable mention: References API (ED 2.5)
41. Data loading strategy should be part of the design process
42. Searching
 on the Backend
43. “The filter query parameter is reserved for filtering data. Servers and clients SHOULD use this key for filtering operations.”
46. Does a global search
49. Use a JSON API filter and query the relationship
50. Sorting
51. “An endpoint MAY support requests to sort the primary data with a sort query parameter. The value for sort MUST represent sort fields.”
52. “The sort order for each sort field MUST be ascending unless it is prefixed with a minus (U+002D HYPHEN-MINUS, “-“), in which case it MUST be descending.”
56. Use the JSON API `sort` parameter without transform
57. Pagination
58. “A server MAY choose to limit the number of resources returned in a response to a subset (“page”) of the whole set available.”
59. “Note: JSON API is agnostic about the pagination strategy used by a server. (…) The page query parameter can be used as a basis for any of these strategies.”
60. “Where specified, a meta member can be used to include non-standard meta- information. The value of each meta member MUST be an object (a “meta object”).”
65. Use JSON API’s `page` parameters and pagination meta data
66. Indicating ongoing background record fetching
72. Eager return
75. Deconstruct the background data fetching process to have more control over the loading process
76. Use ember-concurrency
78. No manual loading flag setting, run loop scheduling and reload option setting
79. https://balinterdi.com/ emberconf
81. References • Rock and Roll with Ember book • {json:api} specification • JSONAPI::Resources docs site • ember-concurrency or How I Learned to Stop Worrying and Love the Task on LinkedIn Enginnering • Lessons learned from four years with Ember by Ryan Toronto