bye bye frontend monolith

accelerating feature development with micro frontends#PhillyETE / Emerging Technologies for the Enterprise 2021

Michael Geers / @naltatis

Breaking upthe MonolithNeTrenThe Frontend Monolithdw

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 deployedindependently from other features. …

fisource: 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 deployedindependently from other features. …

fisource: 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
1112

233 $
66 $$$

66 $%%

99 $homelistTeamInspire

illustration: Micro Frontends in Action

detailTeamDecidebuybasket

payment

confirm

TeamCheckout

Michael Geers / @naltatis

fragments are embedded mini-applications
TeamDecide

TeamInspirePage

Fragment

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 deployedindependently from other features. …

fisource: ThoughtWorks Technology RadarMichael 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,
ecivr
esor
icm
like a chunkyIUnwos
ithbut 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 deployedindependently from other features. …

fisource: 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 pagelogin status fragment
mini basket fragment

Michael Geers / @naltatis

Team Sell

Team After-Sellbasket pagenavigation fragment

Michael Geers / @naltatis

Klingel Group

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

26

Team Checkout
Team Searchmini basket

category page

Team Decidewishlist

Team Inspire
promotion
inspiration

Team Accountlogin status
feedback
supportMichael Geers / @naltatis

Team Checkout
login page

Team Inspire

Team Accountrecommendations

feedback
supportMichael Geers / @naltatis

PayPalPayPalPayPal Egnineering BlogMichael Geers / @naltatis

Who uses micro frontends?

logos link to the sources
Michael Geers / @naltatis👩🏭How can they be implemented?

putting
it backtogether

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

compositionon the serverusing SSI or ESI/red-tractor<html><em>0 items</em><h1>Tractor</h1><button>buy for 66 €</button></html>serverTeam 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, …)serverTeam Checkout

<checkout-basket></checkout-basket>

compositionin 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
1112

233 $
66 $

$$

66 $

%%

99 $

homelistTeamInspire

illustration: Micro Frontends in Action

detailTeamDecidebuybasket

payment

confirm

TeamCheckout

Michael Geers / @naltatis

page transitions between SPAs
Linked Single Page Apps

fiillustration: 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-clientLuigi

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 teamMichael Geers / @naltatis

teams should be decoupled

Specialist Teams

Cross Functional Teams

Frontend

Content
Service

Attributes
Service

Payment
ServiceTeam
InspireBusinessTeam
Checkout

Operations
Platformgrouped around a skill or technology
illustration: Micro Frontends in Action

TeamDecidegrouped around a use case or customer need
Michael Geers / @naltatis

Specialist Teams

Cross Functional Teams

FrontendContentServiceAttributes
ServicePaymentServiceTeamInspireBusinessTeamDecide

Team
CheckoutOperations
Platformgrouped around a skill or technology
grouped around a use case or customer need
⏳ Meeting
Developing a Features
waiting for otherssMichael Geers / @naltatis

custome focu

srdirect feedback
no pure API teams

fronten renovationdwithout 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 stackmake 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 fastor 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
vendorlibraries
betweensystems♻
with import maps
lib-1

A

lib-2

B

with module federation

central libraryrepository

Capplications can reference central libraries
to reduce their bundle size
https://github.com/systemjs/systemjs/blob/master/docs/import-maps.md

peer-to-peer approach

Alib-1BC
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

MANNINGand 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 ChandranMichael 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/

sdnetnorforcimhtiwtlibu