Retroaktive - Blog

This week I've finished and released APItizer. APItizer is a library that enables you to mock API endpoints for single page apps.

It is based on JSON schema and can.fixture. Although it uses code from the CanJS framework, it is framework agnostic and can be used as long as you use jQuery to make the AJAX calls.

Why

When developing single page apps it is beneficial to be independent of the backend code. It allows faster iterations, makes the code easier to test, and enables frontend and backend development in parallel.

can.fixture enables you to do this, but it is pretty low level, as you have to manually write generators and take care of the relations. Also, it is easy to make subtle differences in the implementations (even when there is a JSON contract that both sides uphold).

Some of the differences I've encountered while working with the backend teams include:

• null sent instead of the empty array
• snake case vs camel case
• object wrapped inside the data "namespace"
• ...

All of these differences are not that big of a deal on their own, but if you develop the whole app with the fixtures, it can take a day or two to connect everything correctly to the backend.

How

APItizer handles this problem by using the JSON schema to describe structure that will be used to generate the data. These same schemas can be used to validate the responses from the backend and shorten the time to figure out the differences. Also, by using the JSON schema, you get a nice documentation for your API layer.

For instance you could use the following schema to describe a user:

var schema = {
    type : "object",
    properties : {
        id : {
            type : "integer"
        },
        username : {
            type: "string",
            minLength: 4,
            maxLength: 255
        },
        password : {
            type: "string",
            minLength: "6",
            maxLength: 255
        }
    }
};

apitizer.addSchema('user', schema);
apitizer.fixture.resource('/users', apitizer.schemaStore('user, 10));

As you can see, it's pretty human readable and self-documenting. This code will do the following:

• add the user schema to apitizer
• create a store with ten users in it
• register the fixtures for the following endpoints:
  • GET /users
  • GET /users/{id}
  • POST /users
  • PUT /users/{id}
  • DELETE /users/{id}

You can now create, read, update or delete users with the normal AJAX calls:

$.get('/users').then(function(){ ... });

Conclusion

This was just a short introduction to the APItizer, to get a better overview of it's capabilities head over to the readme and the documentation.

If you have any questions or comments about the APItizer, I'd like to hear from you.