Web-Frontend-Patterns und Practices - Talk

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 <body> <red-header> <blue-dashboard> <green-adbox></green-adbox> </blue-dashboard> </red-header> </body> Team
Dashboard Team Header Team Advertising

MICRO FRONTEND LAYOUT COMPONENTS KOMMUNIKATION

<html> <head> <script src="fancyFramework.js"></script> </head> <body> <div id="fancyWidget"></div> </body> </html>
 Keine Semantik  Intransparenz  Anpassungen schwierig  Framework-Abhängigkeit COMPONENTS

<html> <head> <script type="module" src="NumberPad.js"></script> </head> <body> <number-pad value="1" minimum="1"
maximum="1"> </number-pad> </body> </html>  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

Quelle: https://arngren.net/ LAYOUT

LAYOUT

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

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

Web-Frontend-Patterns und Practices - Talk

Web-Frontend-Patterns und Practices - Talk

Jörg Neumann

More Decks by Jörg Neumann

Other Decks in Programming

Featured

Transcript

ACLUE GmbH | [email protected] Web Frontend Patterns & Practices Johannes

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

FRONTEND 1 FRONTEND 2 FRONTEND 3 FRONTEND 4 SERVICE 1

PAGE COMPOSITION TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING

PAGE COMPOSITION <body> <red-header> <blue-dashboard> <green-adbox></green-adbox> </blue-dashboard> </red-header> </body> Team

MICRO FRONTEND LAYOUT COMPONENTS KOMMUNIKATION

<html> <head> <script src="fancyFramework.js"></script> </head> <body> <div id="fancyWidget"></div> </body> </html>

<html> <head> <script type="module" src="NumberPad.js"></script> </head> <body> <number-pad value="1" minimum="1"

CUSTOM ELEMENTS Eine API zur Registrierung von eigenen HTML Elementen

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

DEMO

FAZIT * Micro Frontends fördern die Skalierung von Projekten durch

Q & A