Series: Introduction to Ember Data 2.0

Ember Data 2.0-Overview of using Adapters and Serializers

Published on Jan 13, 2016

Adapters and Serializers are how data is communicated between your server and your Ember app. Adapters tell us which URL to use, and Serializers make sure the data is in the right format.

This episode gives an overview of Adapters and Serializers, showing what they do, how to set them up, the different types that you can use, and how to make sense of their public API.


Links

Code

You set your adapter by going to adapters/application.js and extending the adapter of your choice:

import DS from 'ember-data';

export default DS.RESTAdapter.extend({});

You do something similar with serializers in serializers/application.js:

import DS from 'ember-data';

export default DS.RESTSerializer.extend({});

If you have a model that goes to a different host or uses a different URL schema, you can define a completely separate Adapter at adapters/${modelName}.js by extending the Adapter of your choice.

The base classes DS.Adapter and DS.Serializer are abstract base classes and are not intended to be used directly. You can use the core variants (REST and JSONAPI), get one from an addon (like ActiveModel), or create one from scratch.

You can also customize the existing ones, which is the subject of the next screencast.

Written with StackEdit.

Transcript

Hey and welcome to our series on how to use adapters and serializers within Ember data. The rough plan is it for it to be about 10 parts, and today we’re going to be starting with an overview of how to use adapters and serializers within your app.

So the basic distinction is that adapters, they determine the URL. So that’s the place that you’re going to be sending this request. And then the serializers, they determine both the data you send and the data you get back. So it takes what’s in your Ember Data model and it turns it, it serializes it into something that you can send to the server, and then it normalizes the data that you get back from the server.

I’m going to show you how to get started quickly with both adapters and serializers. So for adapters, you go to the adapters folder then application.js. And then you get your chosen adapter and you extend it. And for serializers it’s very similar, serializers folder, application.js, and then you get your favorite serializer and you extend it. And by saying that you can choose which adapter or serializer you use, well, that implies there are choices, and there are.

So these are the ones that come bundled with Ember Data 2.0. And so the Adapter, we have the RESTAdapter and the JSONAPIAdapter. And for the serializers, we have first the JSONSerializer which I don’t think is in heavy direct use, but it’s a parent to both the RESTSerializer and the JSONAPISerializer. And because I use Rails, I like to add these to this graph. And of course, it’s not just Active Model Adapter and Serializer that you can add. There are also other ones on Ember Observer that you can add.

Here’s a useful listing of 30 add-ons that change your adapter. active-model-adapter is probably the most popular, but there are plenty for whatever you need. And of course if you have a use case that isn’t covered by one of these thirty, we’re going to tell you enough in this series that you can get started on building your own.

So the reason we have different adapters and serializers is because different servers require different endpoints and they require the data to be massaged in different ways. And of course you can have these differences between apps, but you can also have differences between endpoints in the same app.

So let’s say we had a model called "repositories", and we wanted to change the adapter for this model because this model is actually stored on GitHub. So what we would do is we would make a new file in the adapters folder and we would call that file repository.js. And then we could extend the application adapter or we could put in a RESTAdapter or a completely different type of adapter. And then once we’re there, we can make changes to the configuration. Here we’re going to be changing the host so that it’s going to GitHub instead of our server.

So in this application, almost everything is going to our Rails server through the ActiveModelAdapter which we’ve pulled in through an add-on. But the repository is using the built-in RESTAdapter and going to the host github.com. This is a very simple and easy example of some of the vast diversity that Ember Data can give you in endpoints while still giving you same defaults, because for all our other models, we don’t have to define anything else. It’s just going to use the ActiveModelAdapter because it’s inherited from application.js.

So far, we’ve expended quite a bit of energy on how to have different adapters in your app, as well as seeing what different types of adapters there are. But how do we actually use these adapters? How do they get used?

Well, we can find the public API of the adapters and the serializers in the base class, DS.Serializer and DS.Adapter. These are abstract base classes not meant to be used directly. They are to be overridden, and as we see they’re overridden in several different ways as well as ways you can customize, but they include the public API which for the serializer is pretty easy. It has serialize which takes the data that you currently have in your store and it serializes it into the type that your server wants. And normalize does the opposite. It takes the data that’s sent to you by the server and then it puts it into the form that Ember data wants for store.push.

Now what’s interesting to note is that these methods, although there are public API to the serializer, are usually not called directly by your app code. It’s called by... I’m not exactly sure on this, but I believe it’s called by the store. But anyways, it’s called by something else in Ember Data, but we can define these to make the behavior different. That’s important to note when we go into the adapter base class, because we’re going to see some stuff that looks really familiar, like createRecord, deleteRecord, findAll, findMany, updateRecord. We’ve seen these before, but they’re slightly different than how they are in the store.

In the store, we’ll look at createRecord, and we’re not going to go over this a whole lot but notice the shape of it, and then in the RESTAdapter, createRecord is very different. That’s because they’re doing different things. In the adapter, createRecord is saying what URL do we need to send this to, and in the store, it’s actually creating it in the Ember Data store.

And so when you see these methods, note that they’re different than the methods that we’ve seen before that are called by the same name. Although if you call createRecord on the store, it usually ends up eventually calling createRecord on the adapter.

So this has been the first part in this series showing how to use adapters and serializers. We’ll get into a lot more detail on this later.

In the next episode, we’re going to be showing how to customize these, the basics of what we can change and how that works. I’ll see you then.

Introduction to Ember Data 2.0

Subscribe to our mailing list