Discover micro Front-ends architecture
tossdaniel
Microfrontends, another innovation !
The term Micro Frontends isn’t all that new, having first appeared in 2016 in ThoughtWorks Technology Radar. It aims to extend the concepts of microservices to the frontend world.
Why a new architecture ?
Some developers have realized that a monolithic approach to the front end leads to difficulties when it comes to developing functionality with separate teams. The idea behind Micro Frontends is to consider a web application as a composition of functionalities belonging to independent teams. Each team has a distinct area of activity or mission in which it specializes.
How does it work ?
The microfrontend emphasizes independent development and deployment by considering the DOM as the shared resource owned by microfrontends. The DOM of one microfrontend must not be touched by another microfrontend, just as the database of a backend microservice must not be touched by any microservice except the one that owns/controls it.
The benefits of architecture
Independent upgrades: Some front-end applications suffer from code written under delivery pressure, and when it’s time to rewrite, it’s like touching the whole application stack. With this architecture, as each feature can be independent, we can migrate the application by separating each feature by each team.
Simple, decoupled code bases The source code of each individual microfrontend will by definition be much smaller than the source code of the monolithic application. These smaller code bases tend to be simpler and easier for developers to use.
Independent deployment As with microservices, independent deployment of microfrontends is essential. Each microfrontend can have its own CI/CD pipeline that builds, tests and deploys it to production.
Autonomous teams Teams can have full ownership of everything they need to deliver value to customers, enabling them to evolve quickly and efficiently. A simple way to do this is to divide the product up according to what users need. This brings great independence to the team
Some disadvantages of the architecture
Duplication of dependencies Independently built JavaScript bundles can lead to duplication of common dependencies, also increasing the size of the JavaScript bundles we’re going to send to our end-users.
Complexity The big drawback is the direct parallel to microservices. As a more distributed architecture, micro front-ends will inevitably lead to having more things to manage, more tools, more pipelines, more servers… and all that.
That’s it, we’ve come to the end of our introduction to this architecture. If you’d like to know more about it, I recommend Martin Fowler’s excellent article
