CODINEERS, Rosenheim, Mai ,Dominik Haas (Full Stack Entwickler und Software Architekt bei QAware) == Dokument bitte herunterladen, falls unscharf! Please download slides if blurred! == In vielen unseren Projekten werden Anwendungen als Microservices umgesetzt. Was bereits im Backend fordernd ist, wird bei Anwendungen mit grafischer Oberfläche noch mal zusätzlich komplexer. Schnell stellt sich die Frage: Wie baut man eigentlich grafische Oberflächen in einer Microservice-Architektur? In diesem Vortrag haben wir zuerst über Micro Frontends und was wir letztendlich erreichen wollen gesprochen. Wir haben uns angesehen was, was Web Components sind, wie man sie entwickeln kann und vor allem warum sie ein möglicher Lösungsbaustein für unsere Herausforderung sind. Dies haben wir an einem einfachen Beispiel präsentiert und über die Vor- und Nachteile gesprochen sowie Alternativen diskutiert.

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