Data Loading Patterns in Ember

This is the presentation I gave at EmberFest 2016, in Budapest, on 10/28/2016

Transcript

1. Data Loading Patterns EmberFest, Budapest, 10/28/2016
4. This talk is going to be … • A series of prevalent use cases • Rich in code examples • Packed with actionable advice
5. Ember Data: 60% Ember: 30% json:api: 10%
6. Covering the basics
10. 1. Aquincum 2. Pannonia 3. Hungaricum There was a Roman settlement where today there is Budapest. What was its name back then?
11. 1. Aquincum 2. Pannonia 3. Hungaricum There was a Roman settlement where today there is Budapest. What was its name back then?
12. 1. 1918 2. 1686 3. 1873 Budapest came into being as the unification of Buda, Óbuda and Pest. When?
13. 1. 1918 2. 1686 3. 1873 Budapest came into being as the unification of Buda, Óbuda and Pest. When?
14. 1. 44 2. 26 3. 34 How many letters does the Hungarian alphabet have?
15. 1. 44 2. 26 3. 34 How many letters does the Hungarian alphabet have?
16. Piece of cake.
17. Ember Data?
18. 1. Returns null 2. Returns an Ember.ObjectProxy, sends a request for that band and eventually resolves with the returned record 3. Returns undefined What does store.findRecord(‘band’, 1) do if the record is NOT in the store?
19. 1. Returns null 2. Returns an Ember.ObjectProxy, sends a request for that band and eventually resolves with the returned record 3. Returns undefined What does store.findRecord(‘band’, 1) do if the record is NOT in the store?
20. 1. Returns an Ember.ObjectProxy with the record and triggers a background refetching of the record 2. Returns an Ember.ObjectProxy with the record 3. Returns the record What does store.findRecord(‘band’, 1) do if the record is in the store?
21. 1. Returns an Ember.ObjectProxy with the record and triggers a background refetching of the record 2. Returns an Ember.ObjectProxy with the record 3. Returns the record What does store.findRecord(‘band’, 1) do if the record is in the store?
22. 1. Returns an array with the bands in the store 2. Returns an Ember.ArrayProxy with the records in the store 3. Returns an Ember.ArrayProxy with the records in the store and triggers a background refetching of all bands What does store.findAll(‘band’) do if there is at least one band in the store?
23. 1. Returns an array with the bands in the store 2. Returns an Ember.ArrayProxy with the records in the store 3. Returns an Ember.ArrayProxy with the records in the store and triggers a background refetching of all bands What does store.findAll(‘band’) do if there is at least one band in the store?
24. 1. Returns an Ember.ArrayProxy with the bands in the store and triggers a background request to fetch all of them 2. Returns an Ember.ArrayProxy with the bands in the store 3. Returns an array with the bands in the store What does store.peekAll(‘band’) do if there is at least one band in the store?
25. 1. Returns an Ember.ArrayProxy with the bands in the store and triggers a background request to fetch all of them 2. Returns an Ember.ArrayProxy with the bands in the store 3. Returns an array with the bands in the store What does store.peekAll(‘band’) do if there is at least one band in the store?
26. 1. Returns an Ember.ArrayProxy and triggers a request to fetch all bands in the background 2. Returns undefined 3. Returns an Ember.ArrayProxy backed by an empty array What does store.peekAll(‘band’) do if there are NO bands in the store?
27. What does store.peekAll(‘band’) do if there are NO bands in the store? 1. Returns an Ember.ArrayProxy and triggers a request to fetch all bands in the background 2. Returns undefined 3. Returns an Ember.ArrayProxy backed by an empty array
28. shouldBackgroundReload* • shouldBackgroundReloadRecord • shouldBackgroundReloadAll • configurable on the adapter, true by default
29. What does the model hook return if it’s not defined? 1. The value its parent route returned 2. undefined 3. An instance of FieldServerTaskMappingPrototypePool
30. What does the model hook return if it’s not defined? 1. The value its parent route returned 2. undefined 3. An instance of FieldServerTaskMappingPrototypePool
31. Resolving model hooks • The model hooks are resolved top-down • A child route is not entered before the hooks are run for its parent
32. “Blocking” template rendering • Returning a promise in the model hook “blocks” rendering the page • `findRecord`, `findAll`, `query` all return promises
34. Balint Erdi @baaz balinterdi balinterdi.com balint@balinterdi.com Rock and Roll with Ember.js
35. Case studies
36. application bands bands.band.songs bands.band
37. Reload a record in the background
40. Why doesn’t the band name get updated?
42. The greatest Ember gotcha ever.
44. `shouldBackgroundReloadRecord` is great and it just works
45. Don’t pass in a model object to {{link-to …}}
47. Reload a collection in the background
50. `shouldBackgroundReloadAll` is great and it just works
51. Fetching relationship data
52. Lazy fetching
55. Pros & cons • Simple, works out of the box • No superfluous data fetching • Disturbing flicker
56. Pre-loading the async relationship
59. Move relationship data fetching to the route’s model hook if you want to block rendering
60. Pros & cons • Better UX than the lazy fetching scenario • RSVP.hash in the model hook is considered an anti-pattern
61. Side-loading
66. Why is there a flicker? Shouldn’t the songs be side-loaded and only then the page rendered?
71. Searching on the backend
75. json:api compliance • filter[field]=value • json:api libraries have support for it • `store.query(‘song’, { filter: { title: ‘smoke’ } })` • `band.get(‘songs’).query({ filter: { title: ‘smoke’ } })`
77. Indicating ongoing record fetching
81. Use the `loading` event to customize the UX for indicating loading
83. Indicating ongoing background record fetching
91. Leverage `findAll(…, { reload: true })` to have more control over the loading process
92. Learn ember-concurrency
94. Director’s cut • Partial loading records • Symmetrical relationships
95. balinterdi/ember-data-patterns
97. References • Rock and Roll with Ember book • Lessons learned from four years with Ember by Ryan Toronto • ember-concurrency