SlideShare ist ein Scribd-Unternehmen logo
1 von 17
Downloaden Sie, um offline zu lesen
Micro Frontends mit Web Components
Dominik Haas
dominik.haas@qaware.de
Agenda für heute
● Microservices und Micro Frontends
● Web Components
● Micro Frontends mit Web Components
Wir entwickeln heute viele Projekte als Microservices
Quelle: https://martinfowler.com/articles/microservices.html
Das Frontend ruft die verschiedenen Micro Services auf,
oder?
Backend A
Frontend
DB A
Backend B
DB B
Backend C
DB C
Ein fachlicher Microservice sollte auch die GUI beinhalten!
Frontend
Backend A
Frontend A
DB A
Backend B
Frontend B
DB B
Backend C
Frontend C
DB C
✓
Backend A
Frontend
DB A
Backend B
DB B
Backend C
DB C
❌
Was wir wollen
Eine kombinierte Anwendung für den Benutzer, weil
■ er für seine Arbeit verschiedene fachliche Kontexte benötigt
■ ein Wechsel in andere Applikationen oder Tabs nicht praktikabel ist
Micro Frontends - Microservices auch im Frontend, weil
■ Fachlicher Schnitt
■ Einfache, verständliche, abgeschlossene Einheit
■ Technologische Unabhängigkeit
■ Unabhängige Deployments
■ Unabhängige Entwicklerteams
■ Schrittweise Umsetzung (Strangler Pattern)
Agenda für heute
● Microservices und Micro Frontends
● Web Components
● Micro Frontends mit Web Components
Web Components in 10 Sekunden
Die Komponenten können Parameter bekommen und Events
verschicken
<profile-details profile="1337" id="profileDetails"></profile-details>
<script type="text/javascript">
let profileDetailsElement = document.getElementById('profileDetails');
profileDetailsElement.addEventListener('map', (e) => {
console.log("Payload is: " + e.detail);
})
</script>
Es gibt einige Wege um Web Components zu entwickeln
Plain JavaScript JavaScript Compiler
Frameworks
■ Svelte
■ Stencil.js
■ …
JavaScript
Frameworks
■ Vue
■ Angular
■ React
■ ….
Demo Web Component mit Svelte
Setup a new Svelte Project
# Clone the svelte project template to folder my-svelte-project
npx degit sveltejs/template my-svelte-project
# Install npm dependencies
cd my-svelte-project
npm i
# Start development server
npm run dev & open http://localhost:8080
Agenda für heute
● Microservices und Micro Frontends
● Web Components
● Micro Frontends mit Web Components
Wir können jetzt Web Components nutzen um client-seitig
Micro Frontends zu kombinieren
Service A
Service App Shell
Service B
App Shell
GUI B
1 - initial load
2 - load scripts
3 - REST call
Bei einer Navigation werden die Web Components
ausgetauscht
App Shell
GUI B
App Shell
GUI A
Demo Micro Frontends mit Web
Components
QAlocations
Profile
Q&A

Weitere ähnliche Inhalte

Was ist angesagt?

모놀리스에서 마이크로서비스 아키텍처로의 전환 전략::박선용::AWS Summit Seoul 2018
모놀리스에서 마이크로서비스 아키텍처로의 전환 전략::박선용::AWS Summit Seoul 2018모놀리스에서 마이크로서비스 아키텍처로의 전환 전략::박선용::AWS Summit Seoul 2018
모놀리스에서 마이크로서비스 아키텍처로의 전환 전략::박선용::AWS Summit Seoul 2018
Amazon Web Services Korea
 

Was ist angesagt? (20)

Lessons Learned Building a Connector Using Kafka Connect (Katherine Stanley &...
Lessons Learned Building a Connector Using Kafka Connect (Katherine Stanley &...Lessons Learned Building a Connector Using Kafka Connect (Katherine Stanley &...
Lessons Learned Building a Connector Using Kafka Connect (Katherine Stanley &...
 
Api service mesh and microservice tooling
Api service mesh and microservice toolingApi service mesh and microservice tooling
Api service mesh and microservice tooling
 
Clean Infrastructure as Code
Clean Infrastructure as Code Clean Infrastructure as Code
Clean Infrastructure as Code
 
KB국민은행은 시작했다 -  쉽고 빠른 클라우드 거버넌스 적용 전략 - 강병억 AWS 솔루션즈 아키텍트 / 장강홍 클라우드플랫폼단 차장, ...
KB국민은행은 시작했다 -  쉽고 빠른 클라우드 거버넌스 적용 전략 - 강병억 AWS 솔루션즈 아키텍트 / 장강홍 클라우드플랫폼단 차장, ...KB국민은행은 시작했다 -  쉽고 빠른 클라우드 거버넌스 적용 전략 - 강병억 AWS 솔루션즈 아키텍트 / 장강홍 클라우드플랫폼단 차장, ...
KB국민은행은 시작했다 -  쉽고 빠른 클라우드 거버넌스 적용 전략 - 강병억 AWS 솔루션즈 아키텍트 / 장강홍 클라우드플랫폼단 차장, ...
 
AWS Amplify를 통한 손쉬운 모바일 애플리케이션 개발하기 - 김필중 솔루션즈 아키텍트, AWS :: AWS Summit Seoul ...
AWS Amplify를 통한 손쉬운 모바일 애플리케이션 개발하기 - 김필중 솔루션즈 아키텍트, AWS :: AWS Summit Seoul ...AWS Amplify를 통한 손쉬운 모바일 애플리케이션 개발하기 - 김필중 솔루션즈 아키텍트, AWS :: AWS Summit Seoul ...
AWS Amplify를 통한 손쉬운 모바일 애플리케이션 개발하기 - 김필중 솔루션즈 아키텍트, AWS :: AWS Summit Seoul ...
 
Getting Started with AWS Lambda and the Serverless Cloud
Getting Started with AWS Lambda and the Serverless CloudGetting Started with AWS Lambda and the Serverless Cloud
Getting Started with AWS Lambda and the Serverless Cloud
 
Serverless architecture
Serverless architectureServerless architecture
Serverless architecture
 
(NET307) Pinterest: The road from EC2-Classic To EC2-VPC
(NET307) Pinterest: The road from EC2-Classic To EC2-VPC(NET307) Pinterest: The road from EC2-Classic To EC2-VPC
(NET307) Pinterest: The road from EC2-Classic To EC2-VPC
 
모놀리스에서 마이크로서비스 아키텍처로의 전환 전략::박선용::AWS Summit Seoul 2018
모놀리스에서 마이크로서비스 아키텍처로의 전환 전략::박선용::AWS Summit Seoul 2018모놀리스에서 마이크로서비스 아키텍처로의 전환 전략::박선용::AWS Summit Seoul 2018
모놀리스에서 마이크로서비스 아키텍처로의 전환 전략::박선용::AWS Summit Seoul 2018
 
Overview - ESBs and IBM Integration Bus
Overview - ESBs and IBM Integration BusOverview - ESBs and IBM Integration Bus
Overview - ESBs and IBM Integration Bus
 
Living the AWS Well Architected Framework
Living the AWS Well Architected FrameworkLiving the AWS Well Architected Framework
Living the AWS Well Architected Framework
 
클라우드 세상에서 살아남기: 금융편 - 이한주 대표이사/공동창업자, 베스핀 글로벌 / 김민성 팀장, KB국민카드 :: AWS Summit ...
클라우드 세상에서 살아남기: 금융편 - 이한주 대표이사/공동창업자, 베스핀 글로벌 / 김민성 팀장, KB국민카드 :: AWS Summit ...클라우드 세상에서 살아남기: 금융편 - 이한주 대표이사/공동창업자, 베스핀 글로벌 / 김민성 팀장, KB국민카드 :: AWS Summit ...
클라우드 세상에서 살아남기: 금융편 - 이한주 대표이사/공동창업자, 베스핀 글로벌 / 김민성 팀장, KB국민카드 :: AWS Summit ...
 
Delivering Quality at Speed with GitOps
Delivering Quality at Speed with GitOpsDelivering Quality at Speed with GitOps
Delivering Quality at Speed with GitOps
 
How AWS Minimizes the Blast Radius of Failures (ARC338) - AWS re:Invent 2018
How AWS Minimizes the Blast Radius of Failures (ARC338) - AWS re:Invent 2018How AWS Minimizes the Blast Radius of Failures (ARC338) - AWS re:Invent 2018
How AWS Minimizes the Blast Radius of Failures (ARC338) - AWS re:Invent 2018
 
Lessons Learned Building a Connector Using Kafka Connect (Katherine Stanley &...
Lessons Learned Building a Connector Using Kafka Connect (Katherine Stanley &...Lessons Learned Building a Connector Using Kafka Connect (Katherine Stanley &...
Lessons Learned Building a Connector Using Kafka Connect (Katherine Stanley &...
 
AWS를 위한 도커, 컨테이너 (이미지) 환경 보안 방안 - 양희선 부장, TrendMicro :: AWS Summit Seoul 2019
AWS를 위한 도커, 컨테이너 (이미지) 환경 보안 방안 - 양희선 부장, TrendMicro :: AWS Summit Seoul 2019AWS를 위한 도커, 컨테이너 (이미지) 환경 보안 방안 - 양희선 부장, TrendMicro :: AWS Summit Seoul 2019
AWS를 위한 도커, 컨테이너 (이미지) 환경 보안 방안 - 양희선 부장, TrendMicro :: AWS Summit Seoul 2019
 
Cómo empezar con Amazon EKS
Cómo empezar con Amazon EKSCómo empezar con Amazon EKS
Cómo empezar con Amazon EKS
 
판교 개발자 데이 – Aws가 제안하는 서버리스 아키텍처 – 김필중
판교 개발자 데이 – Aws가 제안하는 서버리스 아키텍처 – 김필중판교 개발자 데이 – Aws가 제안하는 서버리스 아키텍처 – 김필중
판교 개발자 데이 – Aws가 제안하는 서버리스 아키텍처 – 김필중
 
고객 경험을 통한 AWS 클라우드 이전을 위한 지름길 - 김효정 (AWS 솔루션즈 아키텍트)
고객 경험을 통한 AWS 클라우드 이전을 위한 지름길 - 김효정 (AWS 솔루션즈 아키텍트)고객 경험을 통한 AWS 클라우드 이전을 위한 지름길 - 김효정 (AWS 솔루션즈 아키텍트)
고객 경험을 통한 AWS 클라우드 이전을 위한 지름길 - 김효정 (AWS 솔루션즈 아키텍트)
 
Preparing for AWS certified solutions architect associate exam (saa-c02)
Preparing for AWS certified solutions architect associate exam (saa-c02)Preparing for AWS certified solutions architect associate exam (saa-c02)
Preparing for AWS certified solutions architect associate exam (saa-c02)
 

Ähnlich wie Micro Frontends mit Web Components.pdf

Ähnlich wie Micro Frontends mit Web Components.pdf (20)

Process Automation Forum Vienna, Raiffeisen
Process Automation Forum Vienna, RaiffeisenProcess Automation Forum Vienna, Raiffeisen
Process Automation Forum Vienna, Raiffeisen
 
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
 
Firmenvorstellung der Navigate AG
Firmenvorstellung der Navigate AGFirmenvorstellung der Navigate AG
Firmenvorstellung der Navigate AG
 
Web-Anwendungen mit BSP
Web-Anwendungen mit BSPWeb-Anwendungen mit BSP
Web-Anwendungen mit BSP
 
Cloud Native Migration: Wie IT-Landschaften ihren Weg auf eine Cloud-Native-P...
Cloud Native Migration: Wie IT-Landschaften ihren Weg auf eine Cloud-Native-P...Cloud Native Migration: Wie IT-Landschaften ihren Weg auf eine Cloud-Native-P...
Cloud Native Migration: Wie IT-Landschaften ihren Weg auf eine Cloud-Native-P...
 
Aveedo - Der schnellste Weg zur Modernisierung von Notes Anwendungen (SNoUG 2...
Aveedo - Der schnellste Weg zur Modernisierung von Notes Anwendungen (SNoUG 2...Aveedo - Der schnellste Weg zur Modernisierung von Notes Anwendungen (SNoUG 2...
Aveedo - Der schnellste Weg zur Modernisierung von Notes Anwendungen (SNoUG 2...
 
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisierenMicrofrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
 
20150611 track3 2_bp22_ibm_connections_ist_keine_insel
20150611 track3 2_bp22_ibm_connections_ist_keine_insel20150611 track3 2_bp22_ibm_connections_ist_keine_insel
20150611 track3 2_bp22_ibm_connections_ist_keine_insel
 
Integrate your business - SharePoint 2010 and Microsoft Dynamics NAV
Integrate your business - SharePoint 2010 and Microsoft Dynamics NAVIntegrate your business - SharePoint 2010 and Microsoft Dynamics NAV
Integrate your business - SharePoint 2010 and Microsoft Dynamics NAV
 
Wünsch AG Vortrag mit der App ins Web oder wie man Notes modernisiert
Wünsch AG Vortrag mit der App ins Web oder wie man Notes modernisiertWünsch AG Vortrag mit der App ins Web oder wie man Notes modernisiert
Wünsch AG Vortrag mit der App ins Web oder wie man Notes modernisiert
 
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplantModerne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
 
Liebe Mobiliar, wie macht Ihr eigentlich DevOps?
Liebe Mobiliar, wie macht Ihr eigentlich DevOps?Liebe Mobiliar, wie macht Ihr eigentlich DevOps?
Liebe Mobiliar, wie macht Ihr eigentlich DevOps?
 
DNUG2015 Frühjahrskonferenz: Prozessautomatisierung im Domino Kosmos, nicht o...
DNUG2015 Frühjahrskonferenz: Prozessautomatisierung im Domino Kosmos, nicht o...DNUG2015 Frühjahrskonferenz: Prozessautomatisierung im Domino Kosmos, nicht o...
DNUG2015 Frühjahrskonferenz: Prozessautomatisierung im Domino Kosmos, nicht o...
 
Zinit.leistungen.webentwicklung.v1.0.de
Zinit.leistungen.webentwicklung.v1.0.deZinit.leistungen.webentwicklung.v1.0.de
Zinit.leistungen.webentwicklung.v1.0.de
 
Lohnt sich die Modernisierung bestehnder Software
Lohnt sich die Modernisierung bestehnder SoftwareLohnt sich die Modernisierung bestehnder Software
Lohnt sich die Modernisierung bestehnder Software
 
ASP.NET MVC
ASP.NET MVCASP.NET MVC
ASP.NET MVC
 
Sharepoint Entwicklung
Sharepoint EntwicklungSharepoint Entwicklung
Sharepoint Entwicklung
 
Responsive Webdesign für Grafiker & Entscheider
Responsive Webdesign für Grafiker & EntscheiderResponsive Webdesign für Grafiker & Entscheider
Responsive Webdesign für Grafiker & Entscheider
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
 
BATbern41 Die Evolution zu Microservices
BATbern41 Die Evolution zu MicroservicesBATbern41 Die Evolution zu Microservices
BATbern41 Die Evolution zu Microservices
 

Mehr von QAware GmbH

"Mixed" Scrum-Teams – Die richtige Mischung macht's!
"Mixed" Scrum-Teams – Die richtige Mischung macht's!"Mixed" Scrum-Teams – Die richtige Mischung macht's!
"Mixed" Scrum-Teams – Die richtige Mischung macht's!
QAware GmbH
 
Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See...
 Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See... Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See...
Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See...
QAware GmbH
 

Mehr von QAware GmbH (20)

50 Shades of K8s Autoscaling #JavaLand24.pdf
50 Shades of K8s Autoscaling #JavaLand24.pdf50 Shades of K8s Autoscaling #JavaLand24.pdf
50 Shades of K8s Autoscaling #JavaLand24.pdf
 
Make Agile Great - PM-Erfahrungen aus zwei virtuellen internationalen SAFe-Pr...
Make Agile Great - PM-Erfahrungen aus zwei virtuellen internationalen SAFe-Pr...Make Agile Great - PM-Erfahrungen aus zwei virtuellen internationalen SAFe-Pr...
Make Agile Great - PM-Erfahrungen aus zwei virtuellen internationalen SAFe-Pr...
 
Fully-managed Cloud-native Databases: The path to indefinite scale @ CNN Mainz
Fully-managed Cloud-native Databases: The path to indefinite scale @ CNN MainzFully-managed Cloud-native Databases: The path to indefinite scale @ CNN Mainz
Fully-managed Cloud-native Databases: The path to indefinite scale @ CNN Mainz
 
Down the Ivory Tower towards Agile Architecture
Down the Ivory Tower towards Agile ArchitectureDown the Ivory Tower towards Agile Architecture
Down the Ivory Tower towards Agile Architecture
 
"Mixed" Scrum-Teams – Die richtige Mischung macht's!
"Mixed" Scrum-Teams – Die richtige Mischung macht's!"Mixed" Scrum-Teams – Die richtige Mischung macht's!
"Mixed" Scrum-Teams – Die richtige Mischung macht's!
 
Make Developers Fly: Principles for Platform Engineering
Make Developers Fly: Principles for Platform EngineeringMake Developers Fly: Principles for Platform Engineering
Make Developers Fly: Principles for Platform Engineering
 
Der Tod der Testpyramide? – Frontend-Testing mit Playwright
Der Tod der Testpyramide? – Frontend-Testing mit PlaywrightDer Tod der Testpyramide? – Frontend-Testing mit Playwright
Der Tod der Testpyramide? – Frontend-Testing mit Playwright
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
 
Cloud Migration mit KI: der Turbo
Cloud Migration mit KI: der Turbo Cloud Migration mit KI: der Turbo
Cloud Migration mit KI: der Turbo
 
Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See...
 Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See... Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See...
Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See...
 
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
 
Endlich gute API Tests. Boldly Testing APIs Where No One Has Tested Before.
Endlich gute API Tests. Boldly Testing APIs Where No One Has Tested Before.Endlich gute API Tests. Boldly Testing APIs Where No One Has Tested Before.
Endlich gute API Tests. Boldly Testing APIs Where No One Has Tested Before.
 
Kubernetes with Cilium in AWS - Experience Report!
Kubernetes with Cilium in AWS - Experience Report!Kubernetes with Cilium in AWS - Experience Report!
Kubernetes with Cilium in AWS - Experience Report!
 
50 Shades of K8s Autoscaling
50 Shades of K8s Autoscaling50 Shades of K8s Autoscaling
50 Shades of K8s Autoscaling
 
Kontinuierliche Sicherheitstests für APIs mit Testkube und OWASP ZAP
Kontinuierliche Sicherheitstests für APIs mit Testkube und OWASP ZAPKontinuierliche Sicherheitstests für APIs mit Testkube und OWASP ZAP
Kontinuierliche Sicherheitstests für APIs mit Testkube und OWASP ZAP
 
Service Mesh Pain & Gain. Experiences from a client project.
Service Mesh Pain & Gain. Experiences from a client project.Service Mesh Pain & Gain. Experiences from a client project.
Service Mesh Pain & Gain. Experiences from a client project.
 
50 Shades of K8s Autoscaling
50 Shades of K8s Autoscaling50 Shades of K8s Autoscaling
50 Shades of K8s Autoscaling
 
Blue turns green! Approaches and technologies for sustainable K8s clusters.
Blue turns green! Approaches and technologies for sustainable K8s clusters.Blue turns green! Approaches and technologies for sustainable K8s clusters.
Blue turns green! Approaches and technologies for sustainable K8s clusters.
 
Per Anhalter zu Cloud Nativen API Gateways
Per Anhalter zu Cloud Nativen API GatewaysPer Anhalter zu Cloud Nativen API Gateways
Per Anhalter zu Cloud Nativen API Gateways
 
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
 

Micro Frontends mit Web Components.pdf

  • 1. Micro Frontends mit Web Components Dominik Haas dominik.haas@qaware.de
  • 2. Agenda für heute ● Microservices und Micro Frontends ● Web Components ● Micro Frontends mit Web Components
  • 3. Wir entwickeln heute viele Projekte als Microservices Quelle: https://martinfowler.com/articles/microservices.html
  • 4. Das Frontend ruft die verschiedenen Micro Services auf, oder? Backend A Frontend DB A Backend B DB B Backend C DB C
  • 5. Ein fachlicher Microservice sollte auch die GUI beinhalten! Frontend Backend A Frontend A DB A Backend B Frontend B DB B Backend C Frontend C DB C ✓ Backend A Frontend DB A Backend B DB B Backend C DB C ❌
  • 6. Was wir wollen Eine kombinierte Anwendung für den Benutzer, weil ■ er für seine Arbeit verschiedene fachliche Kontexte benötigt ■ ein Wechsel in andere Applikationen oder Tabs nicht praktikabel ist Micro Frontends - Microservices auch im Frontend, weil ■ Fachlicher Schnitt ■ Einfache, verständliche, abgeschlossene Einheit ■ Technologische Unabhängigkeit ■ Unabhängige Deployments ■ Unabhängige Entwicklerteams ■ Schrittweise Umsetzung (Strangler Pattern)
  • 7. Agenda für heute ● Microservices und Micro Frontends ● Web Components ● Micro Frontends mit Web Components
  • 8. Web Components in 10 Sekunden
  • 9. Die Komponenten können Parameter bekommen und Events verschicken <profile-details profile="1337" id="profileDetails"></profile-details> <script type="text/javascript"> let profileDetailsElement = document.getElementById('profileDetails'); profileDetailsElement.addEventListener('map', (e) => { console.log("Payload is: " + e.detail); }) </script>
  • 10. Es gibt einige Wege um Web Components zu entwickeln Plain JavaScript JavaScript Compiler Frameworks ■ Svelte ■ Stencil.js ■ … JavaScript Frameworks ■ Vue ■ Angular ■ React ■ ….
  • 11. Demo Web Component mit Svelte
  • 12. Setup a new Svelte Project # Clone the svelte project template to folder my-svelte-project npx degit sveltejs/template my-svelte-project # Install npm dependencies cd my-svelte-project npm i # Start development server npm run dev & open http://localhost:8080
  • 13. Agenda für heute ● Microservices und Micro Frontends ● Web Components ● Micro Frontends mit Web Components
  • 14. Wir können jetzt Web Components nutzen um client-seitig Micro Frontends zu kombinieren Service A Service App Shell Service B App Shell GUI B 1 - initial load 2 - load scripts 3 - REST call
  • 15. Bei einer Navigation werden die Web Components ausgetauscht App Shell GUI B App Shell GUI A
  • 16. Demo Micro Frontends mit Web Components QAlocations Profile
  • 17. Q&A