Comparison of Mirage and MSW

coryhouse commented 4 years ago

I'm curious how you'd compare Mirage to MSW.

Also, love what you all are doing here, and especially appreciated the detailed comparison to json-server, which I'm currently using, but considering shifting away from.

samselikoff commented 4 years ago

Hey Cory – thank you very much! Means a lot coming from you 😄

I need to look more into MSW but I believe the biggest difference today is that MSW runs in a SW which enables real-enough network requests that show up in the Network tab of the Devtools. Whereas today, Mirage runs purely in the runtime browser process, so intercepted requests never leave that environment. So we use console.log right now to show request/response data.

I think this makes Mirage a bit easier to get setup (it runs along the rest of your frontend packages) but having the real devtools would be killer.

There's no technical reason we can't get there, and it's absolutely in our roadmap, as is node support. But today that would be the main advantage of using MSW.

As far as I can tell the main advantages of using Mirage over MSW are probably similar to the JSON Server ones:

The in-memory database + ORM help maintain your data's relational integrity across reads and writes to all endpoints
There is a customizable serializer layer that helps you match the API format of your production backend
Mirage was built for testing, so it's easy to use alongside Jest, Cypress, etc. You can manipulate tweak your server seeds & HTTP responses on a per-test basis while sharing the majority of your server definition across both development and testing

Hope that helps! Let me know if you have any more questions.

coryhouse commented 4 years ago

Wow, thanks for the quick reply Sam! The other notable difference is msw doesn't seem to provide a DB, so it would have many of the same downsides as Cypress' built in mocks.

I often teach teams, so json-server's ability to quickly stand up a realistic mock API by just declaring a dataset is quite attractive. And in real apps, I customize it since it's just Express underneath.

I like that Mirage makes data integrity easier for real apps, but at the expense of more up front setup. So in the real world, I suspect that tradeoff makes sense. In classrooms, not so much. Agreed? Ah, tradeoffs.

Anyway, eager to dig in more, and I appreciate the dialogue on this (and the superb docs! 👍)

samselikoff commented 4 years ago

Mm might be less code than you think. In fact once you set up some Factories it can pretty dramatically simplify setting up different data scenarios with relational data.

Just made you a REPL, 5 RESTful routes for a User resource in about 17 lines of code (w/o comments 😄).

We use Mirage all the time for our training workshops!

samselikoff commented 4 years ago

Think that might have been a busted link, just updated it.

samselikoff commented 4 years ago

The other benefit of Mirage for workshops is that it runs alongside your dev server. It can be confusing to students sometimes if they have to run two process in a certain order, or if they have to restart the express server to see changes, or debug something inside of a node process. With Mirage you get all the auto-updating/auto-reloading + debugging behavior of the rest of your frontend code. Huge advantage imo.

coryhouse commented 4 years ago

Wow, that is compelling. 🤯 Thanks for the quick example Sam! I'm excited to kick the tires on this more. Thanks for your hard work on this!

samselikoff commented 4 years ago

https://github.com/miragejs/site/pull/675 closes

samselikoff commented 4 years ago

You can now find this on the site! https://miragejs.com/docs/comparison-with-other-tools/#msw

coryhouse commented 4 years ago

Superb write up! Thanks so much Sam. This page is super helpful.

samselikoff commented 4 years ago

Thanks Cory!

Will be sure to let you know if/when we add SW support to Mirage – I think being able to use the DevTools network tab would be killer.

jamesarosen commented 1 year ago

For anyone coming to this later, msw does now have a DB / data layer: mswjs/data.

IanVS commented 1 year ago

@jamesarosen have you been using the data layer of MSW? If so I'd be curious to hear your thoughts on it.

As a note, @cah-brian-gantzler has developed a way to swap out Pretender for MSW inside of Mirage. I haven't tested it yet, but if that's something that sounds interesting to you, it might be worth an experiment!

jamesarosen commented 1 year ago

have you been using the data layer of MSW?

I have not. I did a quick investigation and found it largely compatible with what we wanted to do. I'm sure there are important edge-cases or limitations I haven't found yet.

it might be worth an experiment

Absolutely!

miragejs / miragejs

Comparison of Mirage and MSW #449