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

Micro Frontends | E-Commerce Total Makeover Teil 3 | bevh

Michael Geers
December 08, 2020

Micro Frontends | E-Commerce Total Makeover Teil 3 | bevh

Vortrag im Rahmen der Vortragsreihe des Bundesverband E-Commerce und Versandhandel (bevh).
https://www.bevh.org/veranstaltungen/details/e-commerce-total-makover-20202021-thema-3-micro-frontends.html

Michael Geers

December 08, 2020
Tweet

More Decks by Michael Geers

Other Decks in Technology

Transcript

  1. Micro Frontends
    E-Commerce: Total Makeover - Teil 3
    8. Dezember 2020
    1
    Michael Geers @naltatis

    View Slide

  2. Monolithen


    zerlegen

    View Slide

  3. in Microservices?

    View Slide

  4. unabhängige
    Vertikalen

    View Slide

  5. unabhängige
    Vertikalen
    aka Micro Frontends

    View Slide

  6. Vertikalisierung
    mit Alex Knöller
    5
    https://youtu.be/8a-3b57LNU4

    View Slide

  7. Michael Geers


    Frontend Entwickler


    naltatis


    auf Twitter & GitHub


    Buch Micro Frontends in Action


    Webseite micro-frontends.org
    Bremer Software Manufaktur


    mit Fokus auf E-Commerce

    View Slide

  8. Wie viele Personen entwickeln
    am E-Commerce System?
    A) 1 - 10 Personen


    B) 11 - 20 Personen


    C) 21 - 50 Personen


    D) 51 - 100 Personen


    E) mehr als 100 Personen
    7
    Product Owner, UX/Designer,
    Software Entwickler, Tester, …
    Michael Geers @naltatis

    View Slide

  9. Wie viel Erfahrung hast du bereits mit
    Vertikalisierung und Micro Frontends?
    A) Micro What ?!?


    B) Schonmal von gehört. Könnte interessant sein.


    C) Beschäftige mich aktiv mit dem Thema.


    D) Erfolgreich im praktischen Einsatz.
    8 Michael Geers @naltatis

    View Slide

  10. „Klassische“ Architekturen
    9
    Grafik: Micro Frontends in Action Michael Geers @naltatis

    View Slide

  11. Trend 1: Mehr Features & mehr Entwickler

    View Slide

  12. Trend 2: Frontend Werkzeuge ändern sich schnell
    11
    Grafik: Micro Frontends in Action Michael Geers @naltatis

    View Slide

  13. Trend 3: SPAs sind modern
    12

    Tools wie Angular, Vue der React
    fördern den Bau von Monolithen

    in Form von Single Page Apps
    Monolith by Design

    View Slide

  14. Agenda
    1. Was sind Micro Frontends?


    2. Warum macht man das?


    3. Wie funktioniert das technisch?


    4. Worauf sollte man achten?
    13 Michael Geers @naltatis

    View Slide

  15. 1.Was sind Micro Frontends?
    14 Michael Geers @naltatis

    View Slide

  16. Nov. 2016
    2017
    2019
    Quelle: ThoughtWorks Technology Radar

    View Slide

  17. Eine Definition
    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. …
    16
    Quelle: ThoughtWorks Technology Radar Michael Geers @naltatis

    View Slide

  18. Eine Definition
    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. …
    17
    Quelle: ThoughtWorks Technology Radar Michael Geers @naltatis

    View Slide

  19. Applikation


    zerschneiden

    View Slide

  20. Zwei zentrale Konzepte:


    Seiten & Fragmente
    19 Michael Geers @naltatis

    View Slide

  21. 2
    33 $
    66 $
    99 $ buy
    2
    1
    66 $
    1
    1
    list
    home detail basket payment confirm
    $ $ %%
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    Customer Journey
    Ein Team verantwortet mehrere Seiten
    Tea
    m


    Kaufen
    Tea
    m


    Entscheiden
    Tea
    m


    Entdecken
    Grafik: Micro Frontends in Action Michael Geers @naltatis
    20

    View Slide

  22. Team


    Entscheiden
    Produktdetailseite
    21
    Beispiel: micro-frontends.org Michael Geers @naltatis

    View Slide

  23. Teams können Fragmente anbieten
    Team


    Entdecken
    Team Kaufen
    Mini-Warenkorb


    Fragment
    Kaufen-Button


    Fragment
    Empfehlungen


    Fragment

    View Slide

  24. Team


    Entscheiden
    Team


    Entdecken
    Team Kaufen

    View Slide

  25. Eine Definition
    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. …
    24
    Quelle: ThoughtWorks Technology Radar Michael Geers @naltatis

    View Slide

  26. 25
    Unabhängige Teams
    Cross Functional Teams


    Frontend


    Backend


    Operations
    Self-Contained Systems


    keine Abhängigkeiten

    zu andern Teams
    Grafik: Micro Frontends in Action Michael Geers @naltatis
    Ende-zu-Ende
    Verantwortung


    von UI bis Datenbank

    View Slide

  27. 26
    Team Missions
    Grafik: Micro Frontends in Action Michael Geers @naltatis

    View Slide

  28. 27
    Jedes Teams spielt UI aus
    Grafik: Micro Frontends in Action Michael Geers @naltatis

    View Slide

  29. Eine Definition
    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. …
    28
    Quelle: ThoughtWorks Technology Radar Michael Geers @naltatis

    View Slide

  30. 29
    Integration nur zur Laufzeit
    Grafik: Micro Frontends in Action Michael Geers @naltatis

    View Slide

  31. Real World Beispiele
    30 Michael Geers @naltatis

    View Slide

  32. Manufactum
    2 Teams
    31

    View Slide

  33. 32
    Team Sell


    Detailseite
    Team After-Sell


    Kundenkonto

    Mini-Warenkorb
    Michael Geers @naltatis

    View Slide

  34. 33
    Team Sell


    Navigation
    Michael Geers @naltatis
    Team After-Sell


    Warenkorbseite

    View Slide

  35. Klingel Gruppe
    5 Teams
    34

    View Slide

  36. 35
    Team Suchen


    Kategorieseite
    Team Kaufen


    Mini-Warenkorb
    Team Auswählen


    Merkliste
    Team Begleiten


    Kundenbegrüßung


    Feedback


    Support-Chat
    Team Entdecken


    Kaufanreizbanner

    Inspirationsteaser
    Michael Geers @naltatis

    View Slide

  37. 36
    Team Suchen


    Navigation
    Team Kaufen


    Mini-Warenkorb
    Team Auswählen


    Merkliste


    Artikeldetailseite
    Team Begleiten


    Kundenbegrüßung


    Feedback


    Support-Chat
    Team Entdecken


    Kaufanreizbanner
    Michael Geers @naltatis

    View Slide

  38. 37
    Team Kaufen


    neuer Warenkorb-Eintrag
    Team Auswählen


    Add-to-Cart Layer
    Team Entdecken


    Produktempfehlungen
    Michael Geers @naltatis

    View Slide

  39. 38
    Team Kaufen


    Anmeldeseite
    Team Entdecken


    Produktempfehlungen
    Team Begleiten


    Feedback


    Support-Chat
    Michael Geers @naltatis

    View Slide

  40. PayPal
    39
    Beispiel: PayPal Egnineering Blog

    View Slide

  41. 40 Michael Geers @naltatis
    Beispiel: PayPal Egnineering Blog

    View Slide

  42. Wer macht das noch?
    Michael Geers @naltatis
    Logos sind verlinkt
    41

    View Slide

  43. 2.Warum macht man das?
    42 Michael Geers @naltatis

    View Slide

  44. schneller
    e
    Entwicklun
    g

    View Slide

  45. 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
    Grafik: Micro Frontends in Action Michael Geers @naltatis
    44

    View Slide

  46. 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
    Entwicklung eines Features
    Meeting
    s


    viel Wartezeit

    45 Michael Geers @naltatis

    View Slide

  47. Kundenfoku
    s
    direktes Feedback


    keine reinen API Teams

    View Slide

  48. Reduzierte
    r
    Scop
    e
    Man kann den Überblick über
    das ganze System haben.

    View Slide

  49. Fronten
    d
    Renovierun
    g
    ohne alles neu zu schreiben

    View Slide

  50. 49
    Grafik: Micro Frontends in Action Michael Geers @naltatis
    Technologiewechsel ist Team-Entscheidung

    View Slide

  51. 50
    Grafik: Micro Frontends in Action Michael Geers @naltatis
    Wie „tief“ ist dein Micro Frontend?

    View Slide

  52. Micro Frontends Umfrage
    51
    Quelle: State of Microfrontends, Florian Rappl, 2020 Michael Geers @naltatis

    View Slide

  53. Micro Frontends Umfrage
    52
    Quelle: State of Microfrontends, Florian Rappl, 2020 Michael Geers @naltatis

    View Slide

  54. Wan
    n
    sin
    d
    Micr
    o
    Frontend
    s


    kein
    e
    gut
    e
    Ide
    e
    ?
    Native Apps?!


    Integration ist einfacher im Web


    AppStore Review vs. Continuous Delivery
    kleine Projekte


    Hauptvorteil ist Skalierung


    Schnitte bringen Overhead
    Unbekannte Domäne


    Schnitte sind schwer zu ändern


    ‎ maybe Monolith-first

    View Slide

  55. 3.
    Wie funktioniert das technisch?
    54 Michael Geers @naltatis

    View Slide

  56. Fragmente & Seiten


    zusammenkleben

    View Slide

  57. 56
    Grafik: Micro Frontends in Action Michael Geers @naltatis

    View Slide

  58. 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 mit Links
    Grafik: Micro Frontends in Action Michael Geers @naltatis
    57

    View Slide

  59. Spotify web player (bis Anfang 2019) & Desktop App


    https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/
    Komposition mit iframes

    View Slide

  60. Server


    Team Entscheiden
    frontend-proxy (Nginx, …)
    Server


    Team Kaufen
    /red-tractor
    Komposition


    auf dem Server

    mit SSI oder ESI

    View Slide

  61. Server


    Team Entscheiden
    frontend-proxy (Nginx, …)
    Server


    Team Kaufen
    /red-tractor






    Tractor






    /red-tractor
    Komposition


    auf dem Server

    mit SSI oder ESI

    View Slide

  62. Server


    Team Entscheiden
    frontend-proxy (Nginx, …)
    Server


    Team Kaufen
    /red-tractor






    Tractor






    /kaufen/basket
    /kaufen/buy
    /red-tractor
    Komposition


    auf dem Server

    mit SSI oder ESI

    View Slide




  63. buy for 66 €



    0 items



    0 items


    Tractor


    buy for 66 €



    Server


    Team Entscheiden
    frontend-proxy (Nginx, …)
    Server


    Team Kaufen
    /red-tractor






    Tractor






    /kaufen/basket
    /kaufen/buy
    /red-tractor
    Komposition


    auf dem Server

    mit SSI oder ESI

    View Slide










  64. Komposition


    im Browser

    mit Custom Elements

    View Slide

  65. class KaufenBasket extends HTMLElement {


    constructor() {...}

    connectedCallback() {...}

    attributeChangedCallback(attr, oldVal, newVal) {...}

    disconnectedCallback() {...}

    }


    window.customElements.define('kaufen-basket', KaufenBasket);
    Die Custom Elements API
    61 Michael Geers @naltatis

    View Slide

  66. Unterschiedliche Formen von Kommunikation
    62 Michael Geers @naltatis
    Grafik: Micro Frontends in Action

    View Slide

  67. Seite zu Seite: URL-Parameter
    
 

    Seite zu Fragment: Attribute


    Fragment zu Seite: Events (Bubbling)


    Fragment zu Fragment: Events (Broadcast)
    UI Kommunikation im Browser
    props down, events up
    Standard Browser APIs

    View Slide










  68. t_green
    t_green
    Kommunikation


    Beispiel: Seite zu Fragment


    Seite aktualisiert sku-Attribut der Fragmente

    View Slide

  69. FE-BE Kommunikation nur innerhalb der Systeme
    65 Michael Geers @naltatis
    Grafik: Micro Frontends in Action

    View Slide

  70. Asynchrone Datenaustausch via Replikation
    66 Michael Geers @naltatis
    Grafik: Micro Frontends in Action

    View Slide

  71. 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 mit Links
    Grafik: Micro Frontends in Action Michael Geers @naltatis
    67

    View Slide

  72. Seitenübergänge zwischen SPAs
    hard soft
    soft
    SPA SPA
    Shared Application Shell (Meta Framework)
    soft soft
    soft
    SPA SPA
    Verlinkte Single Page Apps Unified Single Page App
    Grafik: Micro Frontends in Action Michael Geers @naltatis
    68

    View Slide

  73. Libraries & Meta Frameworks
    https://github.com/CanopyTax/single-spa
    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

    View Slide

  74. 4.
    Worauf sollte man achten?
    70 Michael Geers @naltatis

    View Slide

  75. 71 Michael Geers @naltatis
    Gemeinsame
    Infrastruktur?

    Testen &


    Qualität
    Erfahrungs-
    austausch


    Lokales Entwicklung


    & Debugging

    Ausliefern
    statischer Assets

    Legacy &
    Migration

    Konsistentes
    Design
    Performance
    Wildwuchs


    verhindern

    View Slide

  76. Konsistentes


    Design

    View Slide

  77. gemeinsame


    Pattern Library




    design design dev dev
    dev ux
    73 Michael Geers @naltatis
    Konsistentes Design

    View Slide

  78. 1
    66 $
    Runtime Integration aka Bootstrap Model Versioned Package
    Pattern
    Library
    Product
    Team
    Product
    Team
    Product
    Team
    CSS
    & JS
    production
    1
    66 $
    Pattern
    Library
    Product
    Team
    Product
    Team
    Product
    Team
    v2.0
    v2.1
    v2.1
    v2.1
    v2.0
    JS
    CSS
    Template
    HTML
    JS
    CSS
    HTML
    Auslieferung als
    versioniertes Paket
    Teams updaten in eigener Geschwindigkeit


    Self-Contained > 100% Konsistenz
    74 Michael Geers @naltatis
    Konsistentes Design

    View Slide

  79. Pattern
    Library
    Team A
    Team B
    Team C
    CSS
    Pure CSS
    Pattern
    Library
    Team A
    Team B
    Team C
    Framework-specific Components
    Pattern
    Library
    Team A
    Team B
    Team C
    Framework-agnostic Components
    Vue.js
    Web
    Components
    Pattern
    Library
    Team A
    Team B
    Team C
    Multiple Framework Components
    Vue.js
    Angular
    Pattern
    Library
    Team A
    Team B
    Team C
    CSS
    & JSX
    Common Templating Language (e.g. JSX)
    hyperapp

    JSX compatible
    hyperapp
    Komponentenformat


    der Pattern Library


    beschränkt


    Tech-Stack-Wahl


    der Feature-Teams.
    75 Michael Geers @naltatis
    Konsistentes Design

    View Slide

  80. Mehr zum Thema
    https://uiengineering.de/

    76 Michael Geers @naltatis
    Konsistentes Design

    View Slide

  81. Performance

    View Slide

  82. Performance Kultur
    erst messen


    dann optimieren
    Welches Team ist
    verantwortlich?
    gemeinsame


    Metriken definieren
    78 Michael Geers @naltatis
    Performance

    View Slide

  83. Wähle deine Waffen mit Bedacht!
    große Framework Runtime
    hyperapp
    k(l)eine Runtime
    79 Michael Geers @naltatis
    Performance

    View Slide

  84. Testen &


    Qualität

    View Slide

  85. Testen in Isolation
    Fragmente sind self-contained


    funktionieren auch ohne Seite
    Mock


    Fragment
    Seiten funktionieren auch


    ohne Fragmente anderer Teams
    fast


    alle Tests
    81 Michael Geers @naltatis
    Qualität und Testen

    View Slide

  86. Wildwuchs


    vermeiden

    View Slide

  87. Toolbox
    Gemeinsame Liste mit


    erprobten Technologien
    Wildwuchs vermeiden

    View Slide

  88. Blueprint Projektvorlagen


    Integration, Pattern Library, …

    View Slide

  89. 85 Michael Geers @naltatis
    Gemeinsame
    Infrastruktur?

    Testen &


    & Debugging

    Ausliefern
    statischer Assets

    Legacy &
    Migration

    Konsistentes
    Design
    Performance
    Wildwuchs


    View Slide

  90. Mehr zum Thema
    86 Michael Geers @naltatis

    View Slide

  91. Mein Buch
    Erschienen bei Manning Publications


    Early Access Juli 2019 / Release September 2020


    35% Rabatt mit Code mtpfrontends20


    auf alle Bücher bei manning.com
    M A N N I N G
    Michael Geers
    87 Michael Geers @naltatis

    View Slide

  92. Interaktive Beispiele: the-tractor.store

    View Slide

  93. Mehr zum Thema
    micro-frontends.org


    Artikel von Cam Jackson


    Artikel von Gustaf Nilsson Kotte

    Blogposts vom Florian Rappl


    Blogposts von Luca Mezzalira


    Ausführliche Linksammlung

    View Slide

  94. Buchempfehlung
    Zusammenspiel von
    Teamstruktur und
    Softwarearchitektur
    90 Michael Geers @naltatis

    View Slide

  95. Abhängigkeiten


    machen langsam

    View Slide

  96. Danke


    fürs Zuhören
    Michael Geers


    neuland Büro für Informatik
    
 

    [email protected]

    Twitter: @naltatis
    Team Autonomie for the Win!

    View Slide

  97. Mosaik Koushik Chowdavarapu

    https://unsplash.com/photos/aWBPk_GBaCk


    Monolith Jeff Hendricks

    https://unsplash.com/photos/yIKdc86jNBs


    Containers Frank Mckenna

    https://unsplash.com/photos/tjX_sniNzgQ


    Buildings Juhasz Imre

    https://www.pexels.com/photo/apartment-architecture-buildings-
    business-425047/


    Zahnräder Miguel Á. Padriñán

    https://www.pexels.com/de-de/foto/industrie-technologie-fabrik-
    kreis-3785930/


    Utah Desert Monolith Patrick A. Mackie

    https://commons.wikimedia.org/wiki/File:Utah_Desert_Monolith.jpg


    Scissors Matt Artz

    https://unsplash.com/photos/SmocKx2oDZc


    People Icons freak

    https://www.flaticon.com/family/special/lineal-color


    Action Bicycling Roman Pohorecki

    https://www.pexels.com/photo/action-bicycling-bike-biking-287398/


    The Tool Guy Tirachard Kumtanom

    https://unsplash.com/photos/UuW4psOb388


    Wooden Counter David Siglin

    https://www.pexels.com/photo/blur-blurry-bokeh-close-up-347139/


    Woodshop Igor Ovsyannykov

    https://unsplash.com/photos/iXV0i4Wo4yc


    Traf
    f
    i
    c Lights Harshal Desai

    https://unsplash.com/photos/0hCIrw8dVfE


    Flinke Flasche (ich)


    Rotary Telephone Mike Meyers

    https://unsplash.com/photos/-haAxbjiHds


    Toolbox Julie Molliver

    https://unsplash.com/photos/Z3vFp7szCAY


    Red Blueprint Ivan Samkov

    https://www.pexels.com/de-de/foto/kreativ-gebaude-bau-
    schreibtisch-4491830/


    Schuhbänder (ich)


    Tractors Manufactum

    https://www.manufactum.com/tin-toys-c193667/
    Bildquellen
    mit Micro Frontends gebaut

    View Slide