Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren

MICRO-
FRONTENDS
ZUR RETTUNG
KOMPLEXITÄT VERLAGERN
© Mark Lubkowitz (www.microfrontends.de)

www.mark-lubkowitz.de
MARK LUBKOWITZ
Twitter: @marklubkowitz
Web: microfrontends.de

THEMA
Darum geht‘s heute
# Microfrontend-Architekturstil
# Modularisierung
# Anwendungsebene
# Informationssysteme
# Kundenanwendungen

SAP
Betriebliche Informationssysteme

E-MAIL-CLIENT
Komplexe Kundenanwendung

DIE PROBLEME
Warum brauchen wir einen speziellen Architekturstil fürs Frontend?

MODERNE
TEAMSTRUKTUR
Agilität und Zusammenarbeit
Entwicklungsteams sind heute
crossfunktional. Sie sollen von UI bis
Persistenz für ihren Anwendungsteil
verantwortlich sein.

VIELFÄLTIGE
PLATTFORMEN
n+1 Frontends
Anfangs waren es nur verschiedene
Betriebssysteme. Heute variieren
Plattform, Rechenleistung, Eingabeart,
Displayformen und Bediensituation.

STARKE
ABHÄNGIGKEITEN
Frameworks und Open Source
Open Source liefert viele Lösungen
kostenlos. Die Frage lautet deshalb
nicht mehr „Ob?“ sondern „Welches
Framework?“. Die Abhängigkeit wächst.

HOHER
INNOVATIONSDRUCK
Kunden fordern
Kunden wollen neue Technologien
einsetzen können, sobald sie verfügbar
sind. Und Mitbewerber legen mitunter
ein sehr hohes Tempo vor.

EINFACHE
AUSTAUSCHBARKEIT
Wiederverwenden und ersetzen
Innovation ist teuer. Was sich wieder-
verwenden lässt, reduziert die Kosten.
Wiederverwendbarkeit bedeutet auch
Ersetzbarkeit.

WACHSENDE
KOMPLEXITÄT
Features und Plattformen
Je mehr Anforderungen gestellt sind,
desto höher ist die Komplexität.
Komplexität lässt sich nicht einfach
reduzieren – sondern nur verlagern.

RAPIDE
ALTERUNG
Features und Abhängigkeiten
Implementierte Features altern.
Frameworks und Libraries altern.
Vieles unterliegt einem Zerfallsprozess.
Instandhaltung ist elementar.

TEILEN UND HERRSCHEN
Wie lösen wir diese Probleme?

UNIX-PHILOSOPHIE
Programme sollen …
• eine Aufgabe sehr gut lösen
• zusammenarbeiten
• universell kommunizieren

MICROSERVICES
Unix-Philosophie im Backend

MICROFRONTENDS
Unix-Philosophie fürs Frontend

DEFINITION „Microfrontends sind
eigenständige,
fachlich abgeschlossene
und unabhängig verteilbare
Software-Elemente, die sich
in Frontends losgelöst von
deren Fachlichkeit und
Architektur integrieren
lassen.

PRINZIPIEN
Wie setzen wir das um?

KOMPONENTEN-
ORIENTIERUNG
Modularisierung

FACHLICH
ABGESCHLOSSEN
Erst vertikal, dann horizontal

EIGENES
DATENMODELL
Autonomes Verständnis

KEINE
ABHÄNGIGKEIT
Alles drin

EXPLIZITE
SCHNITTSTELLE
Universell einsetzbar

EINSATZSZENARIEN
Wann brauche ich das?

LIEFERN
Microservice liefert ein Microfrontend

KONSUMIEREN
Einen Microservice anbinden

INTEGRIEREN
Microservices integriert zu einer einzelnen UI

SELEKTIEREN
Einen Service oder Microservice auswählen

UMSETZUNG FÜRS WEB
Wie funktioniert das im Web?

SCHLÜSSEL-
TECHNIKEN
Alle Bausteine sind vorhanden
# Custom Elements
# DOM
# Service Worker
# Webassembly

CUSTOM ELEMENTS
Kapselung
Custom Elements sind neue Elemente
im Browser. Sie kapseln Struktur,
Aussehen und Funktionalität. Zudem
lassen sie sich mehrfach instanziieren.

DOM
Universelle Schnittstelle
Das Document Object Model ist eine
universelle Schnittstelle. Sie bietet
unterschiedliche Möglichkeiten, mit
Elementen zu interagieren.

KOMPATIBILITÄT
Flächendeckende Unterstützung
Webbrowser Version
Custom Elements
v0
Custom Elements
v1
Internet
Explorer
11 - Polyfill
Edge 18 - Polyfill
Firefox 64 - ✅
Chrome 71 ✅ ✅
Chrome
for Android
70 ✅ ✅
Safari 12 - ✅
iOS Safari 12.1 - ✅
Electron
(Chromium)
4 (69) ✅ ✅© Mark Lubkowitz (www.microfrontends.de)

SERVICE WORKER
Zentralisierung möglich
Service Worker basieren auf dem
Worker-Standard. Sie laufen in einem
eigenen Thread und agieren auf
Netzwerkebene.

WEBASSEMBLY
Quasi-Nachbau von Java
Webassembly ist Bytecode fürs Web.
C++ oder Go lassen sich nach
Webassembly übersetzen. Backend-
Code kann ins Frontend rutschen.

E-MAIL-CLIENT
Was wäre ein Idealbeispiel?

DOMÄNENMODELL
Viele Domänen in einer Anwendung
Erst Fachlichkeit identifizieren, dann
daran entlang schneiden, etwa E-Mail
und Kontakte. Domain-Driven Design
bietet dazu den besten Ansatz.
E-MAILKONTAKTE KALENDER
NOTIZEN
DATEIEN
AUFGABEN
NOTIZEN

TRIVIALER
BEISPIELCODE
Vereinfachter HTML-Code
<html>
<head></head>
<body>
<e-mail task="compose">
…
<div>An:</div>
<kontakt-verwaltung
max="4" style="pillbox" autocomplete="true"
></kontakt-verwaltung>
…
<div>CC:</div>
<kontakt-verwaltung
…
<div>BCC:</div>
<kontakt-verwaltung
…
</e-mail>
</body>
</html>

WEITERE VORTEILE
Was habe ich noch davon?

ROLLOUT
Canary Release

INTEGRATION
Zeitpunkt wählbar

LAZY LOADING
Nachladen bei Bedarf

HOT DEPLOYMENT
Change-on-the-fly

HERAUSFORDERUNGEN
Womit bezahle ich das?

FRAMEWORK-ZOO
Potenzielle Nebeneffekte # Zentralisierung
# Guidelines
# Common Sense

SCHWERGEWICHTIG
Full-Blown-Mini-Applications # Artefakte bilden
# Caching
# Service Worker

DESIGNBRÜCHE
Potenziell schwierige User Experience
# Design System
# Versionierung der Designs im
Microfrontend
# Designs als Module
# Überladung der Styles

SCHNITTSTELEN-
PROBLEME
Missverständnisse
# Schnittstelle einfach halten
# Universell auslegen
# einfache, nicht-typisierte Daten
# Versionierung

TECHNISCHE
SCHULDEN
Geplante Obsoleszenz
# hoher Qualitätsanspruch
# Konventionen
# Architekturstil anpassen
# gesunder Menschenverstand

FAZIT
Vollständig modularisierte Frontends

MODULARISIERUNG
Anwendungsebene
Microfrontends sind ein Modularisie-
rungskonzept auf Anwendungsebene.
Sie ergänzen den Architekturstil der
Microservices, ohne abhängig zu sein.

KOMPLEXITÄT
Teilen und herrschen
Komplexität hängt von den Anforde-
rungen ab. Sie lässt sich deshalb nur
auf eine andere Ebene verschieben,
fügt dann weitere Komplexität hinzu.

ALTERNATIVEN
Schlechter als Custom Elements
Microfrontends lassen sich auch
verlinken, mit aufgepumpten DIV-
Elementen umsetzen, in iFrames laden
oder per SSI injizieren.

KONTAKT
Twitter:
@marklubkowitz
Webseite:
microfrontends.de
E-Mail:
me@microfrontends.de
Linkedin:
linkedin.com/in/marklubkowitz

Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren

Ähnlich wie Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren (20)

Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren