Building a production-ready front-end even if your API does not exist

require('lx')

Transcript

1. Alexandre Santos Production-ready front-end even if the API does not exist 9th January 2020
2. Who am I? Alexandre Santos, 25 January 9th 2020 Full-stack developer Software architecture, TDD, product
3. Develop an amazing user experience Against a finished and documented API That's always stable With fully decided feature requirements Front-end
5. The goal Develop an amazing user experience
6. Against an almost finished & not documented API That's probably unstable With fast changing feature requirements The Conditions
8. Problems Not finished API Unstable remote environment Fast changing requirements
9. Problems Front-end ahead of back-end Local environment Emulate back-end changes locally Solutions Not finished API Unstable remote environment Fast changing requirements
10. Possible solution Local mocks
11. 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
12. Taking a few steps back... Develop an amazing user experience
13. Flickering UI No loading states Possible unknown crashes No feedback given to the user Amazing user experience?
14. 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?
15. 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.
16. 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
17. Demo time
18. Problems Front-end ahead of back-end Local environment Emulate back-end changes locally Solutions Not finished API Unstable remote environment Fast changing requirements ✅ ✅ ✅
19. Future ideas Node.js support Better TypeScript typings Chaos Engineering approach to miragejs OpenAPI miragejs generator
20. We’d love your help! miragejs/miragejs miragejs/website miragejs-caos miragejs-open-api [insert your package] Join us on Discord Mirage JS
21. Thank you Questions? Github: asantos00 Twitter: ampsantos0