Series: Introduction to Ember Data 2.0

Introduction to Serializers

Published on Apr 13, 2016

Serializers help you take the weird funky JSON that you're getting from the server and fit it into Ember Data.

This is an introduction and overview, and later videos in the series will provide more specific instructions on how to change the data.



No code for this episode.


Last December, I started recording a series on Ember data. And 16 episodes later, it still wasn’t done, so we took a break. Now we’re going to get back to that and finish it up by talking about serializers. We’re going to start off with a very quick overview of what we learned in Episodes 108 and 109 when we did the overview of adapters and serializers. If you’re confused by what I’m saying today, go back and watch those.

So if you remember, the difference between the adapters and the serializers are that adapters are meant to change the url, both where we’re getting data from and where we’re sending data to. The serializers on the other hand are meant to work with the data itself, to massage the data that we get so that it fits into Ember data, and then the data that we spit out, massage it so that the server can take that data and use it.

Here are the four serializers that come built-in to Ember data. You have DS.Serializer which is the base class, the very base. If you have something that’s wildly divergent, then it may be best to build it off of that. Then you have JSONSerializer which has a lot of hooks built in to help you customize it in common, easy ways. And we’ll be going over things that are in here quite a bit. Then we have RESTSerializer and JSONAPISerializer, both of which are using the hooks in the JSONSerializer in order to customize it based on two common formats. We also have the ActiveModelSerializer which wasn’t included in Ember data 1.0, but now with Ember data 2.0 it is an addon.

For much of this series, we’re going to be using the JSONAPISerializer, because in Ember data things are represented as JSONAPI. However, if you’re using any of the other serializers you can still use 90-95% of what we’re saying here. It’s just tweaked slightly to fit your use case.

We’ll go over the differences between those in a little bit more detail in a bit, but first I wanted to go over the base. So DS.Serializer, it provides you three different methods, normalizeResponse(), serialize(), and normalize(). And these are useful because normalizeResponse() and serialize() are the two different things that the serializer is doing for you.

So normalizeResponse() is when it’s taking in data from the server and normalizing it so that it’s in the format that Ember data expects. This used to be called in Ember data 1.x and before extract.

serialize() on the other hand is all about taking things from Ember data and pushing them to the server, so serialize() and the associated methods are all about making sure that it’s in a format that the server expects.

So the JSONSerializer has a couple of more methods, and this can look really intimidating at first, but I’ve separated them out into several categories, and we’ll have screencasts that go over each one of these categories... maybe not an entire screencast per category, but they’ll get covered. And what’s important to know is that each method is a leverage point that strategically interacts with other methods. And so for any change that you want to make, there’s one thing, one place to change it that is optimal. And there are other places where you could change it but it takes a little bit more work and it’s slightly less robust.

And that was the JSONSerializer, but the other ones, the RESTSerializer and the JSONAPISerializer... and remember, we’ll be using the JSONAPISerializer... they add a couple of more things.

So that’s the very basics of Ember data 2.0 serializers. In this week’s pro-episode, we’ll be going over the JSONAPI format in order to prepare you for the changes we’re going to be making in the episodes to come, so that we can more fully understand what the serializer is doing. I’ll see you then.

Introduction to Ember Data 2.0

Subscribe to our mailing list