ACLUE GmbH | [email protected] Web Frontend Patterns & Practices Johannes Feige | Jorg Neumann :

https://tinyurl.com/mpkvc88e DIE SAMPLES

BACKEND FRONTEND

FRONTEND SERVICE 1 SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES

FRONTEND 1 FRONTEND 2 FRONTEND 3 FRONTEND 4 SERVICE 1 SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES MICRO FRONTENDS

FRONTEND 1 FRONTEND 2 FRONTEND 3 FRONTEND 4 SERVICE 1 SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES MICRO FRONTENDS SELF-CONTAINED SYSTEM

PAGE COMPOSITION TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING

PAGE COMPOSITION Team Dashboard Team Header Team Advertising

MICRO FRONTEND LAYOUT COMPONENTS KOMMUNIKATION

 Keine Semantik  Intransparenz  Anpassungen schwierig  Framework-Abhängigkeit COMPONENTS

 Semantik  Local Scoping  Konfiguration  Bundle Import

CUSTOM ELEMENTS Eine API zur Registrierung von eigenen HTML Elementen HTML TEMPLATES UI-Vorlage für eine Komponente SHADOW DOM Kapselung der inneren DOM- Bestandteile eines Elements ES MODULES Einbinden von Komponenten WEB COMPONENTS

DEMO

MICRO FRONTEND LAYOUT COMPONENTS KOMMUNIKATION

Quelle: https://arngren.net/ LAYOUT

LAYOUT

DEMO

LAYOUT

MICRO FRONTEND LAYOUT COMPONENTS KOMMUNIKATION

KOMMUNIKATION TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING Kommunikation: • URL-Parameter • Web Components • Custom Dom Events • Broadcast Channel

DEMO

FAZIT * Micro Frontends fördern die Skalierung von Projekten durch vertikale Aufteilung * Mit Web Components können die Bereiche der App gekapselt und wiederverwendet werden * Flexbox und Grid helfen bei der Umsetzung eines flexibles Layouts * Clientseitige Kommunikation spart unnötige Roundtrips

Q & A