$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. monolithisch

    View Slide

  3. entkoppelt
    *
    *
    *
    * mit User Interface

    View Slide

  4. Einheitliche Ober
    fl
    äche trotz Entkopplung?

    View Slide

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

    Autos mit Sonne laden
    @naltatis
    Buch
    micro-frontends.org
    Webseite

    View Slide

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

    View Slide

  7. Was sind Micro Frontends?

    View Slide

  8. Architekturen Heute
    Michael Geers / @naltatis

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  12. Teams arbeiten unabhängig
    Michael Geers / @naltatis

    View Slide

  13. Warum? Was sind die Vorteile?
    🌟

    View Slide

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

    View Slide

  15. drei 8-Personenteams


    sind effektiver als


    ein 24-Personenteam
    Michael Geers / @naltatis

    View Slide

  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

    View Slide

  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

    View Slide

  18. Direktes Feedback


    Keine API Teams
    Kundenfokus

    View Slide

  19. Tech Entscheidungen sind Teamsache
    Technologiefreiheit

    View Slide

  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

    View Slide

  21. Wie macht man das?
    🚜

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  26. Integrationstechniken
    Michael Geers / @naltatis

    View Slide

  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

    View Slide




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

    View Slide










  29. Komposition


    im Browser mit


    Custom Elements
    Michael Geers / @naltatis

    View Slide






  30. 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+

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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/

    View Slide

  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

    View Slide

  36. Michael Geers / @naltatis
    Quelle: The Software House
    Umfrage


    State of
    Frontend
    2020
    327 Antworten
    Datenbasis: 3700 Teilnehmer / 25% nutzen Micro Frontends

    View Slide

  37. Praktische Beispiele
    🪴

    View Slide

  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

    View Slide

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

    View Slide

  40. PayPal Egnineering Blog Michael Geers / @naltatis

    View Slide

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

    View Slide

  42. 4 Tipps und Tricks
    🧙

    View Slide

  43. Muster für
    Kommunikation

    View Slide

  44. Michael Geers / @naltatis
    Arten der Kommunikation

    View Slide

  45. Kommunikationsmells
    🌋
    Koordination nötig


    User-Aktion erfordert
    Zusammenspiel von
    mehr als 2 Systemen.


    ➡ Schlechte Schnitte
    MF1 MF2
    MF3
    👇
    Michael Geers / @naltatis

    View Slide

  46. Kommunikationsmells
    🌋
    Globales Statemanagement


    Mehrere Frontends verwenden
    gemeinsamen Data Store.


    ➡ Kopplungsgefahr


    ➡ Analog gemeinsame DB
    MF1 MF2
    Data Store


    (Redux, …)
    Michael Geers / @naltatis

    View Slide

  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

    View Slide

  48. Einheitliches Look & Feel
    🧑🎤
    👨🎤
    👩🎤

    View Slide

  49. Design System !!
    Button
    Formulare
    Typo

    View Slide

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


    Shared Code &


    Kopplungsgefahr
    V1.9
    via NPM
    Muster


    Internes


    Open Source


    Projekt

    View Slide

  51. Redundanzminimierung
    🐘
    🐘
    🐘
    🐘
    🐘

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  58. Micro Frontends & Native Apps
    📱

    View Slide

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


    UI Flows werden
    mehrfach gebaut
    (Redundanz)


    Native Monolithen


    (Deployment)

    View Slide

  60. Native integrierte Apps
    Michael Geers / @naltatis
    Fachlichkeit in einem


    Team gebündelt.


    Größerer Tech Stack



    Kleine „native“ Teams.

    Nur Rahmen/Bundling.

    View Slide

  61. Hybride Apps (Native Shell & Webviews)
    Michael Geers / @naltatis
    Wenig Redundanz


    Einfacher Tech Stack



    Kleine „native“ Teams.

    Nur Rahmen/Bundling.

    View Slide

  62. Tools Ökosystem
    Michael Geers / @naltatis
    Atlas & BeeHive
    hybrid
    native


    integriert
    Android iOS

    View Slide

  63. Mehr zum Thema
    270 Seiten


    143 Illustrationen


    21 Beispiele

    64 Listings
    M A N N I N G
    Michael Geers
    Michael Geers / @naltatis

    View Slide

  64. Beispiele aus dem Buch the-tractor.store

    View Slide

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


    @naltatis

    View Slide

  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

    View Slide