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

Monolithen zerlegen

in Microservices?

unabhängige Vertikalen

unabhängige Vertikalen aka Micro Frontends

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

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

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

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

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

Trend 1: Mehr Features & mehr Entwickler

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

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

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

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

Nov. 2016 2017 2019 Quelle: ThoughtWorks Technology Radar

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

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

Applikation zerschneiden

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

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

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

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

Team Entscheiden Team Entdecken Team Kaufen

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

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

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

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

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

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

Real World Beispiele 30 Michael Geers @naltatis

Manufactum 2 Teams 31

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

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

Klingel Gruppe 5 Teams 34

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

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

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

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

PayPal 39 Beispiel: PayPal Egnineering Blog

40 Michael Geers @naltatis Beispiel: PayPal Egnineering Blog

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

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

schneller e Entwicklun g

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

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

Kundenfoku s direktes Feedback keine reinen API Teams

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

Fronten d Renovierun g ohne alles neu zu schreiben

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

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

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

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

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

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

Fragmente & Seiten zusammenkleben

56 Grafik: Micro Frontends in Action Michael Geers @naltatis

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

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

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

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

Tractor

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

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

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


 
 
 Komposition im Browser 
 mit Custom Elements

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

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

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


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

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

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

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

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

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

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

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

Konsistentes Design

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

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

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

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

Performance

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

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

Testen & Qualität

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

Wildwuchs vermeiden

Toolbox Gemeinsame Liste mit erprobten Technologien Wildwuchs vermeiden

Blueprint Projektvorlagen Integration, Pattern Library, …

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

Mehr zum Thema 86 Michael Geers @naltatis

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

Interaktive Beispiele: the-tractor.store

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

Buchempfehlung Zusammenspiel von Teamstruktur und Softwarearchitektur 90 Michael Geers @naltatis

Abhängigkeiten machen langsam

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!

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