DEV Community

loading...
Cover image for Front-End MicroService Architecture

Front-End MicroService Architecture

ifarhad profile image Farhad Mehryari ・2 min read

Whenever I read about MicroService Architecture, it was for the back-end but today I will explain how to implement this architecture in the front end.

What should be considered as Service?

The first principle about microservice architecture indicates that each service should be independent of others so the first step is to separate independent parts of our front-end. One of the good approaches that we can separate our independent parts is considering layouts.

For example, consider a simple shopping website. Most authentication layouts including login, register, forget the password, etc differ from the home page so authentication pages could be considered as one of our services.

We will create a new Nuxt project which has the below pages:
(all are under /auth scope)

  • /login
  • /register
  • /forget-password
  • /confirm-email

We will create another Nuxt project that has other pages of our shopping such as home page, basket, product, categories, etc.

Up to here, we were able to decomposite our front-end into two services still we can move one more step forward and consider all pages under profile scope to be another service so we will create a new Nuxt project including the below pages:

  • /orders
  • /orders/view/:id
  • /addresses
  • /addresses/:id
  • /info
  • /info/update

How to run 3 projects?

At this point, we have 3 Nuxt projects that could be developed by different people and we need a parent router to keep these projects under one HTTP server and allocate requests to the project based on defined routes.

For example, when the browser hits

http://127.0.0.1:3000/auth/login

the router will assign this request to the first Nuxt project and when the URL is

http://127.0.0.1:3000/profile/orders

the outer will give this request to the last Nuxt project to handle it.

I'm developing this router and after publishing at npm I'll write a new post to explain how to use it

Advantages

  • you won't face the memory leak of watching a large number of files in development.
  • services could be in development or production mode independently
  • each service has its own assets
  • better teamwork experience
  • work one service A while others are in production mode and running.

Disadvantages

  • If you don't have a different layout it is useless
  • Based on the UI, maybe you have repeated components in different services
  • Maybe you have repeated peace of codes or functions (i.e function to generate random int between 2 number)

Final Notes

Implementing microservice architecture is recommended IF your project is on a large scale.

Thanks for your reading, It's just architecture and how to implement it.
Any comments or criticisms are welcome

Discussion (0)

pic
Editor guide