Micro Frontends - Entkopplung bis zur Oberfläche

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

monolithisch

entkoppelt * * * * mit User Interface

Einheitliche Ober fl äche trotz Entkopplung?

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

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

Was sind Micro Frontends?

Architekturen Heute Michael Geers / @naltatis

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

Team Decide Team Inspire Team Checkout Fragment Fragment Page Zerlegen
einer Anwendung Michael Geers / @naltatis

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 Michael Geers / @naltatis Mini-Monolithen oder   Maxi-Microservices (UI included) Unabhängige Systeme

Teams arbeiten unabhängig Michael Geers / @naltatis

Warum? Was sind die Vorteile? 🌟

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

drei 8-Personenteams sind effektiver als ein 24-Personenteam Michael Geers /
@naltatis

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 Michael Geers / @naltatis

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 ⏳ Michael Geers / @naltatis

Direktes Feedback Keine API Teams Kundenfokus

Tech Entscheidungen sind Teamsache Technologiefreiheit

Antipattern: Micro Frontend Anarchy 🧀 🍩 🫐 🥦 🌶 🥓
🍆 🍟 🍊 🥖 ‣ Auf gemeinsamen Tech-Stack einigen ‣ Starterkits & Vorlagen für neue Teams ‣ Erfahrungsaustausch zwischen Teams fördern ‣ Keine Überregulierung Michael Geers / @naltatis Herkunft des Begriffs: ThoughtWorks Technology Radar Oktober 2020

Wie macht man das? 🚜

Seiten & Fragmente* * aka includable Micro Frontends, Podlets, Parcels,
Pilets, … Michael Geers / @naltatis

Team Decide Team Inspire Team Checkout Fragment Fragment Page Michael
Geers / @naltatis

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 Michael Geers / @naltatis

Teams stellen Feature als Seiten oder Fragmente bereit. Michael Geers
/ @naltatis

Integrationstechniken Michael Geers / @naltatis

Spotify web player (until early 2019) & Desktop App https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/
Komposition mit iframes Michael Geers / @naltatis

<button> buy for 66 € </button> <em>0 items</em> <html> <em>0
items</em> <h1>Tractor</h1> <button>buy for 66 €</button> </html> Server Team Decide reverse-proxy (nginx, …) Server Team Checkout /red-tractor <html>  <h1>Tractor</h1>  </html> /checkout/basket /checkout/buy /red-tractor Komposition auf dem Server (ESI, SSI, eigene Lösung …)

<inspire-reco sku="t_red">   </inspire-reco> <checkout-basket>   </checkout-basket> <checkout-buy sku="t_red">  
</checkout-buy> Komposition im Browser mit Custom Elements Michael Geers / @naltatis

<inspire-reco sku="t_red"> <template shadowroot="open">   <h2>Related Products</h2>   <ul>…</ul>  
</template>   </inspire-reco> Neue Browser Spec Declarative Shadow DOM Michael Geers / @naltatis 🤩 ermöglicht Server-Rendering für Custom Elements (Hydration) https://web.dev/declarative-shadow-dom/ Chrome 90+

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 Michael Geers / @naltatis

Linked Single Page Apps Uni fi ed Single Page App
Seitenübergänge zwischen SPAs Michael Geers / @naltatis

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 Michael Geers / @naltatis

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 Michael Geers / @naltatis single-spa https://single-spa.js.org https://github.com/hepsiburada/VoltranJS https://one-amex-docs.americanexpress.com/

https://qiankun.umijs.org Michael Geers / @naltatis 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

Michael Geers / @naltatis Quelle: The Software House Umfrage State
of Frontend 2020 327 Antworten Datenbasis: 3700 Teilnehmer / 25% nutzen Micro Frontends

Praktische Beispiele 🪴

Team Search category page Team Checkout mini basket Team Decide
wishlist Team Account login status  feedback  support Team Inspire promotion  inspiration Michael Geers / @naltatis

Team Checkout new basket entry Team Decide add-to-cart layer Team
Inspire recommendations Michael Geers / @naltatis

PayPal Egnineering Blog Michael Geers / @naltatis

Logos verlinken zu den Quellen Michael Geers / @naltatis Wer
nutzt Micro Frontends?

4 Tipps und Tricks 🧙

Muster für Kommunikation ☎

Michael Geers / @naltatis Arten der Kommunikation

Kommunikationsmells 🌋 Koordination nötig User-Aktion erfordert Zusammenspiel von mehr als
2 Systemen. ➡ Schlechte Schnitte MF1 MF2 MF3 👇 Michael Geers / @naltatis

Kommunikationsmells 🌋 Globales Statemanagement Mehrere Frontends verwenden gemeinsamen Data Store.
➡ Kopplungsgefahr ➡ Analog gemeinsame DB MF1 MF2 Data Store (Redux, …) Michael Geers / @naltatis

Kommunikationsmells 🌋 Komplexe Payloads Frontends übertragen große Objekte untereinander. ➡
Komplexität und Kopplung ➡ Besser: Eigene Datenhaltung / Replikation MF1 MF2 something:happend {complex: {data:“structures“, …}} Michael Geers / @naltatis

Einheitliches Look & Feel 🧑🎤 👨🎤 👩🎤

Design System !! Button Formulare Typo

Design System !! Button Formulare Typo als versioniertes Paket V2.0
Vorsicht! Shared Code & Kopplungsgefahr V1.9 via NPM Muster Internes Open Source Projekt

Redundanzminimierung 🐘 🐘 🐘 🐘 🐘

Kleinere Tools gleich weniger Redundanz Große Runtime hyperapp Kleine Runtime
🐘 🦆 Michael Geers / @naltatis

Bundled Dependencies (Self-Contained) MF1 MF2 MF3 Michael Geers / @naltatis

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

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

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

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

Micro Frontends & Native Apps 📱

Native Apps über APIs (App Monolithen) Michael Geers / @naltatis
Dedizierte App Teams     UI Flows werden mehrfach gebaut (Redundanz) Native Monolithen (Deployment)

Native integrierte Apps Michael Geers / @naltatis Fachlichkeit in einem
Team gebündelt. Größerer Tech Stack   Kleine „native“ Teams.   Nur Rahmen/Bundling.

Hybride Apps (Native Shell & Webviews) Michael Geers / @naltatis
Wenig Redundanz Einfacher Tech Stack   Kleine „native“ Teams.   Nur Rahmen/Bundling.

Tools Ökosystem Michael Geers / @naltatis Atlas & BeeHive hybrid
native integriert Android iOS

Mehr zum Thema 270 Seiten 143 Illustrationen 21 Beispiele  
64 Listings M A N N I N G Michael Geers Michael Geers / @naltatis

Beispiele aus dem Buch the-tractor.store

Danke fürs Zuhören ♥ Michael Geers @naltatis

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

Micro Frontends - Entkopplung bis zur Oberfläche

Micro Frontends - Entkopplung bis zur Oberfläche

More Decks by Michael Geers

Other Decks in Technology

Featured

Transcript