Web-Frontend-Patterns und Practices - Talk

Slide 1

Slide 1 text

ACLUE GmbH | info@aclue.de Web Frontend Patterns & Practices Johannes Feige | Jorg Neumann :

Slide 2

Slide 2 text

https://tinyurl.com/mpkvc88e DIE SAMPLES

Slide 3

Slide 3 text

BACKEND FRONTEND

Slide 4

Slide 4 text

FRONTEND SERVICE 1 SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

PAGE COMPOSITION TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING

Slide 8

Slide 8 text

PAGE COMPOSITION Team Dashboard Team Header Team Advertising

Slide 9

Slide 9 text

MICRO FRONTEND LAYOUT COMPONENTS KOMMUNIKATION

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

 Semantik  Local Scoping  Konfiguration  Bundle Import

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

DEMO

Slide 14

Slide 14 text

MICRO FRONTEND LAYOUT COMPONENTS KOMMUNIKATION

Slide 15

Slide 15 text

Quelle: https://arngren.net/ LAYOUT

Slide 16

Slide 16 text

LAYOUT

Slide 17

Slide 17 text

DEMO

Slide 18

Slide 18 text

LAYOUT

Slide 19

Slide 19 text

MICRO FRONTEND LAYOUT COMPONENTS KOMMUNIKATION

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

DEMO

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Q & A