Harness the power of the official persistence library of the Ember.js framework.
We’ll cover all of the basics you need to know in order to make ember-data the best part of working with your back end, diving deep into adapters, serializers and the store.
1 — JSON-API
JSON-API is a spec for JSON contracts between APIs and their clients. Because ember-data uses JSON-API by default, and as a guide for its internal data structures, it’s useful to be familiar with it when working with ember-data.
If you’ve ever argued with your team about the way your JSON responses should be formatted, JSON API can be your anti-bikeshedding tool.
By following shared conventions, you can increase productivity, take advantage of generalized tooling, and focus on what matters: your application.
Clients built around JSON API are able to take advantage of its features around efficiently caching responses, sometimes eliminating network requests entirely.Agenda
Basic Objects, Errors and Metadata
We’ll work through some examples of how basic objects are defined, according to the JSON-API standard.
Relationships & Compound Documents
In JSON-API, we can define relationships in multiple ways:
- Including related records directly in the JSON
- Providing explicit references for each related record (i.e., a type and id)
- Providing a URL for retrieving related records at a later time
We’ll look at examples for each, and discuss use of the
include queryParam for requesting inclusion of related records.
2 — Building Requests
Ember-data adapters are responsible for building URLs, and making other customizations to outgoing requests. We’ll begin by establishing the URL & JSON contracts that ember-data has turnkey adapters for, and then explore a wide range of customization hooks that you can use to make ember-data work with your API.Agenda
Ember-data ships with three types of adapters:
DS.JSONAPIAdapterand optionally, by way of an officially-supported addon
We’ll look at the kinds of APIs these types of adapters are designed to work with, and the types of functionality they each provide.
Request Types & Customizing URL Building
We often need to customize the way URLs are built for creating, updating, deleting or retrieving resources. We’ll study ember-data’s 10 request types, each of which comes with its own url-building customization hook. We’ll examine several examples in detail:
- Building URLs for hierarchical resources
- Using the ember-data snapshot API
- Moving queryParams to path params
Finally, we’ll look at the caching ramifications of different types of requests, and provide some battle-tested patterns for adapter customization.
Exercise: Building Adapters for Awful APIs
I’ve got four apps that will work properly only when the ember-data adapter layer is sufficiently customized. Separate into four teams, and each team will fix one app using the adapter strategies we’ve outlined this morning. Each group will present their solution(s) to the rest of the group when complete.
Break for Lunch
3 — Massaging JSON
Ember-data serializers are the tool for transforming your API’s representation of data into what your ember app expects. We’ll examine several common use cases for massaging JSON, including:
- changing the names of properties
- normalizing property key format
- synthesizing client-side IDs
Ember-data ships with the following types of serializers:
and optionally, by way of an officially-supported addon
We’ll study each of these, and explore the kinds of JSON they’re designed to work with.
Functional JSON Massaging
Exercise: Building Serializers for Awful JSON
I’ve added some new features to the apps we wrote adapters for, earlier today. The JSON for these new records doesn’t align well with what ember-data expects to see by default. Split up into teams, and work together to massage this JSON until all tests pass. Each group will present their solution to the rest of the workshop.
4 — The Store
Ember-data’s store is the main API surface that developers interact with, in order to initiate requests for data.Agenda
Peek, Fetch or Find
We’ll explore these three ways of retrieving data from the ember-data’s store, providing practical real-world use cases for each.
Ember Fastboot, the framework’s server-side rendering technology, comes with a feature called the shoebox store whereby JSON data can be embedded in the server-rendered HTML, and immediately injected into the client-side ember-data store upon app boot. We’ll study low-level use of the shoebox directly, and then introduce an addon that automates shoebox/ember-data integration.
Exercise: Harness the Power of Caching
I have an app that requires use of a really slow API, so any use of clever caching will dramatically improve the end user’s experience. By employing the fastboot store, and ember-data’s client-side caching strategies, reduce the time to first [meaningful] interaction as much as possible.
5 — Custom Transforms
By specifying custom ember-data transforms, we can define new types of attributes on our model. We’ll build our own “color”, “array” and “object” custom ember-data transforms.Agenda
Transforms vs. Other Options
Ember-data transforms allow us to define other types of model attributes. We’ll look at the practical differences between using transforms, compared to computed properties or serializer logic. Then, we’ll finish by defining the parts needed for a complete ember-data transform, and go through a non-trivial example together.
Exercise: Three Transforms
Build three transforms so that you can access some interesting API data on our large example app:
- RGB color
With reasonable unit tests for at least one of the three. Ensure that you handle important edge cases (like null value) appropriately.