SlideShare a Scribd company logo
1 of 31
‘Micro Frontends’
Micro App
Micro App Micro App
By Om Singh Build-Test-Deploy in Isolation
Modern Front-end Engineering
Domain driven design approach.
Extending the microservices architecture
pattern to
Frontend-development.
What is Micro Frontends ?
History of web frameworks timeline
The Traditional Approach
The Micro Frontends approach
Vanilla Architecture
Why micro frontends?
Because traditional
approach doesn’t
work for larger
web apps
Tip
Micro-frontend is an
architecture pattern.
"An architectural style
where independently
deliverable frontend
applications are composed
into a greater whole"
Thoughtworks Technology Radar
2016-2017 2017-2018-2019-2020
Nov 2016 Mar 2017
Assess
Nov 2017 May 2018
Trail
April 2019 Nov 2019
Adopt
May 2020
Adopt
https://www.thoughtworks.com/radar/techniques/micro-frontends
Benefits
Benefits
★ Incremental upgrades
★ Simple, decoupled codebases
★ Reducing communication overhead
★ Independent deployment != Independent release
★ Autonomous Teams
★ Freedom to innovate
Independent deployment
Autonomous Teams
★ Should solve specific business problem
★ Reusable smaller app/fragment/component
★ Micro app should be independent and
isolated
★ Minimum dependencies
★ Technology or framework agnostic
★ Easier to understand, develop, test and
deploy
★ Faster and reliable CI/CD
Micro Frontends Core Principles
Downsides
Downsides
★ Payload Size due to library but Module federation
★ Redundant codebase
★ Environment differences
★ Operational and governance complexity
★ No standard framework but
https://opencomponents.github.io/ is interesting
How To Migrate
How to migrate legacy App
Stitching Layer - Having Header, Navigation and Footer
Monolith App
Product
Search
Checkout
Product
App
Search
App
Checkout
App
Step-1
Step-2
Step-3 Step-4 Step-5
Problems to solve
Problems to solve
★ How to compose stitching layer
★ Cross-application communication
★ Backed communication
★ Testing
★ Common/shared content
★ Infrastructure
★ Consistent theme/style
Backend communication
Implementation
Frameworks to implement
Server Side Frameworks
SSI (Server Side Includes)
Varnish ESI (Edge Side Includes)
Tailor - https://github.com/zalando/tailor
Client Side Frameworks
Single-spa - https://single-spa.js.org/
Frint JS - https://frint.js.org/
<iframe>
Zalando’s solution
It is called the Project Mosaic9
https://www.mosaic9.org/
Demo
Single-Spa
A javascript router for front-end microservices
See a short video on Single-Spa
Whether micro frontends are the right approach for you and
your organization or not depends on problem you’re trying to
solve.
Don’t use this if you have a simple app. It should make your
life easier not complicated. It also doesn’t mean to use every
framework in the world. Don’t forget to use core principles.
Conclusion
Q&A
Thank you for joining us, see you next sunday!
Thank you

More Related Content

What's hot

Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...Shift Conference
 
Globant development week / Micro frontend
Globant development week / Micro frontendGlobant development week / Micro frontend
Globant development week / Micro frontendGlobant
 
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai..."Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...Fwdays
 
Micro frontend: The microservices puzzle extended to frontend
Micro frontend: The microservices puzzle  extended to frontendMicro frontend: The microservices puzzle  extended to frontend
Micro frontend: The microservices puzzle extended to frontendAudrey Neveu
 
How to build Micro Frontends with @angular/elements
How to build Micro Frontends with @angular/elementsHow to build Micro Frontends with @angular/elements
How to build Micro Frontends with @angular/elementsMarcellKiss7
 
Micro Front-End & Microservices - Plansoft
Micro Front-End & Microservices - PlansoftMicro Front-End & Microservices - Plansoft
Micro Front-End & Microservices - PlansoftMiki Lombardi
 
Introduction to microservices
Introduction to microservicesIntroduction to microservices
Introduction to microservicesAnil Allewar
 
Introduction to Microservices
Introduction to MicroservicesIntroduction to Microservices
Introduction to MicroservicesMahmoudZidan41
 
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap..."Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...Fwdays
 
Micro Frontends Architecture
Micro Frontends ArchitectureMicro Frontends Architecture
Micro Frontends ArchitectureRag Dhiman
 
Building applications in a Micro-frontends way
Building applications in a Micro-frontends wayBuilding applications in a Micro-frontends way
Building applications in a Micro-frontends wayPrasanna Venkatesan
 
API design-first and Microservices
API design-first and MicroservicesAPI design-first and Microservices
API design-first and MicroservicesSven Bernhardt
 
What are Microservices | Microservices Architecture Training | Microservices ...
What are Microservices | Microservices Architecture Training | Microservices ...What are Microservices | Microservices Architecture Training | Microservices ...
What are Microservices | Microservices Architecture Training | Microservices ...Edureka!
 
Microservices Api Gateway Eureka Server.pptx
Microservices Api Gateway Eureka Server.pptxMicroservices Api Gateway Eureka Server.pptx
Microservices Api Gateway Eureka Server.pptxAayush Chimaniya
 

What's hot (20)

Micro Frontends
Micro FrontendsMicro Frontends
Micro Frontends
 
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
 
Micro frontends
Micro frontendsMicro frontends
Micro frontends
 
Globant development week / Micro frontend
Globant development week / Micro frontendGlobant development week / Micro frontend
Globant development week / Micro frontend
 
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai..."Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
 
Micro frontend: The microservices puzzle extended to frontend
Micro frontend: The microservices puzzle  extended to frontendMicro frontend: The microservices puzzle  extended to frontend
Micro frontend: The microservices puzzle extended to frontend
 
Micro-frontend
Micro-frontendMicro-frontend
Micro-frontend
 
Micro Frontends
Micro FrontendsMicro Frontends
Micro Frontends
 
How to build Micro Frontends with @angular/elements
How to build Micro Frontends with @angular/elementsHow to build Micro Frontends with @angular/elements
How to build Micro Frontends with @angular/elements
 
Micro Front-End & Microservices - Plansoft
Micro Front-End & Microservices - PlansoftMicro Front-End & Microservices - Plansoft
Micro Front-End & Microservices - Plansoft
 
Micro-frontends – is it a new normal?
Micro-frontends – is it a new normal?Micro-frontends – is it a new normal?
Micro-frontends – is it a new normal?
 
Introduction to microservices
Introduction to microservicesIntroduction to microservices
Introduction to microservices
 
Introduction to Microservices
Introduction to MicroservicesIntroduction to Microservices
Introduction to Microservices
 
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap..."Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...
 
Micro Frontends Architecture
Micro Frontends ArchitectureMicro Frontends Architecture
Micro Frontends Architecture
 
Building applications in a Micro-frontends way
Building applications in a Micro-frontends wayBuilding applications in a Micro-frontends way
Building applications in a Micro-frontends way
 
API design-first and Microservices
API design-first and MicroservicesAPI design-first and Microservices
API design-first and Microservices
 
Introduction to Microservices
Introduction to MicroservicesIntroduction to Microservices
Introduction to Microservices
 
What are Microservices | Microservices Architecture Training | Microservices ...
What are Microservices | Microservices Architecture Training | Microservices ...What are Microservices | Microservices Architecture Training | Microservices ...
What are Microservices | Microservices Architecture Training | Microservices ...
 
Microservices Api Gateway Eureka Server.pptx
Microservices Api Gateway Eureka Server.pptxMicroservices Api Gateway Eureka Server.pptx
Microservices Api Gateway Eureka Server.pptx
 

Similar to Micro Frontends.pptx

Micro frontends with react and redux dev day
Micro frontends with react and redux   dev dayMicro frontends with react and redux   dev day
Micro frontends with react and redux dev dayPrasanna Venkatesan
 
ICONUK 2014 - From Idea To App
ICONUK 2014 - From Idea To AppICONUK 2014 - From Idea To App
ICONUK 2014 - From Idea To AppRené Winkelmeyer
 
Scaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdfScaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdfKatamaRajuBandigari1
 
Latest trends in information technology
Latest trends in information technologyLatest trends in information technology
Latest trends in information technologyEldos Kuriakose
 
'How to build your first micro frontend in a matter of minutes' by Vladlen Fe...
'How to build your first micro frontend in a matter of minutes' by Vladlen Fe...'How to build your first micro frontend in a matter of minutes' by Vladlen Fe...
'How to build your first micro frontend in a matter of minutes' by Vladlen Fe...OdessaJS Conf
 
OdessaJs 2020 - How to build your first micro frontend in a matter of minutes
OdessaJs 2020 - How to build your first micro frontend in a matter of minutesOdessaJs 2020 - How to build your first micro frontend in a matter of minutes
OdessaJs 2020 - How to build your first micro frontend in a matter of minutesVlad Fedosov
 
Important Backend Frameworks To Remember For Businesses In 2023
Important Backend Frameworks To Remember For Businesses In 2023Important Backend Frameworks To Remember For Businesses In 2023
Important Backend Frameworks To Remember For Businesses In 2023Netizens Technologies
 
ThatConference 2016 - Highly Available Node.js
ThatConference 2016 - Highly Available Node.jsThatConference 2016 - Highly Available Node.js
ThatConference 2016 - Highly Available Node.jsBrad Williams
 
Software Factories in the Real World: How an IBM WebSphere Integration Factor...
Software Factories in the Real World: How an IBM WebSphere Integration Factor...Software Factories in the Real World: How an IBM WebSphere Integration Factor...
Software Factories in the Real World: How an IBM WebSphere Integration Factor...ghodgkinson
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to ReactTomasz Bak
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Jonas Bandi
 
Java Development Company | Xicom
Java Development Company | XicomJava Development Company | Xicom
Java Development Company | XicomRyanForeman5
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver
 
Meetup which approach to choose?
Meetup   which approach to choose?Meetup   which approach to choose?
Meetup which approach to choose?Joe Mbaya
 
Microservice Approach for Web Development with Micro Frontends
Microservice Approach for Web Development with Micro FrontendsMicroservice Approach for Web Development with Micro Frontends
Microservice Approach for Web Development with Micro Frontendsandrejusb
 
Top Backend Frameworks for Mobile App Development in 2023
Top Backend Frameworks for Mobile App Development in 2023Top Backend Frameworks for Mobile App Development in 2023
Top Backend Frameworks for Mobile App Development in 2023ZimbleCodeAustralia
 
SpringIO 2016 - Spring Cloud MicroServices, a journey inside a financial entity
SpringIO 2016 - Spring Cloud MicroServices, a journey inside a financial entitySpringIO 2016 - Spring Cloud MicroServices, a journey inside a financial entity
SpringIO 2016 - Spring Cloud MicroServices, a journey inside a financial entityjordigilnieto
 
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entitySpring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entityToni Jara
 
Case Study: Practical tools and strategies for tackling legacy practices and ...
Case Study: Practical tools and strategies for tackling legacy practices and ...Case Study: Practical tools and strategies for tackling legacy practices and ...
Case Study: Practical tools and strategies for tackling legacy practices and ...Alejandro S.
 
5 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 20225 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 202275waytechnologies
 

Similar to Micro Frontends.pptx (20)

Micro frontends with react and redux dev day
Micro frontends with react and redux   dev dayMicro frontends with react and redux   dev day
Micro frontends with react and redux dev day
 
ICONUK 2014 - From Idea To App
ICONUK 2014 - From Idea To AppICONUK 2014 - From Idea To App
ICONUK 2014 - From Idea To App
 
Scaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdfScaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdf
 
Latest trends in information technology
Latest trends in information technologyLatest trends in information technology
Latest trends in information technology
 
'How to build your first micro frontend in a matter of minutes' by Vladlen Fe...
'How to build your first micro frontend in a matter of minutes' by Vladlen Fe...'How to build your first micro frontend in a matter of minutes' by Vladlen Fe...
'How to build your first micro frontend in a matter of minutes' by Vladlen Fe...
 
OdessaJs 2020 - How to build your first micro frontend in a matter of minutes
OdessaJs 2020 - How to build your first micro frontend in a matter of minutesOdessaJs 2020 - How to build your first micro frontend in a matter of minutes
OdessaJs 2020 - How to build your first micro frontend in a matter of minutes
 
Important Backend Frameworks To Remember For Businesses In 2023
Important Backend Frameworks To Remember For Businesses In 2023Important Backend Frameworks To Remember For Businesses In 2023
Important Backend Frameworks To Remember For Businesses In 2023
 
ThatConference 2016 - Highly Available Node.js
ThatConference 2016 - Highly Available Node.jsThatConference 2016 - Highly Available Node.js
ThatConference 2016 - Highly Available Node.js
 
Software Factories in the Real World: How an IBM WebSphere Integration Factor...
Software Factories in the Real World: How an IBM WebSphere Integration Factor...Software Factories in the Real World: How an IBM WebSphere Integration Factor...
Software Factories in the Real World: How an IBM WebSphere Integration Factor...
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to React
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!
 
Java Development Company | Xicom
Java Development Company | XicomJava Development Company | Xicom
Java Development Company | Xicom
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
Meetup which approach to choose?
Meetup   which approach to choose?Meetup   which approach to choose?
Meetup which approach to choose?
 
Microservice Approach for Web Development with Micro Frontends
Microservice Approach for Web Development with Micro FrontendsMicroservice Approach for Web Development with Micro Frontends
Microservice Approach for Web Development with Micro Frontends
 
Top Backend Frameworks for Mobile App Development in 2023
Top Backend Frameworks for Mobile App Development in 2023Top Backend Frameworks for Mobile App Development in 2023
Top Backend Frameworks for Mobile App Development in 2023
 
SpringIO 2016 - Spring Cloud MicroServices, a journey inside a financial entity
SpringIO 2016 - Spring Cloud MicroServices, a journey inside a financial entitySpringIO 2016 - Spring Cloud MicroServices, a journey inside a financial entity
SpringIO 2016 - Spring Cloud MicroServices, a journey inside a financial entity
 
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entitySpring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
 
Case Study: Practical tools and strategies for tackling legacy practices and ...
Case Study: Practical tools and strategies for tackling legacy practices and ...Case Study: Practical tools and strategies for tackling legacy practices and ...
Case Study: Practical tools and strategies for tackling legacy practices and ...
 
5 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 20225 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 2022
 

Recently uploaded

What is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWhat is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWave PLM
 
EY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityEY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityNeo4j
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesPhilip Schwarz
 
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxKnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxTier1 app
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)OPEN KNOWLEDGE GmbH
 
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptchapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptkotipi9215
 
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024StefanoLambiase
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureDinusha Kumarasiri
 
Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...Velvetech LLC
 
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...OnePlan Solutions
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaHanief Utama
 
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEBATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEOrtus Solutions, Corp
 
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte GermanySuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte GermanyChristoph Pohl
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfAlina Yurenko
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideChristina Lin
 
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmSujith Sukumaran
 
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样umasea
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - InfographicHr365.us smith
 
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...soniya singh
 
Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)Hr365.us smith
 

Recently uploaded (20)

What is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWhat is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need It
 
EY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityEY_Graph Database Powered Sustainability
EY_Graph Database Powered Sustainability
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a series
 
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxKnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)
 
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptchapter--4-software-project-planning.ppt
chapter--4-software-project-planning.ppt
 
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
 
Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...
 
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief Utama
 
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEBATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
 
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte GermanySuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
 
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
 
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - Infographic
 
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
 
Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)
 

Micro Frontends.pptx

  • 1. ‘Micro Frontends’ Micro App Micro App Micro App By Om Singh Build-Test-Deploy in Isolation Modern Front-end Engineering
  • 2. Domain driven design approach. Extending the microservices architecture pattern to Frontend-development. What is Micro Frontends ?
  • 3. History of web frameworks timeline
  • 5.
  • 8. Why micro frontends? Because traditional approach doesn’t work for larger web apps Tip Micro-frontend is an architecture pattern. "An architectural style where independently deliverable frontend applications are composed into a greater whole"
  • 9. Thoughtworks Technology Radar 2016-2017 2017-2018-2019-2020 Nov 2016 Mar 2017 Assess Nov 2017 May 2018 Trail April 2019 Nov 2019 Adopt May 2020 Adopt https://www.thoughtworks.com/radar/techniques/micro-frontends
  • 11. Benefits ★ Incremental upgrades ★ Simple, decoupled codebases ★ Reducing communication overhead ★ Independent deployment != Independent release ★ Autonomous Teams ★ Freedom to innovate
  • 14. ★ Should solve specific business problem ★ Reusable smaller app/fragment/component ★ Micro app should be independent and isolated ★ Minimum dependencies ★ Technology or framework agnostic ★ Easier to understand, develop, test and deploy ★ Faster and reliable CI/CD Micro Frontends Core Principles
  • 16. Downsides ★ Payload Size due to library but Module federation ★ Redundant codebase ★ Environment differences ★ Operational and governance complexity ★ No standard framework but https://opencomponents.github.io/ is interesting
  • 18. How to migrate legacy App Stitching Layer - Having Header, Navigation and Footer Monolith App Product Search Checkout Product App Search App Checkout App Step-1 Step-2 Step-3 Step-4 Step-5
  • 20.
  • 21. Problems to solve ★ How to compose stitching layer ★ Cross-application communication ★ Backed communication ★ Testing ★ Common/shared content ★ Infrastructure ★ Consistent theme/style
  • 24. Frameworks to implement Server Side Frameworks SSI (Server Side Includes) Varnish ESI (Edge Side Includes) Tailor - https://github.com/zalando/tailor Client Side Frameworks Single-spa - https://single-spa.js.org/ Frint JS - https://frint.js.org/ <iframe>
  • 25. Zalando’s solution It is called the Project Mosaic9 https://www.mosaic9.org/
  • 26. Demo
  • 27. Single-Spa A javascript router for front-end microservices See a short video on Single-Spa
  • 28.
  • 29. Whether micro frontends are the right approach for you and your organization or not depends on problem you’re trying to solve. Don’t use this if you have a simple app. It should make your life easier not complicated. It also doesn’t mean to use every framework in the world. Don’t forget to use core principles. Conclusion
  • 30. Q&A Thank you for joining us, see you next sunday!