Bye Bye Frontend Monolith: Accelerating Feature Development with Micro Frontends

A presentation at Philly ETE 2021 in May 2021 in by Michael Geers

Slide 1

Slide 1

bye bye frontend monolith accelerating feature development with micro frontends #PhillyETE / Emerging Technologies for the Enterprise 2021 Michael Geers / @naltatis

Slide 2

Slide 2

Breaking up the Monolith

Slide 3

Slide 3

Ne Tren The Frontend Monolith d w presented by

Slide 4

Slide 4

popular architectures nowadays Michael Geers / @naltatis

Slide 5

Slide 5

Micro Frontends

Slide 6

Slide 6

Michael Geers frontend engineer naltatis Twitter & GitHub author of the book Micro Frontends in Action and the website micro-frontends.org building tailored e-commerce systems

Slide 7

Slide 7

The Agenda πŸ§™ What? πŸ‘©πŸ­ How? 🧚 Why? 🐲 Myths

Slide 8

Slide 8

πŸ§™ What are micro frontends?

Slide 9

Slide 9

Nov. 2016 2017 2019 source: ThoughtWorks Technology Radar

Slide 10

Slide 10

A De nition 1/3 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. … fi source: ThoughtWorks Technology Radar Michael Geers / @naltatis

Slide 11

Slide 11

A De nition 1/3 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. … fi source: ThoughtWorks Technology Radar Michael Geers / @naltatis

Slide 12

Slide 12

cutting

Slide 13

Slide 13

pages & fragments* * aka includable Micro Frontends, Podlets, Parcels, Pilets, … Michael Geers / @naltatis

Slide 14

Slide 14

teams can own one or more pages Customer Journey 1 1 1 2 2 33 $ 66 $ $$ 66 $ %% 99 $ home list Team Inspire illustration: Micro Frontends in Action detail Team Decide buy basket payment confirm Team Checkout Michael Geers / @naltatis

Slide 15

Slide 15

fragments are embedded mini-applications Team Decide Team Inspire Fragment Page Team Checkout illustration: Micro Frontends in Action Fragment Michael Geers / @naltatis

Slide 16

Slide 16

A De nition 2/3 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. … fi source: ThoughtWorks Technology Radar Michael Geers / @naltatis

Slide 17

Slide 17

Team Missions illustration: Micro Frontends in Action Michael Geers / @naltatis

Slide 18

Slide 18

Independent Teams & Systems Cross Functional Teams ux/design, frontend backend, data science, ops Self-Contained Systems separate applications that don’t rely on each other End-to-End Responsibility from user interface to database , e c iv r e s o r ic m like a chunky I U n w o s it h but wit illustration: Micro Frontends in Action Michael Geers / @naltatis

Slide 19

Slide 19

each team ships user interface Michael Geers / @naltatis

Slide 20

Slide 20

A De nition 3/3 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. … fi source: ThoughtWorks Technology Radar Michael Geers / @naltatis

Slide 21

Slide 21

Independent Deployments illustration: Micro Frontends in Action Michael Geers / @naltatis

Slide 22

Slide 22

Real World Projects

Slide 23

Slide 23

manufactum.com 2 teams

Slide 24

Slide 24

Team After-Sell Team Sell product page login status fragment mini basket fragment Michael Geers / @naltatis

Slide 25

Slide 25

Team Sell Team After-Sell basket page navigation fragment Michael Geers / @naltatis

Slide 26

Slide 26

Klingel Group 5 teams from 4 software companies 15 brands, 12 countries, ~65 shops 26

Slide 27

Slide 27

Team Checkout Team Search mini basket category page Team Decide wishlist Team Inspire promotion inspiration Team Account login status feedback support Michael Geers / @naltatis

Slide 28

Slide 28

Team Checkout login page Team Inspire Team Account recommendations feedback support Michael Geers / @naltatis

Slide 29

Slide 29

PayPal

Slide 30

Slide 30

PayPal PayPal Egnineering Blog Michael Geers / @naltatis

Slide 31

Slide 31

Who uses micro frontends? logos link to the sources Michael Geers / @naltatis

Slide 32

Slide 32

πŸ‘©πŸ­ How can they be implemented?

Slide 33

Slide 33

putting it back together

Slide 34

Slide 34

What needs to be integrated? illustration: Micro Frontends in Action Michael Geers / @naltatis

Slide 35

Slide 35

composition with iframes Spotify web player (until early 2019) & Desktop App https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/ Michael Geers / @naltatis

Slide 36

Slide 36

composition on the server using SSI or ESI /red-tractor

<html> <em>0 items</em> <h1>Tractor</h1> <button>buy for 66 €</button> </html> server Team Decide <button> buy for 66 € </button> /checkout/buy <em>0 items</em> <html> <!β€”#include virtual=β€œ/checkout/basketβ€œ β€”> <h1>Tractor</h1> <!β€”#include virtual=β€œ/checkout/buyβ€œ β€”> </html> /checkout/basket /red-tractor reverse-proxy (nginx, …) server Team Checkout

Slide 37

Slide 37

<checkout-basket> </checkout-basket> composition in the browser with Custom Elements <inspire-reco sku=”t_red”> </inspire-reco> <checkout-buy sku=”t_red”> </checkout-buy> Michael Geers / @naltatis

Slide 38

Slide 38

page transitions using links Customer Journey 1 1 1 2 2 33 $ 66 $ $$ 66 $ %% 99 $ home list Team Inspire illustration: Micro Frontends in Action detail Team Decide buy basket payment confirm Team Checkout Michael Geers / @naltatis

Slide 39

Slide 39

page transitions between SPAs Linked Single Page Apps fi illustration: Micro Frontends in Action Uni ed Single Page App Michael Geers / @naltatis

Slide 40

Slide 40

jobs of the application shell? β€£ β€£ β€£ illustration: Micro Frontends in Action central entry point for the user can load, start and stop all SPAs switches between SPAs if necessary Michael Geers / @naltatis

Slide 41

Slide 41

single-spa β€£ β€£ β€£ β€£ https://single-spa.js.org/ ready-to-use application shell most popular solution plugins for nearly all frameworks also supports composition Michael Geers / @naltatis

Slide 42

Slide 42

libraries & meta frameworks https://qiankun.umijs.org Podium Piral icestark https://piral.io https://ice-lab.github.io/icestark/ https://podium-lib.io Ara https://github.com/ara-framework https://github.com/opencomponents/oc https://github.com/onerzafer/microfe-client Luigi meta-spa-router https://github.com/manfredsteyer/meta-router https://github.com/zalando/tailor puzzle.js https://github.com/puzzle-js https://github.com/SAP/luigi ILC https://github.com/namecheap/ilc Michael Geers / @naltatis

Slide 43

Slide 43

🧚 Why would I use micro frontends?

Slide 44

Slide 44

πŸ₯‡ faster feature development …

Slide 45

Slide 45

three 8-person teams are more effective than one 24-person team Michael Geers / @naltatis

Slide 46

Slide 46

teams should be decoupled

Slide 47

Slide 47

Specialist Teams Cross Functional Teams Frontend Content Service Attributes Service Payment Service Team Inspire Business Team Checkout Operations Platform grouped around a skill or technology illustration: Micro Frontends in Action Team Decide grouped around a use case or customer need Michael Geers / @naltatis

Slide 48

Slide 48

Specialist Teams Cross Functional Teams Frontend Content Service Attributes Service Payment Service Team Inspire Business Team Decide Team Checkout Operations Platform grouped around a skill or technology grouped around a use case or customer need ⏳ Meeting Developing a Features waiting for others s Michael Geers / @naltatis

Slide 49

Slide 49

custome focu s r direct feedback no pure API teams

Slide 50

Slide 50

fronten renovatio n d without throwing everything away

Slide 51

Slide 51

technology change becomes a team decision illustration: Micro Frontends in Action Michael Geers / @naltatis

Slide 52

Slide 52

🐲 micro frontend myths

Slide 53

Slide 53

πŸ§€ 🍩 🫐 πŸ₯¦ 🌢 micro frontends produce ugly tech mixes πŸ₯“ πŸ† 🍟 🍊

Slide 54

Slide 54

how micro frontends did not work out for League of Legends Twitter thread by Jules Glegg / @heyjulesfern (June 2019)

Slide 55

Slide 55

πŸ§€πŸ©πŸ«πŸ₯¦πŸŒΆπŸ₯“πŸ†πŸŸπŸŠπŸ₯– micro frontend anarchy just because you can, doesn’t mean you should β€£ β€£ β€£ β€£ Technology Radar #23 agree upon a tech stack make it easy to get started (starter kit, blueprint) exchange learnings between teams try not to over-regulate Michael Geers / @naltatis

Slide 56

Slide 56

🐌micro frontends are bad for performance

Slide 57

Slide 57

Analyses of loading performance (LCP) in German fashion e-commerce shops all using a micro frontends architecture 🚴 micro frontend sites can be very fast or slow - it’s mostly about good engineering source: Textil Wirtschaft

Slide 58

Slide 58

🐘 🐘 but what about the redundancy? 🐘

Slide 59

Slide 59

smaller tools mean less redundancy larger runtime hyperapp 🐘 small runtime πŸ¦† Michael Geers / @naltatis

Slide 60

Slide 60

β™» reusing vendor libraries between systems with import maps lib-1 A lib-2 B with module federation central library repository C applications can reference central libraries to reduce their bundle size https://github.com/systemjs/systemjs/blob/master/docs/import-maps.md peer-to-peer approach A lib-1 B C lib-2 applications can reuse already loaded libraries from inside other applications https://module-federation.github.io

Slide 61

Slide 61

I’ve written a book Michael Geers 270 pages 143 illustrations 21 examples 64 listings 35% off with code ctwemerge21 MANNING and all other books at manning.com Michael Geers / @naltatis

Slide 62

Slide 62

book examples the-tractor.store

Slide 63

Slide 63

need more? micro-frontends.org article by Cam Jackson article by Gustaf Nilsson Kotte blogposts by Florian Rappl blogposts by Luca Mezzalira πŸ‘“ awesomelist by Rajasegar Chandran Michael Geers / @naltatis

Slide 64

Slide 64

book recommendation about structuring your organisation’s teams & systems Michael Geers / @naltatis

Slide 65

Slide 65

thank you for listening! stay healthy Michael Geers / @naltatis

Slide 66

Slide 66

image credits Mirror Facade Jonas Ferlin Man Welding Metal Kateryna Babaieva https://www.pexels.com/photo/mirror-facade-of-tallbuilding-1963557/ https://www.pexels.com/photo/man-weldingmetal-2880871/ Monolith 1 Jeff Hendricks Action Bicycling Roman Pohorecki https://unsplash.com/photos/yIKdc86jNBs https://www.pexels.com/photo/action-bicycling-bikebiking-287398/ Monolith 2 Rana Osman https://unsplash.com/photos/JcSsu-NF3qo Running Kids (me) Buildings Juhasz Imre The Tool Guy Tirachard Kumtanom https://www.pexels.com/photo/apartment-architecturebuildings-business-425047/ https://unsplash.com/photos/UuW4psOb388 Metal Blade Russ Ward Woodshop Igor Ovsyannykov https://unsplash.com/photos/iXV0i4Wo4yc https://unsplash.com/photos/aMlbxs8SYig Tractors Manufactum https://www.manufactum.com/tin-toys-c193667/ s d n e t n o r f o r c i m h t i w t l i bu