This document discusses micro frontends, which is a microservices approach to front end web development. It outlines some issues with monolithic frontends like scaling and communication problems. It then discusses micro frontend design principles such as autonomous features, team ownership, being tech agnostic, driving value, and following microservices patterns. Finally, it covers techniques for implementing micro frontends including using separate or shared runtimes with options like micro apps, iframes, or webpack modular federation and integrating them through runtime, build time, or iframe methods.

1. Micro Frontend Architecture

2. Index
● Timeline/Journey of Application Architecture
● Issues with Monolith Frontends
● Microservices design principles
● What is Micro frontEnd
● Who is using Micro frontend
● Micro Frontend Design Principles
● Micro frontend Techniques and Technologies

3. Timeline/Journey of Application Architecture

4. Issues with Monolith Frontends
Scaling issues
- Frontend application - Frontend team
Communication issues
- Multiple teams for one feature change
- Exhausts time
Code and testing complexity
- Increased risk
- Slows continuous delivery

5. Microservices design principles
● Autonomous
● Business domain centric
● Observable
● Automation
Micro Frontend is a microservice approach to front end web
development.

6. What is Micro frontEnd
Micro Frontend is a micro service approach to
front end web development. The concept of Micro
Frontend is to think about a web application as a
composition of features owned by different
independent teams. Each team has a distinct
area of business or mission it cares about and
specialises in. A team is cross functional and
develops its features end-to-end.

7. Who is using Micro frontend

8. Micro Frontend Design Principles
● Autonomous
● Features
● Team Ownership
● Tech Agnostic
● User Experience
● Value Driven
● Microservices Driven

9. Micro Frontend Design Principles

10. Micro Frontend Design Principle : Autonomous Features

11. Micro Frontend Design Principle : Autonomous Features
● Independently changeable
● Independently deployable
● Code isolation
● Base app

12. Micro Frontend Design Principle : Team Ownership
End to end feature owned by a team
Cross functional team
Business domain or function
Focus on one component

13. Micro Frontend Design Principle : Tech Agnostic
Future proofing
Right tech
Avoid retrofitting
Motivates team
Simplification of tech
Angular > React > Vue > ?

14. Micro Frontend Design Principle : User Experience
Performant and fast loading
- Sensible amount of frameworks
Corporate identity
- Base app
- Style guide vs CSSJS framework
User interactions
- Cohesive and responsive UI
Fluid workflow
Cross browser compatibility
Consistency across versions

15. Micro Frontend Design Principle : Value Driven
Each micro frontend is a feature
Features bring value to the customer
Entire team can deliver value
End to end value
End to end value driven benefits
- Backend APIs optimized for frontend
- Data storage optimized for frontend

16. Micro Frontend Design Principle : Microservices Driven
Microservices Extension API
Gateway or BFF API Bounded
context and UI
Modular

17. Micro frontend Techniques and Technologies
Separate Runtime
● Micro App (url based)
● Iframe
● Webpack Modular federation
Shared Runtime
● Single framework based components
● Multiple framework based
components
● Web components
Separate Runtime
Micro App
Iframe
Webpack Modular
federation
Shared Runtime
Single framework
Multiple framework
Web component
Runtime Techniques

18. Micro frontend Techniques and Technologies
Separate Runtime
● Micro App (url based)
● Iframe (ZOID)
● Webpack Modular federation
(webpack.js.org/concepts/module-federation)
Shared Runtime
● Single framework based components
(Like components built separately in
react or only built in Angular, like
storybook)
● Multiple framework based components
(use framework like opencomponents,
single-spa.js.org, frintjs)
● Web components (webcomponents.org)
Separate Runtime
Micro App
Iframe
Webpack Modular
federation
Shared Runtime
Single framework
Multiple framework
Web component
Runtime Techniques

19. Micro frontend Techniques and Technologies
Runtime integration
● Micro App (url based)
● Webpack Modular federation
(webpack.js.org/concepts/module-federation)
Build time integration
● Single framework based components
(React storybook, Npm based module)
● Multiple framework based components
(opencomponents, single-spa.js.org,
frintjs)
● Web components
Iframe integration
● Iframe
● ZOID
Server Side integration
Runtime
Integration
Micro App
Webpack Modular
federation
Build time
Integration
Single framework
Multiple framework
Web component
Integration Based Techniques
Iframe Integration
Iframe
Zoid

20. REF URLS :
11 Micro Frontends Frameworks You Should Know : https://itnext.io/11-micro-frontends-
frameworks-you-should-know-b66913b9cd20
Micro Frontend : https://micro-frontends.org