Coupled development, testing and deployment as teams grow
Current architecture
Monolith SPA front-end and microservices back-end
Pain Points
No clear ownership
Tightly coupled deployments ( if team 1's feature is ready to be deployment, deploy to clients is coupled with other teams)
Teams spend team in getting consensus for technology choices
Innovation is hard
Micro Frontends + Microservices
What is MicroFrontEnds?
Micro-FrontEnds are the technical representation of a business subdomain. they provide strong boundaries with clear contracts, also they avoid sharing logic with other sub domains.
Architecture
Each section is a Micro Frontend (owned by a team that can develop, test and deploy independently)
The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams.
Micro Frontends are autonomous user experiences that provide a solution that is unique and distinct within the user workflow. (Eg: Entity profile, orders, audit, file center, forms, matching)
Each team has a distinct area of business or mission it cares about and specialises in.
Is a variation of Single Page Application (Backend Microservices + Giant FrontEnd Monolith)
Promotes Domain Driven Design and team ownership
Lets each team to operate independently - (Each team can develop, test and deploy independently)
Single Responsibility Principle - Each Micro Frontend is responsible for a specific feature or functionality or aggregation of cohesive functionality
Promotes
Domain Driven Design
Team ownership - team can develop, test and deploy independently
Reduced bundle size for each app
Core Ideas behind Micro Frontends
Be Technology Agnostic
Each team should be able to choose and upgrade their stack without having to coordinate with other teams. Custom Elements are a great way to hide implementation details while providing a neutral interface to others.
Isolate Team Code
Don’t share a runtime, even if all teams use the same framework. Build independent apps that are self contained. Don’t rely on shared state or global variables.
Establish Team Prefixes
Agree on naming conventions where isolation is not possible yet. Namespace CSS, Events, Local Storage and Cookies to avoid collisions and clarify ownership.
Favor Native Browser Features over Custom APIs
Use Browser Events for communication instead of building a global PubSub system. If you really have to build a cross team API, try keeping it as simple as possible.
Build a Resilient Site
Your feature should be useful, even if JavaScript failed or hasn’t executed yet. Use Universal Rendering and Progressive Enhancement to improve perceived performance.
Micro-FrontEnd Architecture
Problem we are trying to solve
Current architecture
Monolith SPA front-end and microservices back-end
Pain Points
Micro Frontends + Microservices
What is MicroFrontEnds?
Architecture
Each section is a Micro Frontend (owned by a team that can develop, test and deploy independently)
Micro Frontends
Reference
Single Responsibility Principle - Each Micro Frontend is responsible for a specific feature or functionality or aggregation of cohesive functionality
Promotes
Core Ideas behind Micro Frontends
Be Technology Agnostic
Each team should be able to choose and upgrade their stack without having to coordinate with other teams. Custom Elements are a great way to hide implementation details while providing a neutral interface to others.
Isolate Team Code
Don’t share a runtime, even if all teams use the same framework. Build independent apps that are self contained. Don’t rely on shared state or global variables.
Establish Team Prefixes
Agree on naming conventions where isolation is not possible yet. Namespace CSS, Events, Local Storage and Cookies to avoid collisions and clarify ownership.
Favor Native Browser Features over Custom APIs
Use Browser Events for communication instead of building a global PubSub system. If you really have to build a cross team API, try keeping it as simple as possible.
Build a Resilient Site
Your feature should be useful, even if JavaScript failed or hasn’t executed yet. Use Universal Rendering and Progressive Enhancement to improve perceived performance.
MicroFrontEnds approaches
Recommendation
Reference Links
https://opencomponents.github.io/
Blog
Building Microfrontends Part I — Creating small apps Building Microfrontends Part II — Joining apps together
Video reference materials
Micro Frontends: Break Up You Web App! Micro Frontend Architecture - DAZN
Git reference materials
https://github.com/neuland/micro-frontends/blob/master/index.md#additional-resources https://github.com/rajasegar/awesome-micro-frontends https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16 https://github.com/willmendesneto/micro-frontend-react-pages https://github.com/topics/micro-frontends
Good examples