Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Monolithen zerlegen

Slide 3

Slide 3 text

in Microservices?

Slide 4

Slide 4 text

unabhängige Vertikalen

Slide 5

Slide 5 text

unabhängige Vertikalen aka Micro Frontends

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Trend 1: Mehr Features & mehr Entwickler

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Nov. 2016 2017 2019 Quelle: ThoughtWorks Technology Radar

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Applikation zerschneiden

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Teams können Fragmente anbieten Team Entdecken Team Kaufen Mini-Warenkorb Fragment Kaufen-Button Fragment Empfehlungen Fragment

Slide 24

Slide 24 text

Team Entscheiden Team Entdecken Team Kaufen

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Real World Beispiele 30 Michael Geers @naltatis

Slide 32

Slide 32 text

Manufactum 2 Teams 31

Slide 33

Slide 33 text

32 Team Sell Detailseite Team After-Sell Kundenkonto 
 Mini-Warenkorb Michael Geers @naltatis

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Klingel Gruppe 5 Teams 34

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

37 Team Kaufen neuer Warenkorb-Eintrag Team Auswählen Add-to-Cart Layer Team Entdecken Produktempfehlungen Michael Geers @naltatis

Slide 39

Slide 39 text

38 Team Kaufen Anmeldeseite Team Entdecken Produktempfehlungen Team Begleiten Feedback Support-Chat Michael Geers @naltatis

Slide 40

Slide 40 text

PayPal 39 Beispiel: PayPal Egnineering Blog

Slide 41

Slide 41 text

40 Michael Geers @naltatis Beispiel: PayPal Egnineering Blog

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

schneller e Entwicklun g

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Kundenfoku s direktes Feedback keine reinen API Teams

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Fronten d Renovierun g ohne alles neu zu schreiben

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Fragmente & Seiten zusammenkleben

Slide 57

Slide 57 text

56 Grafik: Micro Frontends in Action Michael Geers @naltatis

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Spotify web player (bis Anfang 2019) & Desktop App https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/ Komposition mit iframes

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Server Team Entscheiden frontend-proxy (Nginx, …) Server Team Kaufen /red-tractor

Tractor

/red-tractor Komposition auf dem Server 
 mit SSI oder ESI

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text


 
 
 Komposition im Browser 
 mit Custom Elements

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text


 
 
 t_green t_green Kommunikation Beispiel: Seite zu Fragment Seite aktualisiert sku-Attribut der Fragmente

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

71 Michael Geers @naltatis Gemeinsame Infrastruktur? Testen & Qualität Erfahrungs- austausch Lokales Entwicklung & Debugging Ausliefern statischer Assets Legacy & Migration Konsistentes Design Performance Wildwuchs verhindern

Slide 76

Slide 76 text

Konsistentes Design

Slide 77

Slide 77 text

gemeinsame Pattern Library design design dev dev dev ux 73 Michael Geers @naltatis Konsistentes Design

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Mehr zum Thema https://uiengineering.de/ 76 Michael Geers @naltatis Konsistentes Design

Slide 81

Slide 81 text

Performance

Slide 82

Slide 82 text

Performance Kultur erst messen dann optimieren Welches Team ist verantwortlich? gemeinsame Metriken definieren 78 Michael Geers @naltatis Performance

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Testen & Qualität

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Wildwuchs vermeiden

Slide 87

Slide 87 text

Toolbox Gemeinsame Liste mit erprobten Technologien Wildwuchs vermeiden

Slide 88

Slide 88 text

Blueprint Projektvorlagen Integration, Pattern Library, …

Slide 89

Slide 89 text

85 Michael Geers @naltatis Gemeinsame Infrastruktur? Testen & & Debugging Ausliefern statischer Assets Legacy & Migration Konsistentes Design Performance Wildwuchs

Slide 90

Slide 90 text

Mehr zum Thema 86 Michael Geers @naltatis

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Interaktive Beispiele: the-tractor.store

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

Buchempfehlung Zusammenspiel von Teamstruktur und Softwarearchitektur 90 Michael Geers @naltatis

Slide 95

Slide 95 text

Abhängigkeiten machen langsam

Slide 96

Slide 96 text

Danke fürs Zuhören Michael Geers neuland Büro für Informatik 
 
 [email protected] 
 Twitter: @naltatis Team Autonomie for the Win!

Slide 97

Slide 97 text

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