Introduction

The developers here have been working hard behind the scenes, and in the midst of that, we’ve abstracted out a project we think you may find usefull. Today we introduce, diff.js! This project was created from the need to find the difference between objects, for us, so we can control the data we send around applications at a detailed level.

Use Case

The primary reason for building this lib was to reduce the payload we were sending around the app, especially the data we were broadcasting to clients over socket.io. Some of our datasets can get fairly large and complex, lets say, for example, one dataset was 5kb, and we have 1 connected client, not that big of a deal. What if we have 5000 clients? Sending that much data can add up fast.

So, instead of sending the entire dataset, we dif it! It turns out that in most cases only a few keys or properties had changed, so we pay the cost up front and find out exactly what has changed from the old version to the new, reducing the payload to 100 bytes. Using this method around our application we reduced the data size being sent to the client by over 70%. In some cases there was no difference between versions of the data, and we don’t send updates at all.

Heres an example of what we’re doing, for brevity, lets imagine there are 99 players in the following objects:

var previous = {
  1: {
    name: 'John'
  , number: '23'
  , stats: {
      shots: 1
    , passes: 13
    }
  }
, 99: {
    name: 'Peter'
  , number: '05'
  , stats: {
      shots: 0
    , passes: 7
    }
  }
};

var updated = {
  1: {
    name: 'John'
  , number: '23'
  , stats: {
      shots: 4
    , passes: 15
    }
  }
, 99: {
    name: 'Peter'
  , number: '05'
  , stats: {
      shots: 0
    , passes: 7
    }
  }
};

You can see that only John’s stats have changed, we would previously send the entire updated object, but really, we only need to tell the clients that John has changed.

var difference = dif(previous, updated);
{
  1: {
    name: 'John'
  , number: '23'
  , stats: {
      shots: 4
    , passes: 15
    }
  }
}

Isn’t that better? Now we only have to deal with a much smaller subset of data. We hope this library can be of use to the community, so, enjoy! Feel free to open issues you find with the project on github.

Beau Sorensen - @beausorensen

Standings Visualizations

October 30, 2014 Tom Youds

New York City FC Website Launch

August 04, 2014 Chris Bettin