Blog

We write about Ember.js, Ruby on Rails as well as Elixir and Phoenix.

Front End Development

Ember-Data Basics

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
Module 1 Duration: 60 minutes

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
JSON-API Duration: 30 minutes
9:00
Basic Objects, Errors and Metadata

We’ll work through some examples of how basic objects are defined, according to the JSON-API standard.

JSON-API Duration: 30 minutes
9:30
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
Module 2 Duration: 210 minutes

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
Building Requests Duration: 45 minutes
10:00
Built-in Adapters

Ember-data ships with three types of adapters:

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.

Building Requests Duration: 45 minutes
10:45
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.

Building Requests Duration: 60 minutes
11:30
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.

Building Requests Duration: 60 minutes
12:30
Lunch

Break for Lunch

3
Module 3 Duration: 150 minutes

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
Agenda
Massaging JSON Duration: 45 minutes
13:30
Built-In Serializers

Ember-data ships with the following types of serializers:

  • DS.Serializer
  • DS.RESTSerializer
  • DS.JSONSerializer
  • DS.JSONAPISerializer

and optionally, by way of an officially-supported addon

  • DS.ActiveModelSerializer

We’ll study each of these, and explore the kinds of JSON they’re designed to work with.

Massaging JSON Duration: 45 minutes
14:15
Functional JSON Massaging

We rarely have the luxury of working with ideal JSON contracts, and often need to write code to transform between our API’s representation of a record, to our web client’s representation. When done haphazardly, this part of your app can become a brittle web of spaghetti code. I’ll provide some suggestions for using easily-testable and re-usable pure functions and JavaScript’s built-in higher order functions to massage your JSON, leaving it as a well-organized and easy-to-understand pipeline of function calls.

Massaging JSON Duration: 60 minutes
15:00
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
Module 4 Duration: 60 minutes

4 — The Store

Ember-data’s store is the main API surface that developers interact with, in order to initiate requests for data.

Agenda
The Store Duration: 30 minutes
16:00
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.

The Store Duration: 30 minutes
16:30
Fastboot's Shoebox

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.

The Store Duration: 30 minutes
17:00
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
Module 5 Duration: 90 minutes

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
Custom Transforms Duration: 30 minutes
17:30
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.

Custom Transforms Duration: 60 minutes
18:00
Exercise: Three Transforms

Build three transforms so that you can access some interesting API data on our large example app:

  • RGB color
  • Array
  • Object

With reasonable unit tests for at least one of the three. Ensure that you handle important edge cases (like null value) appropriately.

Do you Have a Project in Mind?