$30 off During Our Annual Pro Sale. View Details »

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. 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

  21. None
  22. None
  23. Pros & cons • Simple, works out of the box

    • On-demand data fetching • Might trigger N requests • Disturbing flicker
  24. Pre-loading the relationship

  25. None
  26. None
  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.”
  31. None
  32. None
  33. None
  34. None
  35. Why is there a flicker? Shouldn’t the songs be side-loaded

    and only then the page rendered?
  36. None
  37. None
  38. None
  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.”
  44. None
  45. None
  46. Does a global search

  47. None
  48. None
  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.”
  53. None
  54. None
  55. None
  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”).”
  61. None
  62. None
  63. None
  64. None
  65. Use JSON API’s `page` parameters and pagination meta data

  66. Indicating ongoing background record fetching

  67. None
  68. None
  69. None
  70. None
  71. None
  72. Eager return

  73. None
  74. None
  75. Deconstruct the background data fetching process to have more control

    over the loading process
  76. Use ember-concurrency

  77. None
  78. No manual loading flag setting, run loop scheduling and reload

    option setting
  79. https://balinterdi.com/ emberconf

  80. None
  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