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.
here is the part II (implementing in nuxt project)
Any comments or criticisms are welcome
Top comments (0)