Discovering Micro-Frontend Architecture
What is a Micro-Frontend?
Micro-Frontend is an architecture pattern where the front-end app is decomposed into individual, loosely coupled “micro apps” that can be built, tested, and deployed independently. The Micro-Frontend architecture is similar to semi-independent microservices back-end architectures. Simply put, a Micro-Frontend is a portion of a webpage. There is a “Host” or a “Shell” page in the Micro-Frontend Architecture that can host one or more Micro-Frontends. You can use any programming language to code the components that make up a Micro-Frontend.
As a monolithic web solution grows (a single web application built as a single codebase), it becomes more complex to maintain, independent deployments become less and less possible as most of the web solution is interconnected, and performance degrades. In Micro-Frontend architecture, solutions are built by breaking down a monolithic application into smaller pieces and coding, testing, and deploying each part separately.
Main advantages
The most significant advantage that Micro-Frontend brings is the ability for each application to only implement the code it needs, separating business functionality and reducing duplication across all applications, making future changes along the line easier to implement. Some other advantages include performance (delaying loading other modules unless needed), reusability of code (shared libraries/components across applications) and independent deployment and testing (resulting in faster releases).
Disadvantages
Some of the most common drawbacks of using Micro-Frontend, as any emerging technology, include a change to the developer mindset to correctly work with this architecture (which is not simple and might take time), no established best practices yet (due to wide variety of implementations) and more complex development and deployment process (developer team/s need a better understanding of how the application is built, for them to correctly implement new features and functionalities).
Front-End: use cases
Micro-Frontend is especially useful when there is a large business domain, involving multiple developers, and wants to reduce complexity by splitting into multiple subdomains or teams, independently working on different parts of the application, without overloading communication or coordination between them. This is applicable when taking into consideration the advantages and disadvantages previously mentioned. Is it better to take the time for the development team to change and adapt to using this architecture? Do we have someone with experience with this? Do we transform all parts of the application simultaneously, or do we only work with a small part first? These are some of the questions that the team needs to ask and have a clear response for it to work.
Final Thoughts
Akin to Microservices, Micro-Frontend is all about chopping up huge things into multiple small, simpler ones, independent from each other, and it can use its own technology and teams. This can help large web application projects have a faster development time, or have better scalability. Still, we also need to take into account that this kind of solution brings problems to smaller teams, and makes simple solutions more complex than they really are.
Are you interested in exploring this topic in more detail? Here are some useful links:
https://levelup.gitconnected.com/micro-frontend-architecture-794442e9b325
