Data Loading Patterns with JSON API

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

Transcript

1. Data Loading
   Patterns
   EmberConf 2017, Portland
   03/28/2017
   

   View Slide

2. Data Loading
   Patterns
   with JSON API
   EmberConf 2017, Portland
   03/28/2017
   

   View Slide

3. This talk is going to be …
   • A series of prevalent use cases
   • Rich in code examples
   • Packed with actionable advice
   

   View Slide

4. Why JSON API?
   

   View Slide

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”
   

   View Slide

6. CoC for APIs
   

   View Slide

7. Covering The Basics
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. Covering the basics (ED)
    • store.peekAll(‘band’)
    
    • never triggers a reload
    
    • returns the records already in the store
    

    View Slide

12. Covering the basics (ED)
    • shouldBackgroundReloadRecord
    
    • shouldBackgroundReloadAll
    
    • configurable on the adapter
    

    View Slide

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
    

    View Slide

14. Covering the basics (Ember)
    • Returning a promise in the model hook
    “blocks” rendering the page
    
    • `findRecord`, `findAll`, `query` all return
    promises
    

    View Slide

15. The app
    

    View Slide

16. application
    bands
    bands.band.songs
    bands.band
    

    View Slide

17. Balint Erdi
    @baaz
    
    balinterdi.com
    
    Ember.js consultant
    

    View Slide

18. Case Studies
    

    View Slide

19. Fetching
    Relationship Data
    

    View Slide

20. Lazy Fetching
    

    View Slide

21. View Slide

22. View Slide

23. Pros & cons
    • Simple, works out of the box
    • On-demand data fetching
    • Might trigger N requests
    • Disturbing flicker
    

    View Slide

24. Pre-loading
    the relationship
    

    View Slide

25. View Slide

26. View Slide

27. Move relationship data fetching
    to the route’s model hook if you
    want to block rendering
    

    View Slide

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
    

    View Slide

29. Side-loading
    

    View Slide

30. “An endpoint MAY also support an
    include request parameter to allow
    the client to customize which related
    resources should be returned.”
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. Why is there a flicker? Shouldn’t
    the songs be side-loaded and
    only then the page rendered?
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. Pros & cons
    • We leverage JSON:API
    • Explicit control over fetching relationship data
    • Delays the rendering of the band template
    

    View Slide

40. Honorable mention:
    References API
    (ED 2.5)
    

    View Slide

41. Data loading strategy
    should be part of the
    design process
    

    View Slide

42. Searching

    on the
    Backend
    

    View Slide

43. “The filter query parameter is
    reserved for filtering data.
    Servers and clients SHOULD use
    this key for filtering operations.”
    

    View Slide

44. View Slide

45. View Slide

46. Does a global search
    

    View Slide

47. View Slide

48. View Slide

49. Use a JSON API filter
    and query the
    relationship
    

    View Slide

50. Sorting
    

    View Slide

51. “An endpoint MAY support requests
    to sort the primary data with a sort
    query parameter. The value for sort
    MUST represent sort fields.”
    

    View Slide

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

    View Slide

53. View Slide

54. View Slide

55. View Slide

56. Use the JSON API `sort`
    parameter without transform
    

    View Slide

57. Pagination
    

    View Slide

58. “A server MAY choose to limit the
    number of resources returned in
    a response to a subset (“page”)
    of the whole set available.”
    

    View Slide

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

    View Slide

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

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. Use JSON API’s `page`
    parameters and pagination
    meta data
    

    View Slide

66. Indicating ongoing
    background record
    fetching
    

    View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. Eager return
    

    View Slide

73. View Slide

74. View Slide

75. Deconstruct the
    background data fetching process
    to have more control over the
    loading process
    

    View Slide

76. Use
    ember-concurrency
    

    View Slide

77. View Slide

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

    View Slide

79. https://balinterdi.com/
    emberconf
    

    View Slide

80. View Slide

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
    

    View Slide