As I’ve mentioned before, the focus of this blog post is on the frontend part of our application. This makes it necessary to decouple frontend and backend development. In reality, this is a common development pattern: while one team focuses on the backend---in our case team Matthias ;), a second team---let’s call it team Lars---simultaneously develops the frontend. By introducing a so-called "fake server", we can mock backend services and get started with the frontend development without needing the backend to be in place.
So let’s get started and mock the backend. What’s the best practice, you might ask? Well, for web development, it’s very easy: intercept all Ajax calls to the backend by mocking XMLHttpRequest and that’s exactly our approach.
Several JavaScript libraries exist for mocking Ajax calls. Personally, I’m a big fan of Sinon.JS. It’s a very lightweight JavaScript library for test spies, stubs and mocks, supporting all major desktop and mobile browsers as well as Node.JS. I especially like that it has no dependencies, works nicely together with Jasmine.JS and offers an easy way to fake Ajax calls. So let’s use Sinon.JS Fake Server to mock the backend.
For developing my applications, I often use the behavior-driven development (BBD) approach. So, why not use it for this application too? First, let's specify the expected behaviors of the fake server before implementing them. As always, when it comes to software development, there isn't just the one and only library for a particular task. Each library has its strengths and weaknesses... and at the end it’s a question of personal taste.
At the moment, I’m in love :wink: with Jasmine.JS; a really nice piece of software. So let’s go for it. We use it in combination---guess---with Sinon.JS. Not only do both integrate nicely, but they do also work nicely together with Backbone.JS (another library I like to use).
After we’ve made all the necessary decisions, we are ready to implement the fake server. So, let’s get rolling. If you haven’t created a project folder yet, now is the time. I call the folder step01_fake_server. Next, we download the necessary libraries (I use the versions given in brackets; newer versions should also work):
Extract, rename and copy the files so that you have the following file and folder structure at the end (if jasmine_favicon.png isn’t included in the Jasmine.JS download archive, you can download it here😞
step01_fake_server/
├── assets/
│ └── js/
│ ├── jquery-1.7.2.js
│ ├── sinon-1.4.2.js
│ └── sinon-ie-1.4.2.js
└── test/
├── assets/
│ ├── css/
│ │ └── jasmine-1.2.0.css
│ ├── img/
│ │ └── jasmine_favicon.png
│ └── js/
│ ├── jasmine-1.2.0.js
│ └── jasmine-html-1.2.0.js
├── MIT.LICENSE
└── SpecRunner.html
Next, open file SpecRunner.html and adjust all paths, remove all included scripts under
<!-- include source files here... -->
<!-- include spec files here... -->
and add script jquery-1.7.2.js (we use jquery later to mimic our server calls). Next, create a new file called fake-server-spec.js under test/spec:
step01_fake_server/
├── assets/
│ └── js/
│ ├── jquery-1.7.2.js
│ ├── sinon-1.4.2.js
│ └── sinon-ie-1.4.2.js
└── test/
├── assets/
│ ├── css/
│ │ └── jasmine-1.2.0.css
│ ├── img/
│ │ └── jasmine_favicon.png
│ └── js/
│ ├── jasmine-1.2.0.js
│ └── jasmine-html-1.2.0.js
├── MIT.LICENSE
├── spec/
│ └── fake-server-spec.js
└── SpecRunner.html
and include it in SpecRunner.html.
Now, we're ready to specify our fake server. We translate the backend REST service specification into the appropriate behaviors (see fake-server-spec.js for the details; I added plenty of comments.). More specifically, we have the following expectations on our fake-server: (1) the four services are accessible and (2) each service returns the expected data structure. See for the specification of (1) fake-server-spec-1.js (also under test/spec/) and for the full specification (1) + (2) fake-server-spec.js. SpecRunner.html should look as follows (see SpecRunner.html in the git repository).
When running SpecRunner.html (just open it in the browser), we’ll see that all eight spec tests are failing. That’s exactly what we wanted; now it’s time to get them into a GREEN state.
Let’s develop the fake server. Download sinon-server-1.4.2.js from http://sinonjs.org/docs/#server (if you are using Internet Explorer sinon-ie-1.4.2.js too) and copy the file to the sub-folder assets/js. Next, create a file called fake-server.js under sub-folder js/:
step01_fake_server/
├── assets/
│ └── js/
│ ├── jquery-1.7.2.js
│ ├── sinon-1.4.2.js
│ └── sinon-ie-1.4.2.js
├── js/
│ └── fake-server.js
└── test/
├── assets/
│ ├── css/
│ │ └── jasmine-1.2.0.css
│ ├── img/
│ │ └── jasmine_favicon.png
│ └── js/
│ ├── jasmine-1.2.0.js
│ └── jasmine-html-1.2.0.js
├── MIT.LICENSE
├── spec/
│ └── fake-server-spec.js
└── SpecRunner.html
and add fake-server.js to SpecRunner.html. We specify the dummy data (for the full specification see fake-server.js),
…
var JSON_PIECE_OF_CONTENT_HOME = {
id: "#home",
title: "Home",
sub_title: "Donec sed odio dui...",
icon: "icon_home.png",
tpl_name: "home-tpl"
};
…
before creating the fake server and enabling auto response:
// Creates a new server
var server = sinon.fakeServer.create();
// Setting autoRespond ensures that server.respondWith is automatically called after each request
server.autoRespond = true;
Finally, we define the four expected responses of the back-end (note that any other Ajax call will fail when using the fake server):
...
server.respondWith("GET", "/api/v1/content", function (xhr) {
xhr.respond(200, { "Content-Type": "application/json" },
JSON.stringify(JSON_CONTENT)); });
...
Run SpecRunner.html again, now all specs should be in the GREEN state.
After we’ve implemented and tested our fake server, it’s time to start with the real application. By decoupling the frontend from the backend, we can solely focus on the frontend and follow a design first approach… and even better, we can use the test cases developed in this step to test (by means of inbound tests) if the services are implemented correctly by the backend---in our case team Matthias ;).
Read on with step 2: Designing the frontend.
