Ember-Data Basics

As the official persistence library of the ember.js framework, ember-data has become more performant, more customizable, and an even more valuable library over time.

Ember-Data Basics

  1. Courses
  2. Ember-Data Basics
  3. Massaging JSON

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

  • Massaging JSONBuilt-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 JSONFunctional 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 JSONExercise: 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.

Clever Caching

Ember-data's caching features are often under-utilized, resulting in extra time to fetch data with each page load. We'll explore some simple caching strategies that will translate to major performance gains!

Featuring: Fastboot

We'll look at how ember-data's store can work hand-in-hand with Ember's server-side rendering technology, by way of a fastboot feature called shoebox storage, to land pages on the screen with lightning speed!

Helpful Hooks

Ember-data is easier to customize than ever, but it takes experience to find the right balance between an tangled application adapter monolith, and dozens of single-purpose modules that repeat common logic.