This project allows a BackboneJS application to use fixture data in the UI for particular endpoints. This allows an app to use an existing API for authentication and existing endpoints, while mocking new endpoints for development. While I use this with Backbone, it’s not tied to any library. This will work with any framework, including Ember and Angular.

In the course of application development, I’ve often found the API and the UI in a sort of race between developing new api API endpoints and consuming them in the UI. Unfortunately, I’ve found that I often ask for one more property on an object, or ask to change to a return format later in the game. With this new workflow, the api and UI can develop in a much more concurrent manner. Here’s my new approach:

  1. Add a new mock fixture for an endpoint with a rough approximation of the JSON return format. The API team helps design this data spec and can begin work on their implementation.
  2. Write the backbone models, collections, and views.
  3. Write some basic unit tests.
  4. Add some templates and start using the data in the UI.
  5. Iterate some changes in the data until the layout is complete.
  6. Hand this JSON fixture to the API team for implementation.
  7. This json spec then becomes the contract between the API and the UI.
  8. Both teams complete their unit testing based on this format.
  9. The live release only involves removing the mock data endpoint.

The best part about this approach is that because we’re intercepting the XHR request with Sinon, the Backbone models never know that they didn’t communicate with the api. Development with this allows you ignore the fact that you’re using mock data.

Check out the repo for examples and implementation.