Please enable JavaScript.
Coggle requires JavaScript to display documents.
2 Micro Frontend Foundation - Coggle Diagram
2 Micro Frontend Foundation
Why?
Technology Flexibility
Parallel Development
Application is broken down to involve multiple teams is seamless.
Separate Code Repository
Isolation for Development / Maintainability and Deployment
When?
Diverse apps and native user interfaces to run on various devices
Large team
(Require multiple teams to work on the same application)
Technical Solution
Module Federation
facilitates the sharing of a common set of libraries among multiple Angular applications and enables seamless communication through a shared API.
Lazy loading [Allows separately compiled and published application components to be loaded on demand]
Webpack 5 (with Module Federation)
Wire the micro frontends together,
Demonstrate sharing authenticated state between the different front ends,
Prepare for deployment using dynamic module loading, and deploy it all to Vercel’s free hosting plan
Asynchronous loading of
Shared Assets
Static Asset Store (S3)
Error handling – Message & Event
Shared Assets
Error Boundary
(ReactJS)
End to end tracing
Bootstrap
At Client side
Start the Application
Each country can have their own host and pick micro frontend as required.
Branding library
Branding library as part of the host. MFEs can pick them from the host.
MircoFrontend UI Application
Navigation, Feed, Header, Footer
User - Scenario flow
Composition (/Wrapper) layer
Set of application pages with their corresponding routes
Widgets layer
Set of domain-related components used to build the different pages found on the composition layer
Deployment
Security
Styling solutions (CSS vs CSS-in-JS),
Enterprise
Business Requirements
Localization
Separation - Core and Regional
TTM
All departments does not share the same URL
(Sub-domain /separate URL)
Challenge
How Micro Frontend Architecture will solve the above problem?
Common URL [Similar to SPA (Single page application)]
mycompany.com/sales || mycompany.com/accounts
Using Local storage (e.g. NgRx) to share Session data among all the applications, So login into multiple domains is not required.
The user needs to login into multiple departments
Common challenges
of Angular Micro Frontend
module dependencies
consistency across modules,
versioning and compatibility issues
coordinating deployment and updates across multiple modules.
Migrating between React versions is quite easy, as there is no need to install updates one by one, as in the case of Angular
Complexity increases when you require shared states and bidirectional data passing
Each microfrontend is developed with React and each has to be downloaded when a user wants to load a page, the result is a larger download size. This could significantly impact load time, which affects user experience and conversion rate.
Benefits
Angular => provides principles of the monorepository, which is a single repository that stores multiple projects.
The high level of this architecture is divided into three main parts: workspace, projects and libraries.
Best practices
Workflow organization
Business modules (App Tier) should be aligned.
well-designed contracts on APIs
right size for micro frontends
Do not create too many micro frontends
Single Page Application (SPA)
Each micro frontend should itself be a single page application.
Angular, ReactJS, Vue
Communication
The different micro frontends must communicate with each other through a standard event bus.
https://developer.okta.com/blog/2022/05/19/angular-microfrontend-deploy
Avoid Micro frontend anarchy
[Define Guardrails]
Micro frontend anarchy: using multiple frontend frameworks — for example, React.js and Angular — in the same "single-page" application
Each micro frontend should be configuration driven and should be pluggable.
Independent Testing
Each team should have scaffolding as required for independent testing => ownership model
KPIs
TTM
Parallel Development
Independent deployability
Operational Efficiency
Developer Experience
Reusability
Challenges
Communicate between micro-frontends
Identify the size of a micro-frontend
Route the user from one view to another