Micro Frontends - Entkopplung bis zur Oberfläche

Micro Frontends
Entkopplung bis zur Ober
fl
äche
Michael Geers / @naltatis
Heise / Mastering Microservices 2022

View Slide

monolithisch

View Slide

entkoppelt
*
*
*
* mit User Interface

View Slide

Einheitliche Ober
fl
äche trotz Entkopplung?

View Slide

Michael Geers Frontend Entwickler
Spezialisten für E-Commerce
Open Source Projekt
 
Autos mit Sonne laden
@naltatis
Buch
micro-frontends.org
Webseite

View Slide

Agenda
Was ist das und warum?
👩🏫
Wie macht man das?
🚜
Praktische Beispiele
🪴
4 Tipps und Tricks
🧙

View Slide

Was sind Micro Frontends?

View Slide

Architekturen Heute

View Slide

Eine De
fi
nition
Our preferred (and proven) approach is to split the browser-based
code into micro frontends.

In this approach, the web application is broken down into its features,
and each feature is owned, frontend to backend, by a different team.

This ensures that every feature is developed, tested and deployed
independently from other features. …
Quelle: ThoughtWorks Technology Radar November 2016 Michael Geers / @naltatis

View Slide

Team
Decide
Team
Inspire
Team Checkout
Fragment
Fragment
Page
Zerlegen einer Anwendung

View Slide

Crossfunctionale Teams

UX/Design, Frontend

Backend, Data Science,
Operations
Self-Contained Systems

Getrennte Applikationen
die unabhängig
voneinander sind.
Ende-zu-Ende
Verantwortung

Von Datenbank bis
Benutzerober
fl
äche
Mini-Monolithen oder
 
Maxi-Microservices (UI included)
Unabhängige Systeme

View Slide

Teams arbeiten unabhängig

View Slide

Warum? Was sind die Vorteile?
🌟

View Slide

Schnellere Entwicklung
Entkopplung
technisch & fachlich 🥇 bessere Time-to-Market

View Slide

drei 8-Personenteams

sind effektiver als

ein 24-Personenteam

View Slide

Frontend
Payment
Service
Content
Service
Operations
Platform
Business
Attributes
Service
Specialist Teams
Team
Inspire
Team
Decide
Team
Checkout
Cross Functional Teams
grouped around a use case or customer need
grouped around a skill or technology

View Slide

Frontend
Payment
Service
Content
Service
Operations
Platform
Business
Attributes
Service
Specialist Teams
Team
Inspire
Team
Decide
Team
Checkout
Cross Functional Teams
grouped around a use case or customer need
grouped around a skill or technology
Developing a Features
Meetings
waiting for others
⏳

View Slide

Direktes Feedback

Keine API Teams
Kundenfokus

View Slide

Tech Entscheidungen sind Teamsache
Technologiefreiheit

View Slide

Antipattern: Micro Frontend Anarchy
🧀 🍩 🫐 🥦 🌶 🥓 🍆 🍟 🍊 🥖
‣ Auf gemeinsamen Tech-Stack einigen

‣ Starterkits & Vorlagen für neue Teams

‣ Erfahrungsaustausch zwischen Teams fördern

‣ Keine Überregulierung
Herkunft des Begriffs: ThoughtWorks Technology Radar Oktober 2020

View Slide

Wie macht man das?
🚜

View Slide

Seiten & Fragmente*
* aka includable Micro Frontends,
Podlets, Parcels, Pilets, …

View Slide

Team
Decide
Team
Inspire
Team Checkout
Fragment
Fragment
Page

View Slide

Jede Seite gehört einem Team
2
33 $
66 $
99 $ buy
2
1
66 $
1
1
list
home detail basket payment conﬁrm
$ $ %%
Team
Inspire
Team
Decide
Team
Checkout
Customer Journey

View Slide

Teams stellen Feature
als Seiten oder
Fragmente bereit.

View Slide

Integrationstechniken

View Slide

Spotify web player (until early 2019) & Desktop App

https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/
Komposition mit iframes

View Slide

buy for 66 €

0 items

0 items

Tractor

buy for 66 €

Server

Team Decide
reverse-proxy (nginx, …)
Server

Team Checkout
/red-tractor

Tractor

/checkout/basket
/checkout/buy
/red-tractor
Komposition

auf dem Server
(ESI, SSI, eigene Lösung …)

View Slide

 

 

 

Komposition

im Browser mit

Custom Elements

View Slide

 
Related Products
 
…
 

 

Neue Browser Spec

Declarative Shadow DOM
🤩
ermöglicht Server-Rendering für
Custom Elements (Hydration)
https://web.dev/declarative-shadow-dom/
Chrome 90+

View Slide

2
33 $
66 $
99 $ buy
2
1
66 $
1
1
list
home detail basket payment conﬁrm
$ $ %%
Team
Inspire
Team
Decide
Team
Checkout
Customer Journey
Seitenübergänge über Links

View Slide

Linked Single Page Apps Uni
fi
ed Single Page App
Seitenübergänge zwischen SPAs

View Slide

Was macht eine Application Shell?
‣ Zentraler Einstiegspunkt für den Nutzer

‣ Kann SPAs laden, starten und stoppen

‣ Wechselt zwischen SPAs wenn nötig

‣ Populäres Framework single-spa

View Slide

Libraries & Frameworks
https://github.com/zalando/tailor
https://github.com/opencomponents/oc
Podium
https://podium-lib.io
meta-spa-router
https://github.com/manfredsteyer/meta-router
https://github.com/onerzafer/microfe-client
Piral
https://piral.io
Ara
https://github.com/ara-framework
puzzle.js
https://github.com/puzzle-js
https://github.com/SAP/luigi
Luigi
ILC
https://github.com/namecheap/ilc
single-spa
https://single-spa.js.org
https://github.com/hepsiburada/VoltranJS
https://one-amex-docs.americanexpress.com/

View Slide

https://qiankun.umijs.org
https://github.com/ice-lab/icestark
NUT Project
https://nut.js.org
Berial
https://github.com/berialjs/berial
http://gar
fi
sh.vercel.app/
Stark in China

View Slide

Quelle: The Software House
Umfrage

State of
Frontend
2020
327 Antworten
Datenbasis: 3700 Teilnehmer / 25% nutzen Micro Frontends

View Slide

Praktische Beispiele
🪴

View Slide

Team Search
category page
Team Checkout
mini basket
Team Decide
wishlist
Team Account
login status 
feedback 
support
Team Inspire
promotion 
inspiration

View Slide

Team Checkout
new basket entry
Team Decide
add-to-cart layer
Team Inspire
recommendations

View Slide

PayPal Egnineering Blog Michael Geers / @naltatis

View Slide

Logos verlinken zu den Quellen
Wer nutzt Micro Frontends?

View Slide

4 Tipps und Tricks
🧙

View Slide

Muster für
Kommunikation
☎

View Slide

Arten der Kommunikation

View Slide

Kommunikationsmells
🌋
Koordination nötig

User-Aktion erfordert
Zusammenspiel von
mehr als 2 Systemen.

➡ Schlechte Schnitte
MF1 MF2
MF3
👇

View Slide

Kommunikationsmells
🌋
Globales Statemanagement

Mehrere Frontends verwenden
gemeinsamen Data Store.

➡ Kopplungsgefahr

➡ Analog gemeinsame DB
MF1 MF2
Data Store

(Redux, …)

View Slide

Kommunikationsmells
🌋
Komplexe Payloads

Frontends übertragen

große Objekte untereinander.

➡ Komplexität und Kopplung

➡ Besser: Eigene Datenhaltung /
Replikation
MF1 MF2
something:happend

{complex: {data:“structures“, …}}

View Slide

Einheitliches Look & Feel
🧑🎤
👨🎤
👩🎤

View Slide

Design System !!
Button
Formulare
Typo

View Slide

Design System !!
Button
Formulare
Typo
als versioniertes Paket
V2.0
Vorsicht!

Shared Code &

Kopplungsgefahr
V1.9
via NPM
Muster

Internes

Open Source

Projekt

View Slide

Redundanzminimierung
🐘
🐘
🐘
🐘
🐘

View Slide

Kleinere Tools gleich weniger Redundanz
Große Runtime
hyperapp
Kleine Runtime
🐘
🦆

View Slide

Bundled Dependencies (Self-Contained)
MF1 MF2 MF3

View Slide

Zentrale Bibliotheken (Vendor Code)
https://github.com/systemjs/systemjs/blob/master/docs/import-maps.md
MF1 MF3
MF2
benutzt
Gemeinsames CDN

View Slide

Zentrale Bibliotheken (Vendor Code)
https://github.com/systemjs/systemjs/blob/master/docs/import-maps.md
MF1 MF3
MF2
Gemeinsames CDN
v3
v2

View Slide

Dezentral mit Module Federation
MF1
vue-i18n
MF2
vue-i18n
MF3
vue-i18n
Vendor Bibliotheken als
separate Chunks (JS Dateien)
https://module-federation.github.io Michael Geers / @naltatis

View Slide

Dezentral mit Module Federation
MF1
vue-i18n
MF2
vue-i18n
MF3
vue-i18n
Bereits geladene

Bibliotheken verwenden

(sofern kompatibel)
https://module-federation.github.io Michael Geers / @naltatis

View Slide

Micro Frontends & Native Apps
📱

View Slide

Native Apps über APIs (App Monolithen)
Dedizierte App Teams
 
 
UI Flows werden
mehrfach gebaut
(Redundanz)

Native Monolithen

(Deployment)

View Slide

Native integrierte Apps
Fachlichkeit in einem

Team gebündelt.

Größerer Tech Stack

 
Kleine „native“ Teams.
 
Nur Rahmen/Bundling.

View Slide

Hybride Apps (Native Shell & Webviews)
Wenig Redundanz

Einfacher Tech Stack

 
Kleine „native“ Teams.
 
Nur Rahmen/Bundling.

View Slide

Tools Ökosystem
Atlas & BeeHive
hybrid
native

integriert
Android iOS

View Slide

Mehr zum Thema
270 Seiten

143 Illustrationen

21 Beispiele
 
64 Listings
M A N N I N G
Michael Geers

View Slide

Beispiele aus dem Buch the-tractor.store

View Slide

Danke fürs Zuhören ♥
Michael Geers

@naltatis

View Slide

Bunte Glaswand Riswairi Razak
 
https://www.pexels.com/de-de/foto/gebaude-mit-blauen-
und-gelben-glaswanden-4683857/

Low Angle Dan Marian Moldove
 
https://www.pexels.com/de-de/foto/low-angle-foto-des-
gebaudes-3449351/

Europäischer Gerichtshof LVER
 
https://pixabay.com/de/photos/curia-gerichtshof-
europäische-union-4765849/

Fliesenmuster Alesia Kozik
 
https://www.pexels.com/de-de/foto/fliesen-geometrisches-
muster-muster-hintergrund-vertikaler-schuss-7911707/

Draisines Wikipedia
 
https://commons.wikimedia.org/wiki/
File:Draisines_of_Maruseppu_forest_park.jpg?uselang=de

Fahrradfahrer Pavel Danilyuk
 
https://www.pexels.com/photo/man-welding-
metal-2880871/

The Tool Guy Tirachard Kumtanom
 
https://unsplash.com/photos/UuW4psOb388

Woodshop Igor Ovsyannykov
 
https://unsplash.com/photos/iXV0i4Wo4yc

Ikea Sortierkasten 1 Ksenia Chernaya
 
https://www.pexels.com/de-de/foto/bau-metall-tisch-
holzern-5691653/

Ikea Sortierkasten 1 Ksenia Chernaya
 
https://www.pexels.com/de-de/foto/bau-metall-tisch-
entwurf-5691654/

Tractors Manufactum
 
https://www.manufactum.com/tin-toys-c193667/
Bildquellen
mit Micro Frontends

View Slide

Micro Frontends - Entkopplung bis zur Oberfläche

Micro Frontends - Entkopplung bis zur Oberfläche

Michael Geers

More Decks by Michael Geers

Other Decks in Technology

Featured

Transcript