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/

Avatar for Michael Geers

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