products

Fast prototyping using Restangular and Json-server

Quick demos using AngularJS library Restangular and JSON file backend.

I love prototyping ideas to show others. Quickly making something tangible allows to seek feedback, evaluate the concept, and converge on something useful. The speed is paramount: I want to make something quick before the inspiration is gone, but the prototype should be good enough to get a fair judgement. Lately I have discovered a wonderful pair of tools that complement each other perfectly and allow me to get a functional website up and running in seconds. Ok, minutes.

I have discovered AngularJs data middleware Restangular coupled with json-server.

json-server

Starts small Express-based REST server based on a JSON file, runs under nodejs. Install globally:

sudo npm install -g json-server

Then create a JSON file with a data collection issues.json:

issues.json
1
2
3
4
5
6
7
8
9
10
11
12
{
  "issues": [
    {
      "id": 101,
      "text": "something is not right"
    },
    {
      "id": 102,
      "text": "crash on login"
    }
  ]
}

Start the server

1
2
3
4
5
6
json-server issues.json
# test it
curl http://localhost:3000/issues
curl http://localhost:3000/issues/101
# use other verbs (PUT, POST, DELETE)
curl -X DELETE http://localhost:3000/issues/102

The data is updated in memory, the original file is not modified. You can make the data read-only using a command line flag. You can also generate data programmatically by a JavaScript file.

Restangular

Claims to be a perfect fit for any WebApp that consumes data from a RESTful API. Just point it at json-server base url and use the returned objects, all wrapped in promises. CORS and JSONP are supported.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
angular.module('project', ['restangular', 'ngRoute']).
    config(function($routeProvider, RestangularProvider) {
        RestangularProvider.setBaseUrl('http://localhost:3000/');
    });
// GET all issues
function ListCtrl($scope, Restangular) {
    $scope.issues = Restangular.all("issues").getList().$object;
}
// DELETE an issue
// issue object was fetched previously
$scope.destroy = function() {
    issue.remove().then(function() {
        $location.path('/list');
    });
};

The best feature of this pair is its simplicity. Compared to complete seed projects, such as ultimate-seed, there is almost no code to install, configure or update. Take a look at the example project I have created.

There is just single JSON file, a static HTML page and small JavaScript file mapping user interface actions into REST operations. Extremely simple, easy to understand and debug.

Multiple collections

Single JSON file can host multiple collections like this:

combined.json
1
2
3
4
5
6
7
8
{
  "issues": [
    ...
  ],
  "people": [
    ...
  ]
}

json-server creates separate end point for each top level property

1
2
3
4
$ json-server combined.json
Available resources
http://localhost:3000/issues
http://localhost:3000/people

Faking data

Suppose you need to generate initial test sets with fake data. A good module to use is Faker. It can generate lots of different types of fake records: from addresses to internet identities, etc. Json-server can use a function to generate data, so both modules work together nicely. I prefer generating and saving fake data to JSON file to have the same data between runs.

generate fake data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var R = require('ramda');
var faker = require('faker');
var nLoop = R.range(0);
function aPerson() {
  return {
    first: faker.name.firstName(),
    last: faker.name.lastName(),
    phone: faker.phone.phoneNumber(),
    email: faker.internet.email()
  };
}
var data = {
    person: nLoop(10).map(aPerson)
};
require('fs').writeFileSync('db.json', JSON.stringify(data, null, 2), 'utf-8');

This generates a json file with 10 random people. Then we can start the json server

1
json-server db.json