1 of 18

I DON’T UNDERSTAND

MICRO-FRONTENDS

@lucamezzalira

2 of 18

🧐

3 of 18

4 of 18

Luca Mezzalira

VP of Architecture at DAZN

Google Developer Expert

London JavaScript Community Manager

5 of 18

Software architecture is

those decisions which are both

important and hard to change

M. Fowler

6 of 18

What is a micro-frontend?

Landing page

Sign in

Sing up

Catalog

Help

Landing page

Sign in

Sign up

Catalog

Help

7 of 18

MICRO-FRONTENDS PRINCIPLES

8 of 18

Modelling around business domain

Culture of automation

Hide implementation details

Decentralisation

Deploy independently

Isolate failure

9 of 18

MICRO-FRONTENDS

DECISIONS FRAMEWORK

10 of 18

  1. Define
  2. Compose
  3. Route
  4. Communicate

Key micro-frontends decisions

11 of 18

Define a micro-frontends

header

footer

image

related

articles

article description

landing�page

sign in

sign up

catalog

12 of 18

Compose micro-frontends

ORIGIN

CDN

CLIENT

13 of 18

Route micro-frontends

ORIGIN

CDN

CLIENT

R

R

R

R

14 of 18

Micro-frontends communication

header

footer

image

related

articles

article description

header

footer

image

related

articles

article description

mysite.com/section?id=123

15 of 18

THERE IS NO

RIGHT OR WRONG

BUT ONLY

THE RIGHT APPROACH

BASED ON A CONTEXT

16 of 18

  • Sharing code and components
  • Design consistency
  • Technology agnostic
  • Dependency management
  • Organization impact

Other challenges

17 of 18

18 of 18

THANK

YOU

🤣🤣🤣

t: @lucamezzalira

w: lucamezzalira.com