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

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

457365e2e75c27f3e1c3a3744f5c5e4b?s=47 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

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

December 08, 2020
Tweet

Transcript

  1. Micro Frontends E-Commerce: Total Makeover - Teil 3 8. Dezember

    2020 1 Michael Geers @naltatis
  2. Monolithen zerlegen

  3. in Microservices?

  4. unabhängige Vertikalen

  5. unabhängige Vertikalen aka Micro Frontends

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

  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
  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
  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
  10. „Klassische“ Architekturen 9 Grafik: Micro Frontends in Action Michael Geers

    @naltatis
  11. Trend 1: Mehr Features & mehr Entwickler

  12. Trend 2: Frontend Werkzeuge ändern sich schnell 11 Grafik: Micro

    Frontends in Action Michael Geers @naltatis
  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
  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
  15. 1.Was sind Micro Frontends? 14 Michael Geers @naltatis

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

  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
  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
  19. Applikation zerschneiden

  20. Zwei zentrale Konzepte: Seiten & Fragmente 19 Michael Geers @naltatis

  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
  22. Team Entscheiden Produktdetailseite 21 Beispiel: micro-frontends.org Michael Geers @naltatis

  23. Teams können Fragmente anbieten Team Entdecken Team Kaufen Mini-Warenkorb Fragment

    Kaufen-Button Fragment Empfehlungen Fragment
  24. Team Entscheiden Team Entdecken Team Kaufen

  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
  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
  27. 26 Team Missions Grafik: Micro Frontends in Action Michael Geers

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

    Action Michael Geers @naltatis
  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
  30. 29 Integration nur zur Laufzeit Grafik: Micro Frontends in Action

    Michael Geers @naltatis
  31. Real World Beispiele 30 Michael Geers @naltatis

  32. Manufactum 2 Teams 31

  33. 32 Team Sell Detailseite Team After-Sell Kundenkonto 
 Mini-Warenkorb Michael

    Geers @naltatis
  34. 33 Team Sell Navigation Michael Geers @naltatis Team After-Sell Warenkorbseite

  35. Klingel Gruppe 5 Teams 34

  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
  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
  38. 37 Team Kaufen neuer Warenkorb-Eintrag Team Auswählen Add-to-Cart Layer Team

    Entdecken Produktempfehlungen Michael Geers @naltatis
  39. 38 Team Kaufen Anmeldeseite Team Entdecken Produktempfehlungen Team Begleiten Feedback

    Support-Chat Michael Geers @naltatis
  40. PayPal 39 Beispiel: PayPal Egnineering Blog

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

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

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

  44. schneller e Entwicklun g

  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
  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
  47. Kundenfoku s direktes Feedback keine reinen API Teams

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

    ganze System haben. ❤
  49. Fronten d Renovierun g ohne alles neu zu schreiben

  50. 49 Grafik: Micro Frontends in Action Michael Geers @naltatis Technologiewechsel

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

    „tief“ ist dein Micro Frontend?
  52. Micro Frontends Umfrage 51 Quelle: State of Microfrontends, Florian Rappl,

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

    2020 Michael Geers @naltatis
  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
  55. 3. Wie funktioniert das technisch? 54 Michael Geers @naltatis

  56. Fragmente & Seiten zusammenkleben

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

  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
  59. Spotify web player (bis Anfang 2019) & Desktop App https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/

    Komposition mit iframes
  60. Server Team Entscheiden frontend-proxy (Nginx, …) Server Team Kaufen /red-tractor

    Komposition auf dem Server 
 mit SSI oder ESI
  61. Server Team Entscheiden frontend-proxy (Nginx, …) Server Team Kaufen /red-tractor

    <html> <!--#include virtual=“/kaufen/basket“ --> <h1>Tractor</h1> <!--#include virtual=“/kaufen/buy“ --> </html> /red-tractor Komposition auf dem Server 
 mit SSI oder ESI
  62. Server Team Entscheiden frontend-proxy (Nginx, …) Server Team Kaufen /red-tractor

    <html> <!--#include virtual=“/kaufen/basket“ --> <h1>Tractor</h1> <!--#include virtual=“/kaufen/buy“ --> </html> /kaufen/basket /kaufen/buy /red-tractor Komposition auf dem Server 
 mit SSI oder ESI
  63. <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 Entscheiden frontend-proxy (Nginx, …) Server Team Kaufen /red-tractor <html> <!--#include virtual=“/kaufen/basket“ --> <h1>Tractor</h1> <!--#include virtual=“/kaufen/buy“ --> </html> /kaufen/basket /kaufen/buy /red-tractor Komposition auf dem Server 
 mit SSI oder ESI
  64. <entdecken-reco sku="t_red"> 
 </entdecken-reco> <kaufen-basket> 
 </kaufen-basket> <kaufen-buy sku="t_red"> 


    </kaufen-buy> Komposition im Browser 
 mit Custom Elements
  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
  66. Unterschiedliche Formen von Kommunikation 62 Michael Geers @naltatis Grafik: Micro

    Frontends in Action
  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
  68. <entdecken-reco sku="t_red"> 
 </entdecken-reco> <kaufen-basket> 
 </kaufen-basket> <kaufen-buy sku="t_red"> 


    </kaufen-buy> t_green t_green Kommunikation Beispiel: Seite zu Fragment Seite aktualisiert sku-Attribut der Fragmente
  69. FE-BE Kommunikation nur innerhalb der Systeme 65 Michael Geers @naltatis

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

    Frontends in Action
  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
  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
  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
  74. 4. Worauf sollte man achten? 70 Michael Geers @naltatis

  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
  76. Konsistentes Design

  77. gemeinsame Pattern Library design design dev dev dev ux 73

    Michael Geers @naltatis Konsistentes Design
  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
  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
  80. Mehr zum Thema https://uiengineering.de/ 76 Michael Geers @naltatis Konsistentes Design

  81. Performance

  82. Performance Kultur erst messen dann optimieren Welches Team ist verantwortlich?

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

    Runtime 79 Michael Geers @naltatis Performance
  84. Testen & Qualität

  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
  86. Wildwuchs vermeiden

  87. Toolbox Gemeinsame Liste mit erprobten Technologien Wildwuchs vermeiden

  88. Blueprint Projektvorlagen Integration, Pattern Library, …

  89. 85 Michael Geers @naltatis Gemeinsame Infrastruktur? Testen & & Debugging

    Ausliefern statischer Assets Legacy & Migration Konsistentes Design Performance Wildwuchs
  90. Mehr zum Thema 86 Michael Geers @naltatis

  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
  92. Interaktive Beispiele: the-tractor.store

  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
  94. Buchempfehlung Zusammenspiel von Teamstruktur und Softwarearchitektur 90 Michael Geers @naltatis

  95. Abhängigkeiten machen langsam

  96. Danke fürs Zuhören Michael Geers neuland Büro für Informatik 


    
 michael.geers@neuland-bfi.de 
 Twitter: @naltatis Team Autonomie for the Win!
  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