-
History
- 2011: Microservices
- 2016 - Thought Works added to the technology radar
- Nov 2017: Thought Works recommended Single-Spa for Micro-frontends implementation
- 2019: Martin Fowler wrote his article about Micro-frontends and promoted Micro-frontends architecture in his article “Micro Frontends.”
- Oct 2020: By the end of 2020, Zack Jackson released his masterpiece “Module Federation” as a plugin in Webpack 5
- Apr 2021: Thought-works started to recommend Module Federation for Micro-frontends implementations
-
Atomic Design
- Atoms
- Molecules
- Organisms
- Templates
- Pages
-
Benefits
- Independent Artifacts
- Autonomous teams
- Flexible technology choices
- Scalable development
- Easier maintenance
-
Challenges
- Parent/child integration
- Operational overhead
- Consistent user experience
-
Micro-Frontends Communication
-
User interface communication
- Parent to fragment
- Fragment to parent
- Fragment to fragment
- Publish/Subscribe with the Broadcast Channel API
-
Sharing state
- Web Workers
- Props and callbacks
- Custom Events
- Pub Sub library(windowed-observable)
- Custom implementation
-
Composition of Micro-frontends
-
Client-side composition
- Fragments
-
Libraries
- single-spa/single-spa
- frintjs/frint
- smapiot/piral
-
Edge-side composition
- Lambda@Edge
-
Rendering Example
- Next.js using Lambda@Edge and Serverless Framework
- Cloudflare Workers using a framework called Flareact
- AWS Lambda + CloudFront
-
Server-side composition
- Layout Server
- Fragments Server
- Fragment Gateway
-
Libraries
- Ara Framework
- OpenComponents
- Piral
- Tailor
-
Build Time Composition
- Shared libraries
- Static Site Generators
- Bit
-
Defining Micro-Frontends
- Horizontal split
- Vertical split
-
Identifying micro-frontends in our applications
- Core Subdomains
- Supporting Subdomains
- Generic Subdomains