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

Breaking up the Monolith

Ne Tren The Frontend Monolith d w presented by

popular architectures nowadays Michael Geers / @naltatis

Micro Frontends

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

The Agenda 🧙 What? 👩🏭 How? 🧚 Why? 🐲 Myths

🧙 What are micro frontends?

Nov. 2016 2017 2019 source: ThoughtWorks Technology Radar

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

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

cutting

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

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

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

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

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

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

each team ships user interface Michael Geers / @naltatis

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

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

Real World Projects

manufactum.com 2 teams

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

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

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

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

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

PayPal

PayPal PayPal Egnineering Blog Michael Geers / @naltatis

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

👩🏭 How can they be implemented?

putting it back together

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

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

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

<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

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

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

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

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

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

🧚 Why would I use micro frontends?

🥇 faster feature development …

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

teams should be decoupled

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

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

custome focu s r direct feedback no pure API teams

fronten renovatio n d without throwing everything away

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

🐲 micro frontend myths

🧀 🍩 🫐 🥦 🌶 micro frontends produce ugly tech mixes 🥓 🍆 🍟 🍊

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

🧀🍩🫐🥦🌶🥓🍆🍟🍊🥖 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

🐌micro frontends are bad for performance

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

🐘 🐘 but what about the redundancy? 🐘

smaller tools mean less redundancy larger runtime hyperapp 🐘 small runtime 🦆 Michael Geers / @naltatis

♻ 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

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

book examples the-tractor.store

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

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

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

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