Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Micro Frontends - Entkopplung bis zur Oberfläche

Micro Frontends - Entkopplung bis zur Oberfläche

Heise Event: Mastering Microservices 2022
https://konferenzen.heise.de/mastering-microservices/

Michael Geers

April 28, 2022
Tweet

More Decks by Michael Geers

Other Decks in Technology

Transcript

  1. Micro Frontends Entkopplung bis zur Ober fl äche Michael Geers

    / @naltatis Heise / Mastering Microservices 2022
  2. Michael Geers Frontend Entwickler Spezialisten für E-Commerce Open Source Projekt

    
 Autos mit Sonne laden @naltatis Buch micro-frontends.org Webseite
  3. Agenda Was ist das und warum? 👩🏫 Wie macht man

    das? 🚜 Praktische Beispiele 🪴 4 Tipps und Tricks 🧙
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. Jede Seite gehört einem Team 2 33 $ 66 $

    99 $ buy 2 1 66 $ 1 1 list home detail basket payment confirm $ $ %% Team Inspire Team Decide Team Checkout Customer Journey Michael Geers / @naltatis
  10. <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> <!--#include virtual=“/checkout/basket“ --> <h1>Tractor</h1> <!--#include virtual=“/checkout/buy“ --> </html> /checkout/basket /checkout/buy /red-tractor Komposition auf dem Server (ESI, SSI, eigene Lösung …)
  11. <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
  12. <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+
  13. 2 33 $ 66 $ 99 $ buy 2 1

    66 $ 1 1 list home detail basket payment confirm $ $ %% Team Inspire Team Decide Team Checkout Customer Journey Seitenübergänge über Links Michael Geers / @naltatis
  14. Linked Single Page Apps Uni fi ed Single Page App

    Seitenübergänge zwischen SPAs Michael Geers / @naltatis
  15. 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
  16. 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/
  17. Michael Geers / @naltatis Quelle: The Software House Umfrage State

    of Frontend 2020 327 Antworten Datenbasis: 3700 Teilnehmer / 25% nutzen Micro Frontends
  18. Team Search category page Team Checkout mini basket Team Decide

    wishlist Team Account login status
 feedback
 support Team Inspire promotion
 inspiration Michael Geers / @naltatis
  19. Team Checkout new basket entry Team Decide add-to-cart layer Team

    Inspire recommendations Michael Geers / @naltatis
  20. Kommunikationsmells 🌋 Koordination nötig User-Aktion erfordert Zusammenspiel von mehr als

    2 Systemen. ➡ Schlechte Schnitte MF1 MF2 MF3 👇 Michael Geers / @naltatis
  21. Kommunikationsmells 🌋 Globales Statemanagement Mehrere Frontends verwenden gemeinsamen Data Store.

    ➡ Kopplungsgefahr ➡ Analog gemeinsame DB MF1 MF2 Data Store (Redux, …) Michael Geers / @naltatis
  22. 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
  23. Design System !! Button Formulare Typo als versioniertes Paket V2.0

    Vorsicht! Shared Code & Kopplungsgefahr V1.9 via NPM Muster Internes Open Source Projekt
  24. 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
  25. 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
  26. Native Apps über APIs (App Monolithen) Michael Geers / @naltatis

    Dedizierte App Teams 
 
 UI Flows werden mehrfach gebaut (Redundanz) Native Monolithen (Deployment)
  27. Native integrierte Apps Michael Geers / @naltatis Fachlichkeit in einem

    Team gebündelt. Größerer Tech Stack 
 Kleine „native“ Teams. 
 Nur Rahmen/Bundling.
  28. Hybride Apps (Native Shell & Webviews) Michael Geers / @naltatis

    Wenig Redundanz Einfacher Tech Stack 
 Kleine „native“ Teams. 
 Nur Rahmen/Bundling.
  29. Mehr zum Thema 270 Seiten 143 Illustrationen 21 Beispiele 


    64 Listings M A N N I N G Michael Geers Michael Geers / @naltatis
  30. 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