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

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