MICRO-FRONTENDS Luca Mezzalira Architecture evolution DB - - PowerPoint PPT Presentation

Scaling Your Project with

MICRO-FRONTENDS

Luca Mezzalira

Architecture evolution

Application Server Single-Page Application DB

Architecture evolution

API Gateway Single-Page Application DB Microservice DB Microservice DB Microservice

Architecture evolution

API Gateway Single-Page Application DB Microservice DB Microservice DB Microservice MFE MFE MFE MFE

MICRO-FRONTENDS

DEFINITION

“

Micro-frontends are the technical representation of a business subdomain, they allow independent implementations with the same or different technology choices. Finally they should avoid sharing logic with

• ther subdomains and they are own by a

single team

”

What is a micro-frontend?

Landing page Sign in Sing up Catalog Help Landing page Sign in Sign up Catalog Help

MICRO-FRONTENDS

PRINCIPLES

MICRO-FRONTENDS

DECISIONS FRAMEWORK

Key micro-frontends decisions

Define a micro-frontends

header footer image related articles article description landing page sign in sign up catalog

Horizontal VS Vertical split

Compose micro-frontends

ORIGIN CDN CLIENT

Route micro-frontends

ORIGIN CDN CLIENT

R R R R

Micro-frontends communication

header footer image related articles article description header footer image related articles article description mysite.com/section?id=123

THERE IS NO RIGHT OR WRONG BUT ONLY THE RIGHT APPROACH BASED ON THE CONTEXT

MICRO-FRONTENDS @DAZN

Micro-Frontend @ DAZN

DAZN implementation

DAZN implementation

How bootstrap works

DAZN routing

Components

What we have learnt...

Useful links

bit.ly/386DNbx Resources bit.ly/2v79e70 Webinar

buildingmicrofrontends.com

THANK YOU

@lucamezzalira lucamezzalira.com e: mezzalab@gmail.com

🤤🤤 🤤