The efficient way to mock the API 

for front-end devs

Michał Michalczuk

Michał Michalczuk

Senior JavaScript Developer

Ciklum / Stibo Systems



IT trainer

infoShare Academy

is the problem

  • Backend is not ready

  • Backend is not even started

  • Front-end have to move on!

How to deal with it?

We have to fake API


But where?

In the application

let NOTES = [];

const get = () => Promise.resolve(NOTES);

const create = (note) => {
  return Promise.resolve(note);

const deleteItem = (note) => 
    NOTES = NOTES.filter(item => !==;

const update = (id, note) => {
  let toUpdate = NOTES.find(item => === id);
  toUpdate = note;

In the application

+ Fast to achieve

+ Works

+ You have it under control

- There could be some subtle differences between working with data in memory and with data fetched from API


- After read back-end arrives - you have to change your code


- It spreads across your app


Other options?

Create your own API


I'm not back-end developer

No problem.

We have plenty of options


First, lets take a look at benefits

Changes in the application

const baseApiUrl = '';

// after switching to real back-end
// const baseApiUrl = '';

Fake API

+ Fast to achieve

+ Works

+ You have it under control

+ Only configuration change (the API base URL) in front-end app

+ Still playing with HTTP calls - no surprises here

- Another point of failure

First answer one question

Do you need only data or documented platform?

I need platform, and documentation!

How APIs are documented?


and OpenAPI

API Blueprints

API Blueprints

### Get a single Note [GET /notes/{id}]

Get single note from collection by `id`

+ Parameters
    + id (required, Number, `2`) ... Numeric `id` of the note
+ Response 200 (application/json)
            "id": 2,
            "title": "Second note",
            "content": "Second note sample content",
            "createdOn": "2018-01-02T16:30:00.511Z",
            "type": 2

Write your contracts in Markdown syntax.


A lot of other specs


(common case)

Let's stick with those

  • design
  • prototype
  • document
  • test
  • team collaboration available
  • you can store it as a git repository

Check my client app


What if I just want data?

*It would be nice if data would be persisted


  • put your data in .json file
  • run server
  • done

*You can tweak it, and deploy it as a server




  • framework from IBM
  • tweak everything
  • easy to setup
  • build-in roles based access management
  • easy plug datasource
  • you can deploy it as a server



Other options

Sum it up

Mocking API in your app code is very short-sighted solution

Sum it up

Server with fake data is good option.


But be carefull with adding too much logic there.


You want to fake API or write another one?

Questions time

Michał Michalczuk

Thank you!


Mocking API for front-end devs

By Michał Michalczuk

Mocking API for front-end devs

Ciklum UX & Front-end meetup, 27.06.2018 Gdańsk

  • 1,604