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

micro frontends luca mezzalira architecture evolution
SMART_READER_LITE
LIVE PREVIEW

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

Scaling Your Project with MICRO-FRONTENDS Luca Mezzalira Architecture evolution DB Application Server Single-Page Application Architecture evolution DB DB DB Microservice Microservice Microservice API Gateway Single-Page Application


slide-1
SLIDE 1

Scaling Your Project with

MICRO-FRONTENDS

slide-2
SLIDE 2

Luca Mezzalira

slide-3
SLIDE 3

Architecture evolution

Application Server Single-Page Application DB

slide-4
SLIDE 4

Architecture evolution

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

slide-5
SLIDE 5

Architecture evolution

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

slide-6
SLIDE 6

MICRO-FRONTENDS

DEFINITION

slide-7
SLIDE 7

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

slide-8
SLIDE 8

What is a micro-frontend?

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

slide-9
SLIDE 9

MICRO-FRONTENDS

PRINCIPLES

slide-10
SLIDE 10
slide-11
SLIDE 11

MICRO-FRONTENDS

DECISIONS FRAMEWORK

slide-12
SLIDE 12

Key micro-frontends decisions

slide-13
SLIDE 13

Define a micro-frontends

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

slide-14
SLIDE 14

Horizontal VS Vertical split

slide-15
SLIDE 15

Compose micro-frontends

ORIGIN CDN CLIENT

slide-16
SLIDE 16

Route micro-frontends

ORIGIN CDN CLIENT

R R R R

slide-17
SLIDE 17

Micro-frontends communication

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

slide-18
SLIDE 18

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

slide-19
SLIDE 19

MICRO-FRONTENDS @DAZN

slide-20
SLIDE 20
slide-21
SLIDE 21

Micro-Frontend @ DAZN

slide-22
SLIDE 22

DAZN implementation

slide-23
SLIDE 23

DAZN implementation

slide-24
SLIDE 24

How bootstrap works

slide-25
SLIDE 25
slide-26
SLIDE 26

DAZN routing

slide-27
SLIDE 27

Components

slide-28
SLIDE 28

What we have learnt...

slide-29
SLIDE 29
slide-30
SLIDE 30

Useful links

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

slide-31
SLIDE 31

buildingmicrofrontends.com

slide-32
SLIDE 32

THANK YOU

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

🤤🤤 🤤