Micro Frontends the nitty gritty details
ORfrontend, backend, ! happyend

Michael Geers
Frontend Engineer

naltatison Twitter & GitHub

micro-frontends.org
e-commerce

Bremen, Germany

Frontend
Monolith

Black DiamondRoyal Library, Copenhagenfaster featuredevelopment

Micro Frontends
1. what?
2. why?
3. how?
4. nitty gritty details "but before …

Where do we come from?

Frontend
Backend

The Monolithera of the
full-stack developer

Frontend
BackendFrontend

Backendbye byefull stack #Frontend
Backendspecialists
TeamInspire

API Gateway (Rest, BFF, GraphQL)TeamSearch
ProductService

TeaserServiceTeam
DecideAvailability
ServicePriceServiceTeam
Checkout
BasketService

Payment
ServiceCustomer
Service

Microservice Architecture

Frontend

growing complexity
no scaling

Frontend

Frontend Monoliths
Frontend

Frontend

Frontend

Backend

API Gateway (Rest, BFF, GraphQL)

ProductService

TeaserService

The Monolith

Front- & Backend

Availability
Service

Price
Service

BasketService

Payment
Service

Microservices

Customer
ServiceBackend

Frontend

Micro Frontends

TeamInspireTeam
SearchTeam
DecideTeam
Checkout

1.

What are Micro Frontends?

Micro Frontends Definition… Our preferred (and proven) approach is to split thebrowser-based code into micro frontends. In this approach,
the web application is broken down into its features, andeach feature is owned, frontend to backend, by a different
team. This ensures that every feature is developed, tested
and deployed independently from other features. …
ThoughtWorks Technology Radar

https://www.thoughtworks.com/de/radar/techniques/micro-frontends

Stages: Access (2016) > Trial (2017) > Adopt ⭐ (2019)

Autonomyown
tech stack
TeamInspire

TeamDecideself Team
contained
Checkout
independent
deployments

Team Missions„Make discovering andfinding products easy.“TeamInspire„Support the customer’sbuying decision.“

TeamDecide„Make the actual buying
process happen.“

TeamCheckout

technicalorganizational&Implications

2.

Why Micro Frontends?

specialists teamcross functional teamSpecialist Teams

Cross Functional Teams

Frontend

Content
Service

Attributes
ServicePayment
Service
Team
InspireBusiness

Team
DecideTeam
Checkout

Operations
Platformgrouped around a skill or technology

grouped around a use case or customer needSpecialist Teams

Cross Functional Teams

Frontend

Content
Service

Attributes
ServicePayment
ServiceTeam
InspireBusinessTeamDecide

Team
CheckoutOperations
Platformgrouped around a skill or technology
grouped around a use case or customer need⏳ inter-teamdeveloping a new featurecommunication

& Development Speed

Customer Focus
direct feedback loop
no pure api teams

Reduced Scope

everything fits
into memory again ❤
myFrontend Renovation

without throwing everything away

frontend tools change fasthyperapp?

Polymer®

20052010

2015

Frontend

be able to switch frameworks …
React

Vue.jsReact

React → Elm
Framework
SwitchMongoDBMySQL

S3Marco Architecture

Phoenix
ElixirAWS Lambda

PostgreSQL

Scala Play

Spring BootJava

Scala Play

Ruby onRails

Scala Play

Database

Backend

GraphQL

CassandraMicro Architecture

… or upgrade at your own pace.
Page

1.3

1.4

Database

BackendFrontend

1.4

Fragment

Wonder.js

Wonder.js

Wonder.js

Wonder.js

v1.3

v1.3

v1.3

v1.3 → v1.4

Spring BootJava

Spring BootJava

Spring BootJava

Spring BootJava

PostgreSQL

PostgreSQL

PostgreSQL

PostgreSQL

VersionUpgrade

Who works like this?

What’s our experience?

New e-commerce platforms
116 department storesin Germany & Belgium

2014

5 teams
6-8 people/teampremium material goods
print catalogs & 9 stores2016

2 teams
5-7 people/teampremium fashion
11 department stores2016

5 teams
6-10 people/teamProject: Next Level Commerce
green field project
fashion for best ager
15 brands in up to 12 countries~ 65 online stores2018

5 teams
7-10 people/teamfrom 3 dev-companies

after 2 monthgo-live with a
newly created brandtaschenherz.com
6 month later
first migration of areal brandmona.de3.

How to implement?

A Page is Owned by one Team
Customer Journey
1

1

1

2

2
33 $
66 $

$$

66 $%%

99 $homelist

TeamInspire

detailTeamDecidebuybasket

TeamCheckoutpaymentconfirm

Including Fragments from other Teams
TeamDecide

TeamInspire

PageFragment

Team CheckoutFragment

Server Side
Integration

via Links
Customer Journey1112233 $66 $$$66 $%%

99 $homelist

TeamInspire

detailTeam
Decidebuybasket

Team
Checkout

payment

confirm

Team Decideowns the page

Team Inspire
provides a fragment

Team Checkout

provides two fragments

via iframes
Advantages- strong isolation- work everywhere

Disadvantages- bad for SEO- load performance- layout constrains- poor accessibility?
YLRO

via iframes

Spotify web player (until early 2019) & desktop app
https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/

SSI Server Side Includes*<!--#include virtual="/some-url" -->*or ESI Edge Side Includes - they have similar taste

The easiest way to import external content
into a Web page is to use a server-sideinclude.
2001

Google Books

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

nginx

ServerTeam Checkout

Server Side Includes/red-tractor<html><em>0 items</em><h1>Tractor</h1><button>buy for 66 €</button></html>Client Side Integration

Team DecideInteractivity

owns the page

Team Inspire
provides a fragment

Team Checkout

provides two fragments

Each Fragment as a Mini Application
TeamDecide

TeamInspire

Page

Fragment

Team Checkout

Fragment

Web Components
CustomElements

Shadow
DOMHTMLTemplateCustom Elements<checkout-basket></checkout-basket>

https://developers.google.com/web/fundamentals/getting-started/primers/customelements

Custom Elements
class CheckoutBasket extends HTMLElement {connectedCallback() {this.innerHTML = 'mini basket ...';
}
}

())
Choo

customElements.define('checkout-basket', CheckoutBasket);Element Lifecycle
class CheckoutBasket extends HTMLElement {constructor() {...}

is createdconnectedCallback() {...}

attached to DOM

attributeChangedCallback(attr, oldVal, newVal) {...}
disconnectedCallback() {...}}

removed from DOM, cleanup!

someone changed an attributeBrowser Support
inCustom Elements v1
API stabilized end of 2016

tnempolev
edBrowser Support
11withPolyfill (6KB)

https://github.com/webcomponents/custom-elements

<checkout-basket></checkout-basket><inspire-reco sku="t_red"></inspire-reco><checkout-buy sku="t_red"></checkout-buy>

<checkout-basket></checkout-basket>

neer
g
t_
<inspire-reco sku="t_red"></inspire-reco>

neer
g_t
<checkout-buy sku="t_red"></checkout-buy>theDOM is the API

Teams publish their Custom Elements documentation
Element-Name, Attributes, Events

Page Transitions

Only Inside a Teamone router per teamTeam B

Team ASoft
Navigation/list

ClientRendered/product

HardNavigation
Links

Soft
Navigation/cart

ClientRendered/successApp Shell

Across Teams
meta router & router per teamincreased complexity!
shared runtime code
harder debugging

Team B

Team ASoft
Navigation
ClientRenderedSoft
Navigation/list

ClientRendered/productSoft
Navigation/cart

ClientRendered/successShort Integration Recap
Pages

Fragments

ServerLinks

SSI/ESI

ClientApp-Shell
Meta-RouterWebComponents

other Libraries & Meta Frameworks
Podiumhttps://github.com/CanopyTax/single-spa

https://github.com/opencomponents/oc

https://podium-lib.io

https://github.com/onerzafer/microfe-client

meta-spa-router
https://github.com/zalando/tailor

https://github.com/manfredsteyer/meta-router4.

nitty gritty details"*coherent
ux & design

Have a Design System
Design System / Pattern LibraryContents
Design Tokens (fonts, colors, …)Usable Components (buttons, …)

Aspects
DesignUsers Experience
Performance
Accessibility
Dev Experience
Tools: UIengine, Storybook, …

Distributed as Versioned Package
v1.3

SharedDesign System
v1.1
v1.2
v1.3
v2-beta...

v1.1

v2-beta
TeamInspire

v1.3
Team
Checkout

v1.1
TeamDecide

v1.3

v2-beta

+ web performancePerformance First
measure regularly
pick your metrics
Tools
Lighthouse
Sitespeed.io
WebpageTest
Speedcurve…

Metrics
Lighthouse Scores
Time to Interactive
Visually Complete
Page Weight…

integrate perf into you culture
Break the build!

set a budget
and enforce it

Discuss alternatives withteam and product owner
Attribution is not always easy
due to fragments & 3rd party.
Page-owner is in the lead!

make responsible tech choices
large framework runtime
hyperappsmall runtimes

,quality & testingtesting in isolation
dummy
fragment

product page works
without fragments
Team Decide owns & tests

major
ity ofthe tests

testing in isolation
dummy
fragment
header & footer are
standalone fragments
Team Search owns & tests

product page works
without fragments
Team Decide owns & tests

major
ity ofthe tests

testing accross boundaries… increments this.

cross team tests exist
but are the exception

Clicking here …

In somecases--knowledge
sharingregular rituals

mostly weekly

people from all teamstalk on a specific topic

guildesarch
frontend
tracking
security
kubernetes…

1.

0/ vertical depthHow Deep Should a Vertical Team be?
frontend only
scaling development ✔
easier rebuilds ✔

1Backend.
Operations
0 Data Science
Business &/ Stakeholder
Frontend

full-stack team
faster development ✔
less coordination ✔

and thesefull autonomy
fast trial of ideas ✔
adapt quickly ✔

and theseWant to learn more?
Extensive Link Collection
by Elisabeth Engel @_lizzelo_Microservice Websites
by Gustav Nilsson Kotte @gustaf_nk

Micro Frontends at DAZNby Luca Mezzalira @lucamezzaliramicro-frontends.org 2
by Me @naltatis

Self-Contained Systems
by INNOQ

Talk: Frontend Monolithby Stefan Tilkov @stilkov

I’m writing a book
Michael Geers

MEAP - Manning Early Access Program
this summer
follow @naltatis or @manningbooks for updates

MANNING

Frontend

lets’ blur this line!
BackendFrontend

let’s blur this line!
BackendThanks for listening!

! happyend

Michael Geers@naltatis

Credits

Burano Pixaline

The Tool Guy Tirachard Kumtanom

Black Diamond (me)Woodshop Igor Ovsyannykov

https://pixabay.com/images/id-2522251/

Holiday Snap 2: Tron Apionid
https://flic.kr/p/r23SxR

Drummers skeeze

https://pixabay.com/images/id-642540/

Tocotronic Stefan Müller
https://flic.kr/p/JCTQXd

People Icons freepik

https://www.flaticon.com/family/special/lineal-color

https://unsplash.com/photos/UuW4psOb388

https://unsplash.com/photos/iXV0i4Wo4yc

HP C7000 BladeSystem pchow98
https://flic.kr/p/7AVF23

Close up Susanne Nilsson
https://flic.kr/p/nppBcEUnicorn d97jro

https://pixabay.com/images/id-671593/

Browser Logos Cătălin Mariș
https://github.com/alrra/browser-logos

Action Bicycling Roman Pohorecki

https://www.pexels.com/photo/action-bicycling-bikebiking-287398/

Lego Benny Cheezburger

Wooden Counter David Siglin

Tractors Manufactum

https://www.pexels.com/photo/blur-blurry-bokeh-closeup-347139/

http://gph.is/1BCRCKh

https://www.manufactum.com/tin-toys-c193667/

sdnetnorForcibuilt with M