Search code examples
vue.jsfrontendrails-apivue-cli

vuejs frontend development without backend: how to write fixtures?


We are building an application where the backend is completely separated from the frontend. Communication will happen through a rest-api, specific endpoints, json etc.

The frontend is developed with vue-cli as a SPA vue.js app (with vuex and vue-router), the backend is a Rails 5 API-only app.

Development of frontend and backend will be done in parallel by different teams, both respecting the same API.

My questions is: How can the frontend team develop the frontend without data from the backend? For example to display a user profile, they'd need the respective JSON for that user from the backend. But since the backend is not finished, the endpoint to request data is not working yet.

Should they create fixtures in the frontend app (e.g. a "sample-user.json") and use this while developing? What is best practice for such a scenario, so that developing the frontend does not depend on the backend to be available and to deliver data?


Solution

  • From my experience of a past project, for small development cycles it is really convenient to just use static json files to mock the result of the request. I've basically imported the required files in my vuex modules and used them as a fake result in my actions, commiting the same mutation as I would with a normal endpoint, but using the mock instead of the http result as parameter for the mutation. That's convenient and you'll only have to change a single line, once the endpoint is ready to go. This works fine in scrum for example, when you have small development cycles and you know that, by the end of the sprint, your endpoint will be ready to go anyway.

    It can be a bit tricky when you don't get the required endpoint for an extended period of time, for whatever reason. We've experienced that once, where an entire microservice wasn't available for month, yet we still needed to develop a rich feature in our frontend. In this scenario we used wiremock to mock a whole variety of endpoints from that microservice for that feature. It's a lot of overhead though, and really only viable when you know that you're in a long development cycle. Otherwhise I suggest just going with static files.