Alexandre Santos
Production-ready
front-end
even if the API does not exist
9th January 2020
Slide 2
Slide 2 text
Who am I?
Alexandre
Santos, 25
January 9th 2020
Full-stack developer
Software architecture,
TDD, product
Slide 3
Slide 3 text
Develop an amazing
user experience
Against a finished and documented
API
That's always stable
With fully decided feature
requirements
Front-end
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
The goal
Develop an amazing user experience
Slide 6
Slide 6 text
Against an almost finished & not
documented API
That's probably unstable
With fast changing feature
requirements
The
Conditions
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Problems
Not finished API
Unstable remote
environment
Fast changing
requirements
Slide 9
Slide 9 text
Problems
Front-end ahead of
back-end
Local environment
Emulate back-end changes
locally
Solutions
Not finished API
Unstable remote
environment
Fast changing
requirements
Slide 10
Slide 10 text
Possible
solution
Local
mocks
Slide 11
Slide 11 text
Advantages
of local
mocks
Quickly develop and ship the working
front-end to a testing environment.
Develop for the happy path
seamlessly
Payload is exactly what front-end
needs
Slide 12
Slide 12 text
Taking a few steps back...
Develop an amazing user experience
Slide 13
Slide 13 text
Flickering UI
No loading states
Possible unknown crashes
No feedback given to the user
Amazing
user
experience?
Slide 14
Slide 14 text
Disadvantages
of local mocks
Ignoring network
Only develop for the happy path
APIs can change, paths can change
Loading states? Error scenarios?
Feedback to the user?
Slide 15
Slide 15 text
Presenting
Mirage JS
Mirage JS is an API mocking
library that lets you build, test
and share a complete working
JavaScript application without
having to rely on any backend
services.
Slide 16
Slide 16 text
Started with ember.js in 2015 -
ember-cli-mirage
Front-end first development
Widely used (around 30k weekly)
Recently extracted to a vanilla JS
package
A little bit of
history
Slide 17
Slide 17 text
Demo time
Slide 18
Slide 18 text
Problems
Front-end ahead of
back-end
Local environment
Emulate back-end changes
locally
Solutions
Not finished API
Unstable remote
environment
Fast changing
requirements
✅
✅
✅
Slide 19
Slide 19 text
Future
ideas
Node.js support
Better TypeScript
typings
Chaos Engineering
approach to miragejs
OpenAPI miragejs
generator
Slide 20
Slide 20 text
We’d love
your help!
miragejs/miragejs
miragejs/website
miragejs-caos
miragejs-open-api
[insert your package]
Join us on Discord
Mirage JS
Slide 21
Slide 21 text
Thank you
Questions?
Github: asantos00
Twitter: ampsantos0