Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

monolithisch

Slide 3

Slide 3 text

entkoppelt * * * * mit User Interface

Slide 4

Slide 4 text

Einheitliche Ober fl äche trotz Entkopplung?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Was sind Micro Frontends?

Slide 8

Slide 8 text

Architekturen Heute Michael Geers / @naltatis

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Teams arbeiten unabhängig Michael Geers / @naltatis

Slide 13

Slide 13 text

Warum? Was sind die Vorteile? 🌟

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Direktes Feedback Keine API Teams Kundenfokus

Slide 19

Slide 19 text

Tech Entscheidungen sind Teamsache Technologiefreiheit

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Wie macht man das? 🚜

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Integrationstechniken Michael Geers / @naltatis

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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 …)

Slide 29

Slide 29 text

      Komposition im Browser mit Custom Elements Michael Geers / @naltatis

Slide 30

Slide 30 text

Related Products

…     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+

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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/

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Praktische Beispiele 🪴

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

PayPal Egnineering Blog Michael Geers / @naltatis

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

4 Tipps und Tricks 🧙

Slide 43

Slide 43 text

Muster für Kommunikation ☎

Slide 44

Slide 44 text

Michael Geers / @naltatis Arten der Kommunikation

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Einheitliches Look & Feel 🧑🎤 👨🎤 👩🎤

Slide 49

Slide 49 text

Design System !! Button Formulare Typo

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Redundanzminimierung 🐘 🐘 🐘 🐘 🐘

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Micro Frontends & Native Apps 📱

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Beispiele aus dem Buch the-tractor.store

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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