The efficient way to mock the API 

for front-end devs

Michał Michalczuk

michalczukm.xyz

Michał Michalczuk

Senior JavaScript Developer

Ciklum / Stibo Systems

 

 

IT trainer

infoShare Academy

What
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) => {
  NOTES.push(note);
  return Promise.resolve(note);
};

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

const update = (id, note) => {
  let toUpdate = NOTES.find(item => item.id === 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

Ok.

Other options?

Create your own API

WHO?

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 = 'http://fake-api.example.com';

// after switching to real back-end
// const baseApiUrl = 'http://real-api.example.com';

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?

Swagger

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.

Nice!

A lot of other specs

OR

none
(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

apiary.io

Demo

What if I just want data?

*It would be nice if data would be persisted

json-server

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

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

json-server

Demo

LoopBack

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

LoopBack

Demo

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

michalczukm.xyz

Thank you!

michalczukm

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

  • 143
Loading comments...

More from Michał Michalczuk