How to add user interface design in microservice architecture

Viewed 126

I'm building small vue.js microservice application and I have few doubts. Firstly I'm using mongoDB as my database, and I'm using express. After I want to use Docker and Kubernetes to deploy the application. I want to use 5 microservices:

  1. Basic publishing and product catalog
  2. Commenting inside the post
  3. Products can be added to cart
  4. Paying the certain products after the cart
  5. User authentification (login and register)

So the problem is how to add user interface design if the microservices which I want to use are backend based. How to exactly add the frontend if it can't be part of microservices. Or maybe should I use React and implement HTML/CSS things inside javascript code? Is it even possible because I want to use just MongoDB for every database needed in a microservice and write every microservice in Vue?

1 Answers

It's always upto you what you are good and requirement.

There is no specific best practice with microservices to follow certain languages together, people use the different languages in microservice like Ruby, Node, with React as front or one Python service managing the user auth.

It's depends on you what you are good with and familiar with.

You can create the Python app as a user interface or react or HTML which call backend services over API calls or grpc.

There is one example in the Istio repo : https://github.com/istio/istio/tree/master/samples/bookinfo

It's a book info app in Node, Ruby, Python using databases like MySQL, MongoDB etc.

https://cloud.google.com/service-mesh/docs/deploy-bookinfo

Update :

For Vue base, this blog and repo might be helpful vue-microfrontend

https://itnext.io/setup-a-micro-frontend-architecture-with-vue-and-single-spa-2c89528bf72f

Repo : https://github.com/vue-microfrontends

Related