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