MFE (Micro Front End) UI
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.
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.