Data Loading Patterns & Strategies
Master the art of data loading in Ember.js
Loading data is an essential part of rich browser applications. It might seem easy on the surface but if you consider different angles and the implications of the “it just works” approach, you’ll realize you have to give your data loading strategy the thought it deserves and make it an integral part of your design process.
Why care about this?
How to fetch data for your Ember app is a neglected topic, compared to how much of the design of client-side apps is about providing data at the right time and in the right format while not putting too much load on your back-end. Also, there are data loading patterns that almost all apps need in some form (for example sorting, searching and pagination) and mastering these will make you a better Ember developer.
By walking through typical scenarios you’ll learn how to leverage the functionalities Ember provides so that you’ll be quicker in implementing them while introducing less bugs. At the same time, you’ll be working with and not against your back-end, leveraging its features and minimizing your load.
The flow of the workshop
We’ll go through and implement common data loading use cases to gain a deeper understanding of them and to find the technique that fits the given UI scenario. You’ll leave with new knowledge about how you can leverage the tools Ember and a JSON API compliant backend provides you [link to JSON API objection]. The questions you’ll have an answer for by the end of the workshop include (but are not restricted to):
- How do I make it so that the page doesn’t flicker when related data is loaded?
- How can I reduce the number of ajax requests fired to load data for a page?
- How can I leverage JSON API to do that?
- How do I show to the user that data is being loaded if it’s done in the background?
- How do I search in related resources (as opposed to globally)?
- How do I avoid triggering the N+1 request problem on the back-end?
A lab guide is prepared for you that details all the data loading scenarios we’ll implement during the workshop. At the start of each lab session, I’ll first explain the Ember and JSON API knowledge that is relevant to the use case. Then, we’ll implement an example using that knowledge in TDD (aka. test-first) fashion. A set of tests will already be made for you, you “just” have to make them pass as you go implementing the solution. Finally, we’ll look at the solution and I’ll answer any questions that have come up.
We’ll then move on to the next use case and follow the same scenario.
If I were to draw a graph of this flow (turns out I already did), it’d be something like the following:
The agenda
We're going to cover the following data loading use cases:
- Loading relationships
- Pre-loading related resources in the model hook
- Synchronous relationships
- Including related resources in the response (aka. side-loading)
- Using Ember Data references
- Sorting
- Searching
- Globally (anything that matches a certain string fragment)
- Debounced, using ember-concurrency
- Within items of a relationship
- Pagination
- Page-based
- Infinity scrolling
- Partial loading
- Using JSON API sparse fieldsets
- Indicating data loading to the user
- Using an ember-concurrency task in the model hook
- Indicating background data loading using ember-concurrency
Get the gist
If you want to skip ahead a bit, learn the features Ember (and Ember Data) provides that make these scenarios possible and gain some insight into how they can be accomplished, just input your email address below and download a short paper.
Post-workshop knowledge reinforcement
That’s quite a mouthful and sounds very scientific but beats my other idea for the section title, which was “Homework”. Speaking of science, it’s now an established fact that new knowledge is retained better when repeated over time. For this reason, starting a few days after the workshop you’ll work on another application that include some of the data loading scenarios we've learned during the workshop.
You’ll submit your work as a PR which I’ll review and suggest improvements. All along the way, I’ll be available on Slack to help you if you have any questions.
This is only available in the WiFI package
Basic knowledge about how the pieces in Ember work together is required (what is a route, a template and a controller). No knowledge about data loading, JSON API or Ember Data adapters is assumed as these will be covered in the lab guides. On the technical side, you’ll need a computer with a recent version of Ember CLI and git installed on it.
Is this workshop for you?
This workshop is for you if you want to learn about how to implement basic and advanced data loading scenarios in Ember and have wondered about best practices for these. You’ll also learn about the shortcomings of the “it just works” strategy for some scenarios.
This workshop is probably not for you if you’re just starting out with Ember or if you’re already a certified data loader.
When and where will this workshop take place?
The workshop will be held in January 2019 and is fully online.
What do you get?
You can choose from two different packages:
3G package
- A ticket for the workshop
- Access to the lab guides we'll use during the workshop
- Access to the Github repository used for the workshop
- My “Data Loading Patterns in Ember” mini-book extracted from my EmberConf’17 presentation (and then expanded)
- A $X discount for EmberMap
Price: $200
WiFi package
Includes everything in the 3G Package plus:
- "Post-workshop knowledge reinforcement” – extra exercises to solidify your knowledge
- Your homework reviewed by me
- Access to Slack for ~1 week after the workshop to ask questions (including during the homework period)
Price: $250
Sounds good, but ...
-
Some of these techniques leverage a JSON API compliant backend. What if mine isn't JSON API?
Most of the leverage comes from JSON API having a standardized way of doing things (like sending back related resources). Your API might already do the same and definitely can be made to do the same if it doesn't. Finding out how it does it (or implementing it if it doesn’t) requires more work (mostly on the back-end), but the techniques explained in the workshop are still useful.
-
What if it turns out the workshop wasn’t what I was looking for?
I provide a 30-day, no strings attached money-back guarantee.
-
What if I'm not able to follow along the exercises?
We’ll leave some time at the end of each section for people to catch up. The Github repository has a commit for each section, so moving to the start of the next scenario is as easy as doing a git checkout.
About me
