Data Loading Patterns with JSON API

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

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