Michał Michalczuk
I am fullstack software developer #dotnet #angular #typescript, IT trainer. Both fascinated and terrified by technology advancement.
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
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
