Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Data Loading Patterns with JSON API
Search
Balint Erdi
March 28, 2017
Technology
5
1.4k
Data Loading Patterns with JSON API
The talk I gave at EmberConf 2017, on 03/28/2017
Balint Erdi
March 28, 2017
Tweet
Share
More Decks by Balint Erdi
See All by Balint Erdi
Why you should consider Ember.js for your next project
balint
4
280
Data Loading Patterns in Ember
balint
1
190
Auth* in Ember apps with Torii
balint
1
290
(Somewhat) Complex Component Design – Ember.BP, 2015/02/11
balint
1
90
Complex Component Design in Ember
balint
0
370
Don't call me back - How Ember uses promises and how you can, too
balint
5
10k
Acceptance testing in Ember.js
balint
1
520
Unit testing in Ember.js
balint
0
74
Introduction to ember-data
balint
0
160
Other Decks in Technology
See All in Technology
木を見て森も見る-モジュールが織りなすプロダクトの森
kworkdev
PRO
0
300
KubeCon EU 2025 Recap - Kubernetes CRD Design for the Long Haul: Tips, Tricks, and Lessons Learned / Kubernetes Meetup Tokyo #70 / k8sjp70-crd-long-haul-recap
everpeace
0
110
Creative UIs with Compose: Kotlinconf 2025
chrishorner
0
130
計装を見直してアプリケーションパフォーマンスを改善させた話
donkomura
2
200
OCI Full Stack Disaster Recovery サービス概要
oracle4engineer
PRO
1
140
Cursorを全エンジニアに配布 その先に見据えるAI駆動開発の未来 / 2025-05-13-forkwell-ai-study-1-cursor-at-loglass
itohiro73
2
850
熱々🔥のUDN🍜を喰らえ❗マルチテナントもVM統合も思いのまま❗新機能で切り拓くk8sネットワークの未来
tsukaman
0
110
RubyKaigi NOC 近況 2025
sorah
3
1.2k
開発も運用もビジネス部門も! クラウドで実現する「つらくない」統制とセキュリティ / Effortless Governance and Security Enabled by the Cloud
kanny
1
130
Lakehouse в Лемана Тех. От архитектуры до оптимизации
emeremyanina1234
0
460
経済メディア編集部の実務に小さく刺さるAI / small-ai-with-editorial
nkzn
2
520
Next.jsと状態管理のプラクティス
uhyo
6
2.4k
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fireside Chat
paigeccino
37
3.4k
Designing for Performance
lara
608
69k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A better future with KSS
kneath
239
17k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Site-Speed That Sticks
csswizardry
6
560
The Pragmatic Product Professional
lauravandoore
33
6.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Transcript
Data Loading Patterns EmberConf 2017, Portland 03/28/2017
Data Loading Patterns with JSON API EmberConf 2017, Portland 03/28/2017
This talk is going to be … • A series
of prevalent use cases • Rich in code examples • Packed with actionable advice
Why JSON API?
What kind of API? • Backend dev: “What kind of
API are we going to use?” • Me: “JSON API” • We: “Let’s start working then”
CoC for APIs
Covering The Basics
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
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
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
Covering the basics (ED) • store.peekAll(‘band’) • never triggers a
reload • returns the records already in the store
Covering the basics (ED) • shouldBackgroundReloadRecord • shouldBackgroundReloadAll • configurable
on the adapter
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
Covering the basics (Ember) • Returning a promise in the
model hook “blocks” rendering the page • `findRecord`, `findAll`, `query` all return promises
The app
application bands bands.band.songs bands.band
Balint Erdi @baaz balinterdi.com Ember.js consultant
Case Studies
Fetching Relationship Data
Lazy Fetching
None
None
Pros & cons • Simple, works out of the box
• On-demand data fetching • Might trigger N requests • Disturbing flicker
Pre-loading the relationship
None
None
Move relationship data fetching to the route’s model hook if
you want to block rendering
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
Side-loading
“An endpoint MAY also support an include request parameter to
allow the client to customize which related resources should be returned.”
None
None
None
None
Why is there a flicker? Shouldn’t the songs be side-loaded
and only then the page rendered?
None
None
None
Pros & cons • We leverage JSON:API • Explicit control
over fetching relationship data • Delays the rendering of the band template
Honorable mention: References API (ED 2.5)
Data loading strategy should be part of the design process
Searching on the Backend
“The filter query parameter is reserved for filtering data. Servers
and clients SHOULD use this key for filtering operations.”
None
None
Does a global search
None
None
Use a JSON API filter and query the relationship
Sorting
“An endpoint MAY support requests to sort the primary data
with a sort query parameter. The value for sort MUST represent sort fields.”
“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.”
None
None
None
Use the JSON API `sort` parameter without transform
Pagination
“A server MAY choose to limit the number of resources
returned in a response to a subset (“page”) of the whole set available.”
“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.”
“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”).”
None
None
None
None
Use JSON API’s `page` parameters and pagination meta data
Indicating ongoing background record fetching
None
None
None
None
None
Eager return
None
None
Deconstruct the background data fetching process to have more control
over the loading process
Use ember-concurrency
None
No manual loading flag setting, run loop scheduling and reload
option setting
https://balinterdi.com/ emberconf
None
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