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?

Quality in a Square. K8s-native Quality Assurance of Microservices with Testkube
Quality in a Square. K8s-native Quality Assurance of Microservices with TestkubeQuality in a Square. K8s-native Quality Assurance of Microservices with Testkube
Quality in a Square. K8s-native Quality Assurance of Microservices with TestkubeQAware GmbH
 
Red Hat Openshift Fundamentals.pptx
Red Hat Openshift Fundamentals.pptxRed Hat Openshift Fundamentals.pptx
Red Hat Openshift Fundamentals.pptxssuser18b1c6
 
CNCF Meetup - OpenShift Overview
CNCF Meetup - OpenShift OverviewCNCF Meetup - OpenShift Overview
CNCF Meetup - OpenShift OverviewSumit Shatwara
 
VMware Tanzu Introduction
VMware Tanzu IntroductionVMware Tanzu Introduction
VMware Tanzu IntroductionVMware Tanzu
 
Kubernetes or OpenShift - choosing your container platform for Dev and Ops
Kubernetes or OpenShift - choosing your container platform for Dev and OpsKubernetes or OpenShift - choosing your container platform for Dev and Ops
Kubernetes or OpenShift - choosing your container platform for Dev and OpsTomasz Cholewa
 
Kubernetes Story - Day 1: Build and Manage Containers with Podman
Kubernetes Story - Day 1: Build and Manage Containers with PodmanKubernetes Story - Day 1: Build and Manage Containers with Podman
Kubernetes Story - Day 1: Build and Manage Containers with PodmanMihai Criveti
 
Introduction to Red Hat OpenShift 4
Introduction to Red Hat OpenShift 4Introduction to Red Hat OpenShift 4
Introduction to Red Hat OpenShift 4HngNguyn748044
 
Red Hat Openshift on Microsoft Azure
Red Hat Openshift on Microsoft AzureRed Hat Openshift on Microsoft Azure
Red Hat Openshift on Microsoft AzureJohn Archer
 
Comparing Next-Generation Container Image Building Tools
 Comparing Next-Generation Container Image Building Tools Comparing Next-Generation Container Image Building Tools
Comparing Next-Generation Container Image Building ToolsAkihiro Suda
 
GitOps is IaC done right
GitOps is IaC done rightGitOps is IaC done right
GitOps is IaC done rightChen Cheng-Wei
 
Kubernetes 101 - an Introduction to Containers, Kubernetes, and OpenShift
Kubernetes 101 - an Introduction to Containers, Kubernetes, and OpenShiftKubernetes 101 - an Introduction to Containers, Kubernetes, and OpenShift
Kubernetes 101 - an Introduction to Containers, Kubernetes, and OpenShiftDevOps.com
 
Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...
Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...
Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...Edureka!
 
CI/CD Development in Kubernetes - Skaffold
CI/CD Development in Kubernetes -  SkaffoldCI/CD Development in Kubernetes -  Skaffold
CI/CD Development in Kubernetes - SkaffoldSuman Chakraborty
 
HelloCloud.io - Introduction to IaC & Terraform
HelloCloud.io - Introduction to IaC & TerraformHelloCloud.io - Introduction to IaC & Terraform
HelloCloud.io - Introduction to IaC & TerraformHello Cloud
 

Was ist angesagt? (20)

Quality in a Square. K8s-native Quality Assurance of Microservices with Testkube
Quality in a Square. K8s-native Quality Assurance of Microservices with TestkubeQuality in a Square. K8s-native Quality Assurance of Microservices with Testkube
Quality in a Square. K8s-native Quality Assurance of Microservices with Testkube
 
Red Hat Openshift Fundamentals.pptx
Red Hat Openshift Fundamentals.pptxRed Hat Openshift Fundamentals.pptx
Red Hat Openshift Fundamentals.pptx
 
CNCF Meetup - OpenShift Overview
CNCF Meetup - OpenShift OverviewCNCF Meetup - OpenShift Overview
CNCF Meetup - OpenShift Overview
 
OpenShift Introduction
OpenShift IntroductionOpenShift Introduction
OpenShift Introduction
 
VMware Tanzu Introduction
VMware Tanzu IntroductionVMware Tanzu Introduction
VMware Tanzu Introduction
 
Kubernetes or OpenShift - choosing your container platform for Dev and Ops
Kubernetes or OpenShift - choosing your container platform for Dev and OpsKubernetes or OpenShift - choosing your container platform for Dev and Ops
Kubernetes or OpenShift - choosing your container platform for Dev and Ops
 
Kubernetes Story - Day 1: Build and Manage Containers with Podman
Kubernetes Story - Day 1: Build and Manage Containers with PodmanKubernetes Story - Day 1: Build and Manage Containers with Podman
Kubernetes Story - Day 1: Build and Manage Containers with Podman
 
Open shift 4-update
Open shift 4-updateOpen shift 4-update
Open shift 4-update
 
Introduction to Red Hat OpenShift 4
Introduction to Red Hat OpenShift 4Introduction to Red Hat OpenShift 4
Introduction to Red Hat OpenShift 4
 
Red Hat Overview
Red Hat OverviewRed Hat Overview
Red Hat Overview
 
Red Hat Openshift on Microsoft Azure
Red Hat Openshift on Microsoft AzureRed Hat Openshift on Microsoft Azure
Red Hat Openshift on Microsoft Azure
 
Comparing Next-Generation Container Image Building Tools
 Comparing Next-Generation Container Image Building Tools Comparing Next-Generation Container Image Building Tools
Comparing Next-Generation Container Image Building Tools
 
GitOps is IaC done right
GitOps is IaC done rightGitOps is IaC done right
GitOps is IaC done right
 
Docker Kubernetes Istio
Docker Kubernetes IstioDocker Kubernetes Istio
Docker Kubernetes Istio
 
Kubernetes 101 - an Introduction to Containers, Kubernetes, and OpenShift
Kubernetes 101 - an Introduction to Containers, Kubernetes, and OpenShiftKubernetes 101 - an Introduction to Containers, Kubernetes, and OpenShift
Kubernetes 101 - an Introduction to Containers, Kubernetes, and OpenShift
 
Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...
Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...
Kubernetes Architecture | Understanding Kubernetes Components | Kubernetes Tu...
 
OpenShift Enterprise
OpenShift EnterpriseOpenShift Enterprise
OpenShift Enterprise
 
The kvm virtualization way
The kvm virtualization wayThe kvm virtualization way
The kvm virtualization way
 
CI/CD Development in Kubernetes - Skaffold
CI/CD Development in Kubernetes -  SkaffoldCI/CD Development in Kubernetes -  Skaffold
CI/CD Development in Kubernetes - Skaffold
 
HelloCloud.io - Introduction to IaC & Terraform
HelloCloud.io - Introduction to IaC & TerraformHelloCloud.io - Introduction to IaC & Terraform
HelloCloud.io - Introduction to IaC & Terraform
 

Ähnlich wie Micro Frontends mit Web Components.pdf

Process Automation Forum Vienna, Raiffeisen
Process Automation Forum Vienna, RaiffeisenProcess Automation Forum Vienna, Raiffeisen
Process Automation Forum Vienna, Raiffeisencamunda services GmbH
 
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 ...DNUG e.V.
 
Firmenvorstellung der Navigate AG
Firmenvorstellung der Navigate AGFirmenvorstellung der Navigate AG
Firmenvorstellung der Navigate AGRoland Löffler
 
Web-Anwendungen mit BSP
Web-Anwendungen mit BSPWeb-Anwendungen mit BSP
Web-Anwendungen mit BSPrplantiko
 
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...QAware GmbH
 
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...We4IT Group
 
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 modularisierenMark Lubkowitz
 
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_inselDNUG e.V.
 
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 NAVChristian Krause
 
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 modernisiertWünsch AG
 
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 geplantChristian Nagel
 
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?Philipp Grossenbacher
 
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...JRibbeck
 
Lohnt sich die Modernisierung bestehnder Software
Lohnt sich die Modernisierung bestehnder SoftwareLohnt sich die Modernisierung bestehnder Software
Lohnt sich die Modernisierung bestehnder SoftwareChristian Güdemann
 
Responsive Webdesign für Grafiker & Entscheider
Responsive Webdesign für Grafiker & EntscheiderResponsive Webdesign für Grafiker & Entscheider
Responsive Webdesign für Grafiker & Entscheidertypovision GmbH
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDNUG e.V.
 
BATbern41 Die Evolution zu Microservices
BATbern41 Die Evolution zu MicroservicesBATbern41 Die Evolution zu Microservices
BATbern41 Die Evolution zu MicroservicesBATbern
 

Ä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

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...QAware GmbH
 
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 MainzQAware GmbH
 
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 ArchitectureQAware 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
 
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 EngineeringQAware GmbH
 
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 PlaywrightQAware GmbH
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAsQAware GmbH
 
Cloud Migration mit KI: der Turbo
Cloud Migration mit KI: der Turbo Cloud Migration mit KI: der Turbo
Cloud Migration mit KI: der Turbo 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
 
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 QAware GmbH
 
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.QAware GmbH
 
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!QAware GmbH
 
50 Shades of K8s Autoscaling
50 Shades of K8s Autoscaling50 Shades of K8s Autoscaling
50 Shades of K8s AutoscalingQAware GmbH
 
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 ZAPQAware GmbH
 
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.QAware GmbH
 
50 Shades of K8s Autoscaling
50 Shades of K8s Autoscaling50 Shades of K8s Autoscaling
50 Shades of K8s AutoscalingQAware GmbH
 
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.QAware GmbH
 
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 GatewaysQAware GmbH
 
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 QAware GmbH
 
How to speed up Spring Integration Tests
How to speed up Spring Integration TestsHow to speed up Spring Integration Tests
How to speed up Spring Integration TestsQAware GmbH
 

Mehr von QAware GmbH (20)

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
 
How to speed up Spring Integration Tests
How to speed up Spring Integration TestsHow to speed up Spring Integration Tests
How to speed up Spring Integration Tests
 

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