PretenderJS: A Mock can be A-Must

Let’s set the setting… So your task is to develop this beautiful Front End UI for the next big web application. One hundred percent sure your team has come up with a RESTful API scheme. Ninety-nine percent sure your backend team has not made the first release yet! All you have now is vague ideas how these REST endpoints look like:

| Path          | Method        | Description       |

-----------------------------------------------------

| /api/login    | POST          | Authenticate      |

| /api/tickets  | GET           | Query for tickets |

| /api/hosts    | GET           | Query for hosts   |

   ...

Now you are in a Catch-22 situation. You need the data to build your beautiful UI with actual interactive functionality. But data comes from the backend. The backend team may even be waiting for your beautiful UI ready so that they can input some data!

You may be thinking of lorem ipsum texts everywhere kind of solution! But that is too static - you are building a web application UI with rich interactive content. Your JS library is super cool (You may being thinking of ReactJS or AngularJS now). Your UI can dynamically change along with streams of new data from server.

You may be even thinking of rolling out your own NodeJS Express prototype server with full-feature API implementation. That could be impressive to the girl next door! But - you need to focus on your Front End implementation. TADA!… Enter ==PretenderJS==!!!

Use it! …with the good old <script> tags There are cases where setting up NodeJS, gulp, webpack, es6 polyfill… is more of a hassle than beneficial. We can set up a pretender inside the good old <script> tag. Nothing fancy, just add the following scripts at top of your index.html:

<script
src="https://raw.githubusercontent.com/tildeio/route-recognizer/master/dist/route-recognizer.js"></script>

<script
src="https://raw.githubusercontent.com/pretenderjs/FakeXMLHttpRequest/master/fake_xml_http_request.js"></script>

<script
src="https://raw.githubusercontent.com/pretenderjs/pretender/master/pretender.js"></script>

These are the dependencies for our pretenderJS, built as browser-friendly distributions.

Then the route definitions:

var server = new Pretender (function () {

     this.post('/api/login', function(request){

       return [200, {}, JSON.stringify({ id: 'aefd-1203' })];

     });

     //...

});

See the Pen Demo: PretenderJS by Khanh Hua (@khanhhua) on CodePen.

…with webpack I would advise using webpack.DefinePlugin to optionally define compilation flags. Here I define MOCK as a flag when building index.js. Note that webpack.DefinePlugin’s MOCK is a runtime (browser) flag; process.env.MOCK is a compilation time flag.

// ## webpack.config.js ##

module.exports = {

   // ---

   plugins: [

     new webpack.DefinePlugin(process.env.MOCK?{ MOCK: true }:{})

   ]

   // ---

}

// ## fixture.js ##

import Pretender from 'pretender';

function loginHandler () {

   this.post('/api/login', function(request){

     return [200, {}, JSON.stringify({ id: 'aefd-1203' })];

   });

   //...

}

new Pretender(loginHandler);

// ## index.js ##

if (MOCK) {

   require('./fixture')

}

Install it now! Available for both bower and npm. https://github.com/pretenderjs/pretender

FYI: Ember Mirage uses PretenderJS under the hood.