Understanding Micro-frontends

Hey guys, let's talk a little about micro frontend. I looked for a practical and direct approach to this topic on the web and found little relevant material, so I decided to bring up this subject to share the main reasons for use, implementation challenges and how this architecture used by large companies works with a more simplified approach for developers. beginners.
To access more detailed information on this subject, I suggest looking at this article by Cam Jackson https://martinfowler.com/articles/micro-frontends.html

Straight to the point

Micro frontends, is an architectural style where frontend web applications are delivered independently, being composed in a parent application.
The main benefits of adopting this architecture are:

• Smaller, more cohesive and maintainable codebases
• Autonomous and decoupled teams;
• Greater scalability;
• Greater refactoring capacity;

In practice, let's imagine a web application where users can access different functionalities from several different domains. This application is developed by a single team and as new features emerge, this team needs to work on coding, building, testing and deploying, having only one code base with its pipeline.

Imagining a scenario where the project scales and gains new features from different domains, it is natural that there will be several conflicts in the development process due to the increase in code complexity and the efficiency of feature deliveries.

That said, independent deployment of micro frontends is essential. This reduces the scope of any deployment, which in turn reduces the associated risk. Regardless of how or where frontend code is hosted, each micro frontend must have its own continuous delivery pipeline, which builds, tests, and deploys all the way to production. The responsible team must be able to deploy each micro frontend with very little consideration given to the current state of other codebases or pipelines.

Further below we can observe the flow of a continuous isolated delivery by independent teams deploying different isolated functionalities in a parent application that we call a container.

Conclusion

Micro frontends are about slicing large applications into smaller, more manageable chunks, and then being explicit about the dependencies between them. Our technology choices, our codebases, our teams, and our release processes must be able to operate and evolve independently of each other without excessive coordination.

Soon I will bring a tutorial on implementing a micro frontend in practice. I will show some examples of real cases in corporate environments.

The above is the detailed content of Understanding Micro-frontends. For more information, please follow other related articles on the PHP Chinese website!