MirageJS: An API mocking library for frontend development • Hacker News Board

Re: MirageJS: An API mocking library for frontend development

#31

Post by holler » Sat, Jan 25, 2020, 12:32 AM UTC

samselikoff wrote: post #4

Hello! I'm Sam and I built Mirage JS to be a framework-agnostic API mocking library. Mirage is extracted it from an addon that's been widely used in the Ember ecosystem for the past 4 years, at companies like Apple, Heroku, Square and Footlocker. Nearly all frontends need to talk to an API, no matter what framework they're built with! So over the past year I've made Mirage work with any tool or test runner. I really…

Thanks for all the hard work, mirage has been a great asset the past years of ember development!

Re: MirageJS: An API mocking library for frontend development

#32

Post by iask » Sat, Jan 25, 2020, 1:13 AM UTC

samselikoff wrote: post #4

Hello! I'm Sam and I built Mirage JS to be a framework-agnostic API mocking library. Mirage is extracted it from an addon that's been widely used in the Ember ecosystem for the past 4 years, at companies like Apple, Heroku, Square and Footlocker. Nearly all frontends need to talk to an API, no matter what framework they're built with! So over the past year I've made Mirage work with any tool or test runner. I really…

No fluff! In 2 sec I knew what it was intended to do. I was ready to go in 6 sec. Excellent work.

Re: MirageJS: An API mocking library for frontend development

#33

Post by nlh » Sat, Jan 25, 2020, 2:04 AM UTC

This is awesome! Exactly the kind of library I’ve been looking for.

Does anyone have any suggestions on a way to start with an OpenAPI spec and end up with a mock data set? With Mirage it seems easy enough to mock our API directly from scratch, but if we could save a few steps and go from OpenAPI spec to mocked front end that would be bliss.

Re: MirageJS: An API mocking library for frontend development

#34

Post by varrock » Sat, Jan 25, 2020, 3:45 AM UTC

This looks really cool. Is there a difference between this and json-server [0]?

0: https://github.com/typicode/json-server

Re: MirageJS: An API mocking library for frontend development

#35

Post by rclayton » Sat, Jan 25, 2020, 4:45 AM UTC

shhsshs wrote: post #26

What is the benefit of a request mocking framework versus hiding all api requests behind a module? Instead of // MyComponent.js const users = await fetch(... Use this // MyComponent.js const users = await api.getUsers() // api.js export default { getUsers() { return fetch(... } } To mock, you replace the entire api module (or individual functions).

100% agree. I feel like you could do the same with a mocking library and good abstractions. At the end of the day, you still have to simulate the backend API. I would love to see front end developers adopt Domain Driven Design.

Re: MirageJS: An API mocking library for frontend development

#36

Post by rclayton » Sat, Jan 25, 2020, 4:48 AM UTC

cbhl wrote: post #29

shhsshs wrote: post #26

What is the benefit of a request mocking framework versus hiding all api requests behind a module? Instead of // MyComponent.js const users = await fetch(... Use this // MyComponent.js const users = await api.getUsers() // api.js export default { getUsers() { return fetch(... } } To mock, you replace the entire api module (or individual functions).

The first page of the docs list a few reasons. https://miragejs.com/docs/getting-started/introduction "Use a client-side interceptor to handle your app's network requests. ... This is the most flexible approach, but it requires you to start from scratch in each project, and leaves it up to you to enforce conventions across your apps." "Importantly, because Mirage mocks the HTTP boundary instead of the JavaScript code…

How is this the best/most flexible approach? What if you decide to move from REST to GQL? GQL to websockets? By mocking the HTTP endpoint you’re too low in the stack. At that point, I feel like you might have better success with using the actual backend and swap out the DB with mock data.

Re: MirageJS: An API mocking library for frontend development

#37

Post by acemarke » Sat, Jan 25, 2020, 5:04 AM UTC

varrock wrote: post #34

This looks really cool. Is there a difference between this and json-server [0]? 0: https://github.com/typicode/json-server

Looks like `json-server` is a real server, whereas Mirage is a tool for mocking `XmlHttpRequest` and `fetch` on the client side in the browser.

Re: MirageJS: An API mocking library for frontend development

#38

Post by philipov » Sat, Jan 25, 2020, 6:27 AM UTC

Finally a library to help me make a mockery of my project!

Re: MirageJS: An API mocking library for frontend development

#39

Post by KitDuncan » Sat, Jan 25, 2020, 9:17 AM UTC

rclayton wrote: post #36

cbhl wrote: post #29

Earlier quoted context omitted.

The first page of the docs list a few reasons. https://miragejs.com/docs/getting-started/introduction "Use a client-side interceptor to handle your app's network requests. ... This is the most flexible approach, but it requires you to start from scratch in each project, and leaves it up to you to enforce conventions across your apps." "Importantly, because Mirage mocks the HTTP boundary instead of the JavaScript code…

How is this the best/most flexible approach? What if you decide to move from REST to GQL? GQL to websockets? By mocking the HTTP endpoint you’re too low in the stack. At that point, I feel like you might have better success with using the actual backend and swap out the DB with mock data.

I always use this approach for my E2E tests. This way I test the backend as well as the frontend. Harder to setup properly though.

Re: MirageJS: An API mocking library for frontend development

#40

Post by lnenad » Sat, Jan 25, 2020, 9:36 AM UTC

At our job we used to mock both frontend and backend and we needed consistency, so to help us I developed https://mockadillo.com which is imho easier to use than embedding mocks in your code.