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/

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

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. monolithisch

  3. entkoppelt * * * * mit User Interface

  4. Einheitliche Ober fl äche trotz Entkopplung?

  5. Michael Geers Frontend Entwickler Spezialisten für E-Commerce Open Source Projekt

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

    das? 🚜 Praktische Beispiele 🪴 4 Tipps und Tricks 🧙
  7. Was sind Micro Frontends?

  8. Architekturen Heute Michael Geers / @naltatis

  9. 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
  10. Team Decide Team Inspire Team Checkout Fragment Fragment Page Zerlegen

    einer Anwendung Michael Geers / @naltatis
  11. 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
  12. Teams arbeiten unabhängig Michael Geers / @naltatis

  13. Warum? Was sind die Vorteile? 🌟

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

  15. drei 8-Personenteams sind effektiver als ein 24-Personenteam Michael Geers /

    @naltatis
  16. 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
  17. 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
  18. Direktes Feedback Keine API Teams Kundenfokus

  19. Tech Entscheidungen sind Teamsache Technologiefreiheit

  20. 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
  21. Wie macht man das? 🚜

  22. Seiten & Fragmente* * aka includable Micro Frontends, Podlets, Parcels,

    Pilets, … Michael Geers / @naltatis
  23. Team Decide Team Inspire Team Checkout Fragment Fragment Page Michael

    Geers / @naltatis
  24. 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
  25. Teams stellen Feature als Seiten oder Fragmente bereit. Michael Geers

    / @naltatis
  26. Integrationstechniken Michael Geers / @naltatis

  27. 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
  28. <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 …)
  29. <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
  30. <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+
  31. 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
  32. Linked Single Page Apps Uni fi ed Single Page App

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

    of Frontend 2020 327 Antworten Datenbasis: 3700 Teilnehmer / 25% nutzen Micro Frontends
  37. Praktische Beispiele 🪴

  38. Team Search category page Team Checkout mini basket Team Decide

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

    Inspire recommendations Michael Geers / @naltatis
  40. PayPal Egnineering Blog Michael Geers / @naltatis

  41. Logos verlinken zu den Quellen Michael Geers / @naltatis Wer

    nutzt Micro Frontends?
  42. 4 Tipps und Tricks 🧙

  43. Muster für Kommunikation ☎

  44. Michael Geers / @naltatis Arten der Kommunikation

  45. Kommunikationsmells 🌋 Koordination nötig User-Aktion erfordert Zusammenspiel von mehr als

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

    ➡ Kopplungsgefahr ➡ Analog gemeinsame DB MF1 MF2 Data Store (Redux, …) Michael Geers / @naltatis
  47. 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
  48. Einheitliches Look & Feel 🧑🎤 👨🎤 👩🎤

  49. Design System !! Button Formulare Typo

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

    Vorsicht! Shared Code & Kopplungsgefahr V1.9 via NPM Muster Internes Open Source Projekt
  51. Redundanzminimierung 🐘 🐘 🐘 🐘 🐘

  52. Kleinere Tools gleich weniger Redundanz Große Runtime hyperapp Kleine Runtime

    🐘 🦆 Michael Geers / @naltatis
  53. Bundled Dependencies (Self-Contained) MF1 MF2 MF3 Michael Geers / @naltatis

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

    CDN Michael Geers / @naltatis
  55. 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
  56. 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
  57. 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
  58. Micro Frontends & Native Apps 📱

  59. Native Apps über APIs (App Monolithen) Michael Geers / @naltatis

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

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

    Wenig Redundanz Einfacher Tech Stack 
 Kleine „native“ Teams. 
 Nur Rahmen/Bundling.
  62. Tools Ökosystem Michael Geers / @naltatis Atlas & BeeHive hybrid

    native integriert Android iOS
  63. Mehr zum Thema 270 Seiten 143 Illustrationen 21 Beispiele 


    64 Listings M A N N I N G Michael Geers Michael Geers / @naltatis
  64. Beispiele aus dem Buch the-tractor.store

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

  66. 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