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

Data Loading Patterns with JSON API

Data Loading Patterns with JSON API

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

Balint Erdi

March 28, 2017

More Decks by Balint Erdi

Other Decks in Technology


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

    of prevalent use cases • Rich in code examples • Packed with actionable advice
  2. What kind of API? • Backend dev: “What kind of

    API are we going to use?” • Me: “JSON API” • We: “Let’s start working then”
  3. 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
  4. 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
  5. 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
  6. Covering the basics (ED) • store.peekAll(‘band’) • never triggers a

    reload • returns the records already in the store
  7. 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
  8. Covering the basics (Ember) • Returning a promise in the

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

    • On-demand data fetching • Might trigger N requests • Disturbing flicker
  10. 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
  11. “An endpoint MAY also support an include request parameter to

    allow the client to customize which related resources should be returned.”
  12. Pros & cons • We leverage JSON:API • Explicit control

    over fetching relationship data • Delays the rendering of the band template
  13. “The filter query parameter is reserved for filtering data. Servers

    and clients SHOULD use this key for filtering operations.”
  14. “An endpoint MAY support requests to sort the primary data

    with a sort query parameter. The value for sort MUST represent sort fields.”
  15. “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.”
  16. “A server MAY choose to limit the number of resources

    returned in a response to a subset (“page”) of the whole set available.”
  17. “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.”
  18. “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”).”
  19. 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