When Micro Frontends (or Microservices Frontends) was introduced in Thoughtworks Technology Radar in the year 2016, it was not a new concept. Companies were already using microservices on the backend level for developing web apps. This allowed them to break the entire web app into small modules where each team independently worked on a separate module.
However, the problem was that on the frontend, the whole app still ended up appearing like a monolith. This resulted in all the functionalities being dependent on each other, and when one function went down, we had to shut down the entire website. To solve this problem, the concept of Micro Frontends was introduced. It’s akin to the concept of microservices, applied to the web applications front-end.
What is Micro Frontends?
In the micro frontend architecture, we integrate a Web app into modules, where each module has a specific functionality. Each module is owned by a separate team that develops the entire module from the UI to all to the way to the database and backend. Doing so makes the development process simple while ensuring that the functionalities remain independent from each other.
As a result, it becomes easier to develop the Web app in parallel. Our prime focus at Softobiz is to enable continuous delivery and deployment through micro frontends.
Why do you need Micro Frontends?
The traditional monolith architecture no longer works.
Here are some of the reasons for this:
- In the monolithic architecture, all the functions of the Web app are dependent on each other. This means if one function stops working, the whole website goes down.
- While updating a monolithic Website or Web App, you need to update it completely. You can’t update just one functionality while keeping the rest of the functionalities old because doing so will cause problems in the Website/Web App.
- A Website or Web App gets bigger with each update. So, updating a monolithic Website/Web App will be impossible every time.
This image shows how Micro Frontends simplifies the entire development process:
Benefits of Micro Frontends Architecture
1. Rapid development and deployment
Since all the front-end modules of the Website/WebApp are independent of each other, you can develop, test, and deploy them in parallel. This reduces the development time and results in faster deployment.
2. Easy to scale and upgrade
Since Micro Frontends has a modular structure, you can easily upgrade it according to your business needs or market trends.
You don’t need to upgrade the entire front-end. Instead, you can just upgrade the module that’s needed to be upscaled now and continue updating as your business needs change.
3. Quality Assurance
As you can run parallel tests on all modules, it’s possible to release completed modules as versions rather than waiting for the entire frontend to complete. This results in superior product quality.
4. Regression testing made easier
Since all the modules are independent of each other, you can separately test them for dependencies and changes.
5. Agility
This is one of the biggest benefits of Micro frontends over the traditional monolith structure. In case any issue occurs, there’s no need to shut down the entire frontend to fix it.
Instead, you can fix the module which is having issues while the rest of the app keeps working.
6. Better Maintenance
Micro Frontends can also save you from the pain of managing huge holistic codes. Instead, the codebase can be distributed according to features and specific teams can work on them. This way, you can efficiently maintain the entire code.
When do you need Micro Frontends?
- Your Website/WebApp has a huge user base and you constantly need to scale it accordingly
- Your Website/WebApp is so big that a single team finds it hard to maintain it
- You have multiple teams to work on the project
Core Principles of Micro Frontends
Micro Frontend works on the following principles:
1. Be technologically independent
The most basic principle behind Micro Frontends is that all teams must pick and upgrade their stack without coordinating with each other.
2. Isolate Team Code
Never share your code with the other team even if you’re using the same platform. You must build an independent app instead of relying on shared state or global variables.
3. Use team prefixes where isolation isn’t possible
Doing so will help you avoid collisions and clarify ownership. So, make sure you are namespacing everything like CSS, Local Storage, Events, Cookies, etc.
4. Favor Native Browser Features Over Custom APIs
The idea here is to use simple browser features instead of using custom APIs. In case there’s any need for a cross-team API, it must be kept as simple as possible.
5. Your Website/WebApp should be Resilient
It’s important to make sure that your Website/WebApp keeps working even if any issue occurs. You can use techniques like universal rendering and progressive enhancement to improve performance.
Given the incredible benefits it offers, the Micro frontends approach can help you boost your business productivity in unimaginable ways. You would realize how easy it will become to develop large products in less amount of time while keeping the quality excellent. Moreover, your teams will be able to work without having to be dependent on each other.
However, there are a lot of things that you need to be aware of before you consider the micro frontends approach. You will need guidance from people who have experience in the architecture and Softobiz can help you with this.
