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
Tweet

More Decks by Balint Erdi

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Why JSON API?

    View full-size 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 full-size slide

  6. CoC for APIs

    View full-size slide

  7. Covering The Basics

    View full-size 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 full-size 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 full-size 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 full-size slide

  11. Covering the basics (ED)
    • store.peekAll(‘band’)

    • never triggers a reload

    • returns the records already in the store

    View full-size slide

  12. Covering the basics (ED)
    • shouldBackgroundReloadRecord

    • shouldBackgroundReloadAll

    • configurable on the adapter

    View full-size 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 full-size slide

  14. Covering the basics (Ember)
    • Returning a promise in the model hook
    “blocks” rendering the page

    • `findRecord`, `findAll`, `query` all return
    promises

    View full-size slide

  15. application
    bands
    bands.band.songs
    bands.band

    View full-size slide

  16. Balint Erdi
    @baaz

    balinterdi.com

    Ember.js consultant

    View full-size slide

  17. Case Studies

    View full-size slide

  18. Fetching
    Relationship Data

    View full-size slide

  19. Lazy Fetching

    View full-size slide

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

    View full-size slide

  21. Pre-loading
    the relationship

    View full-size slide

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

    View full-size slide

  23. 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 full-size slide

  24. Side-loading

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. Honorable mention:
    References API
    (ED 2.5)

    View full-size slide

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

    View full-size slide

  30. Searching

    on the
    Backend

    View full-size slide

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

    View full-size slide

  32. Does a global search

    View full-size slide

  33. Use a JSON API filter
    and query the
    relationship

    View full-size slide

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

    View full-size slide

  35. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

  38. “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 full-size slide

  39. “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 full-size slide

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

    View full-size slide

  41. Indicating ongoing
    background record
    fetching

    View full-size slide

  42. Eager return

    View full-size slide

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

    View full-size slide

  44. Use
    ember-concurrency

    View full-size slide

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

    View full-size slide

  46. https://balinterdi.com/
    emberconf

    View full-size slide

  47. 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 full-size slide