Micro Frontend Architecture

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

Timeline/Journey of Application Architecture

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

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

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.

Who is using Micro frontend

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

Micro Frontend Design Principles

Micro Frontend Design Principle : Autonomous Features

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

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

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

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

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

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

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

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

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

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