Micro frontends: Are we overcomplicating things?

The majority of techies have embraced the Microservices architecture. Microservices pattern splits large application into smaller microservices (each microservice takes care of a specific functionality).

Microservices architecture is all about the backend services, but what about the frontend? It is still one solid piece, right? Micro frontends come handy in this situation.

What is it?

Micro frontends pattern is a way of breaking down a large web application into smaller, more manageable pieces. Each piece is a separate frontend application, built with its own technology stack and deployed independently.

As?implied?by?the?name,?it?draws?inspiration?from?the?microservices?pattern of the backend. But there is a difference. In case of microservices, we can deploy each service independently. Though micro-frontends can also be deployed independently, we need a mechanism to bring all these micro-frontends together to form an application.

How relevant is it?

Micro frontends are becoming increasingly popular in modern day applications due to their ability to break down complex applications into smaller, more manageable components. This allows developers to work on different parts of the application in parallel, resulting in faster development cycles and improved scalability.

Additionally, micro frontends can help reduce the complexity of the application by allowing developers to focus on specific areas of the application, rather than having to understand the entire system. This can also help reduce the risk of introducing bugs or other issues into the application.

Approaches for implementing micro frontends

As we know, there is a need for a mechanism to bring multiple micro frontends together to form an application. Following are the different approaches for achieving this.

1. iframe: This approach involves creating an iframe for each micro frontend and loading the application code inside the iframe. This approach is simple to implement and provides a good level of isolation between the micro frontends.

2. Web Components: This approach involves using web components to create custom HTML elements that can be used to encapsulate the micro frontend code. This approach provides a good level of isolation between the micro frontends and allows for more flexibility in terms of styling and layout.

3. Single-spa: This approach involves using a library called single-spa to create a single-page application that can be used to host multiple micro frontends. This approach provides a good level of isolation between the micro frontends and allows for more flexibility in terms of styling and layout.

4. Server-side composition: This approach involves using a server-side technology such as Node.js to compose the micro frontends into a single page application. This approach provides a good level of isolation between the micro frontends and allows for more flexibility in terms of styling and layout.

Popular micro frontend frameworks

Here is a list of micro frontend frameworks (Can we classify all of these as frameworks? probably not). This is not an attempt to recommend any framework. Before deciding which one best meets your needs, each must be carefully examined.

• Single-SPA (https://single-spa.js.org/)
• Bit (https://bit.dev/)
• Luigi (https://luigi-project.io/)
• Piral (https://piral.io/)
• Qiankun (https://qiankun.umijs.org/)
• Module Federation (https://webpack.js.org/concepts/module-federation/)
• SystemJS (https://github.com/systemjs/systemjs)
• Podium (https://podium-lib.io/)
• ?….

Advantages

1.??????Improved scalability: Micro frontends allow for better scalability as each component can be developed, tested, and deployed independently. This makes it easier to scale up or down as needed.

2.?????Improved maintainability: By breaking down the frontend into smaller components, it becomes easier to maintain and update each component independently. This makes it easier to keep the codebase up to date and bug-free.

3.?????Improved team collaboration: By breaking down the frontend into smaller components, it becomes easier for teams to collaborate on different parts of the project. This makes it easier to divide and conquer tasks, and also makes it easier to integrate changes from different teams.

4.?????Improved performance: By breaking down the frontend into smaller components, it becomes easier to optimize each component for better performance. This makes it easier to ensure that the application is running as efficiently as possible.

Disadvantages

1.??????Increased complexity: Micro frontends can add complexity to the development process, as each team must be responsible for their own codebase and must ensure that their code is compatible with the other teams’ code.

2.?????Increased cost: The cost of developing and maintaining multiple codebases can be expensive, as each team must be responsible for their own codebase.

3.?????Increased risk: With multiple codebases, there is an increased risk of bugs and compatibility issues.

4.?????Increased coordination: With multiple teams working on different codebases, there must be increased coordination between teams to ensure that all code is compatible.

Conclusion

Micro frontends can be an excellent way to divide a large application into more manageable, smaller chunks. It could, however, make the development process more complex. The trade-offs between the advantages of micro-frontends and the potential complexity they can add, should be taken into account.

It is definitely complex. If the complexity outweighs the advantages, it might be preferable to stick with a more conventional strategy.