Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Data Loading Patterns in Ember

Balint Erdi
October 28, 2016

Data Loading Patterns in Ember

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

Balint Erdi

October 28, 2016
Tweet

More Decks by Balint Erdi

Other Decks in Technology

Transcript

  1. This talk is going to be … • A series

    of prevalent use cases • Rich in code examples • Packed with actionable advice
  2. 1. Aquincum 2. Pannonia 3. Hungaricum There was a Roman

    settlement where today there is Budapest. What was its name back then?
  3. 1. Aquincum 2. Pannonia 3. Hungaricum There was a Roman

    settlement where today there is Budapest. What was its name back then?
  4. 1. 1918 2. 1686 3. 1873 Budapest came into being

    as the unification of Buda, Óbuda and Pest. When?
  5. 1. 1918 2. 1686 3. 1873 Budapest came into being

    as the unification of Buda, Óbuda and Pest. When?
  6. 1. 44 2. 26 3. 34 How many letters does

    the Hungarian alphabet have?
  7. 1. 44 2. 26 3. 34 How many letters does

    the Hungarian alphabet have?
  8. 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?
  9. 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?
  10. 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?
  11. 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?
  12. 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?
  13. 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?
  14. 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?
  15. 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?
  16. 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?
  17. 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
  18. 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
  19. 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
  20. Resolving model hooks • The model hooks are resolved top-down

    • A child route is not entered before the hooks are run for its parent
  21. “Blocking” template rendering • Returning a promise in the model

    hook “blocks” rendering the page • `findRecord`, `findAll`, `query` all return promises
  22. Pros & cons • Simple, works out of the box

    • No superfluous data fetching • Disturbing flicker
  23. Pros & cons • Better UX than the lazy fetching

    scenario • RSVP.hash in the model hook is considered an anti-pattern
  24. 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’ } })`
  25. References • Rock and Roll with Ember book • Lessons

    learned from four years with Ember by Ryan Toronto • ember-concurrency