MFE (Micro Front End) UI - FullstackCodingGuy/Developer-Fundamentals GitHub Wiki

Concept

Micro frontends are a way of breaking down a complex web application into smaller, independent, and modular units that can be developed, deployed, and updated by different teams. This approach enables faster delivery, better scalability, and more flexibility in choosing the best technologies and frameworks for each part of the user interface. Micro frontends also allow you to experiment with different features and designs without affecting the whole application, and to optimize the performance and user experience of each segment.

Understanding

Why choose Micro Frontend Architecture?

MFE can be isolated
MFE allows development teams to make changes without impacting the overall speed of the app.
MFE is not limited to the web but is more effective there.

Benefits

Design and development flexibility: It allows you to design and develop different parts of a web app separately, making it easier to change and improve each piece without affecting the rest.
Separate code bases: Each team will have its codebase to work on different parts without getting in each other’s way.
Favors native browsers over custom API: Micro Frontends use what web browsers already understand, making things smoother and more reliable instead of building some different and unique tools in terms of API.
Freedom to innovate: When implementing each part of the web application. The teams can use different technologies. Encouraging team creativity and using the best tool for the job.
Fault seclusion: The best part is if one part of the website fails, it does not bring the whole site down. Only the failed part is affected.
Faster build time: Since the code base of each team is more petite, the builds are quicker, so you can get changes and updates out to users faster.
Technology agnosticism: You can use a mix and match of technologies that are your best fit. There is no rule to use one technology as such.
Autonomous teams: Each team working on different parts of the site can make decisions independently.
Maintainability: Since MFE maintains a smaller codebase than a big one, It’s easier to find and fix issues, making maintainability easy.
Reusability: Components created for one part of the site can be reused in another, helping the team save time and effort.
Product teams empowerment and enablement
On demand delivery enablement
Technical stack flexibility
Better Maintainability
Better testing, hence quality
Technology agnosticism
Better velocity
Better knowledge of code and functional domain

Advantages

Independent Development and Deployment: With MFE, teams can work on isolated features or components, enabling independent development and deployment. Technology Agnosticism: Each micro frontend can be developed using different technologies, languages, or frameworks. This means one module can be developed in React JS while the other in Vue JS Improved Maintenance and Scaling: Scaling becomes more efficient as teams can scale specific parts of the application independently, optimizing resources and enhancing performance. Reusability: MFE encourages the creation of reusable component. This not only streamlines development but also enhances consistency and reduces redundancy across the application.

Testing Milestone

Starting with unit testing, individual micro frontends are examined to ensure their components function accurately.
Integration testing follows, validating seamless collaboration among micro frontends.
Progressing to end-to-end testing, user interactions are simulated to ensure the comprehensive functionality of the entire application.
Cross-browser testing guarantees compatibility across different web browsers, while performance testing assesses the efficiency of micro frontends.
Error handling capabilities are tested, ensuring robustness in unexpected scenarios.
Security and API testing verify the safety of micro frontends and adherence to API agreements.
Usability testing gathers valuable user feedback, refining the overall user experience.
These milestones contribute to the reliability and high-quality Micro Frontend Architecture.

Module Federation

Webpack Module Federation architecture allows for seamless sharing of state and components between modules, promoting code and asset reuse while maintaining autonomy. These modules are dynamically loaded by the host application at runtime, minimizing initial loading times and optimizing performance. This approach creates a scalable and flexible system, particularly beneficial in large-scale applications

A MFE primarily contains a Host and a Remote

Remote: Refers to the individual module that is developed and deployed independently. Each micro frontend is a standalone application with its own logic, UI components, and assets. Host: The main or shell application responsible for integrating and orchestrating the various micro frontends. It serves as the container or wrapper for the remote applications.