MICRO-FRONTENDS @lucamezzalira Luca Mezzalira VP of Architecture - - PowerPoint PPT Presentation

▶
micro frontends
SMART_READER_LITE
LIVE PREVIEW

MICRO-FRONTENDS @lucamezzalira Luca Mezzalira VP of Architecture - - PowerPoint PPT Presentation

Aug 14, 2022 180 likes •840 views

I DONT UNDERSTAND MICRO-FRONTENDS @lucamezzalira Luca Mezzalira VP of Architecture at DAZN Google Developer Expert London JavaScript Community Manager Architecture evolution DB Application Server Single-Page Application

slide-1
SLIDE 1

I DON’T UNDERSTAND

MICRO-FRONTENDS

@lucamezzalira

slide-2
SLIDE 2

🧑

slide-3
SLIDE 3
slide-4
SLIDE 4

Luca Mezzalira

VP of Architecture at DAZN Google Developer Expert London JavaScript Community Manager

slide-5
SLIDE 5

Architecture evolution

Application Server Single-Page Application DB

slide-6
SLIDE 6

Architecture evolution

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

slide-7
SLIDE 7

Architecture evolution

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

slide-8
SLIDE 8

Who is using micro-frontends

slide-9
SLIDE 9

MICRO-FRONTENDS

DEFINITION

slide-10
SLIDE 10

“

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-11
SLIDE 11

What is a micro-frontend?

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

slide-12
SLIDE 12

MICRO-FRONTENDS

PRINCIPLES

slide-13
SLIDE 13

Model around business domain Culture of automation Hide implementation details Decentralisation Deploy independently Isolate failure

slide-14
SLIDE 14

Model around business domain

Core Subdomain Supporting Subdomain Generic Subdomain

slide-15
SLIDE 15

Model around business domain

Landing page Sign in Sign up Catalog Schedule Search

Generic Generic Core

slide-16
SLIDE 16

Model around business domain

Landing page Sign in Sign up Catalog Schedule Search

Landing page MFE Auth MFE Discovery MFE

slide-17
SLIDE 17

Model around business domain

Amsterdam Generic Subdomain London Core Subdomain Leeds Supporting Subdomain Katowice Supporting Subdomain

slide-18
SLIDE 18

Decentralisation

Tech Leads Architecture Team Mars Team Venus Team Moon

slide-19
SLIDE 19

Decentralisation

  • 1. Autonomous teams
  • 2. Using the right tool for the right job
  • 3. Components library
  • 4. Standardization where needed
  • 5. Code duplication vs shared code
slide-20
SLIDE 20

Culture of automation

1 1 1 1 1 1 1 1 1

slide-21
SLIDE 21

Independent deployment

Catalog 2.0.0 Landing Page 1.1.0 My Account 2.4.1 Catalog 1.9.2

slide-22
SLIDE 22

Hide implementation details

Subscription Micro-Frontend PayPal Component

CONTRACT

slide-23
SLIDE 23

MICRO-FRONTENDS

DECISIONS FRAMEWORK

slide-24
SLIDE 24
  • 1. Define
  • 2. Compose
  • 3. Route
  • 4. Communicate

Key micro-frontends decisions

slide-25
SLIDE 25

Define a micro-frontends

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

slide-26
SLIDE 26

1. Up front investment 2. Teams structure 3. Great for SEO 4. Testing challenges 5. Scalability challenges 6. Dependency management

Horizontal VS Vertical split

1. Traditional development 2. Embracing JavaScript ecosystem 3. Dynamic Rendering for SEO

slide-27
SLIDE 27

Compose micro-frontends

ORIGIN CDN CLIENT

slide-28
SLIDE 28

Route micro-frontends

ORIGIN CDN CLIENT

R R R R

slide-29
SLIDE 29

Micro-frontends communication

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

slide-30
SLIDE 30

Isolate failure

header footer image related articles article description Catalog Error

slide-31
SLIDE 31

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

slide-32
SLIDE 32

MICRO-FRONTENDS @DAZN

slide-33
SLIDE 33
slide-34
SLIDE 34

Micro-Frontend @ DAZN

CSS HTML App.js Vendor.js

slide-35
SLIDE 35

DAZN implementation

BOOTSTRAP

  • 1. Application startup
  • 2. I/O operations
  • 3. Micro-Frontends lifecycle
  • 4. Communication between

Micro-Frontends

slide-36
SLIDE 36

DAZN implementation

  • 1. A Micro-Frontend represents a business domain
  • 2. A Micro-Frontend is autonomous
  • 3. One Micro-Frontend loaded per time
  • 4. No sharing between micro-frontends (*)
  • 5. Technology agnostic

(*) with some exceptions

slide-37
SLIDE 37

How bootstrap works

CSS HTML App.js Vendor.js

  • 1. Call Startup service
  • 2. Understand user status
  • 3. Load and Mount a

Micro-Frontend

slide-38
SLIDE 38
slide-39
SLIDE 39

DAZN routing

Cloudfront Lambda@Edge Bootstrap Micro-Frontend

slide-40
SLIDE 40

Components

  • 1. Development time

integration

  • 2. APIs first
  • 3. Own by a single team
slide-41
SLIDE 41

MICRO-FRONTENDS

BEST PRACTICES

slide-42
SLIDE 42

APIs first design principles

  • 1. APIs are the first user interface of your application
  • 2. APIs come first, then the implementation
  • 3. APIs are self-descriptive
slide-43
SLIDE 43

Design System and Governance

Button List Accordion Checkbox Fonts Colors Icons Contract Testing Visual Regression Performance Budget NPM Private Registry DESIGN TOKENS COMPONENTS LIBRARY AUTOMATION

slide-44
SLIDE 44

Duplication over abstraction

slide-45
SLIDE 45

Duplication over abstraction

Core Library Lib A Lib B Lib C Project Moon Project Saturn

slide-46
SLIDE 46

WRONG ABSTRACTION IS MORE EXPENSIVE THAN CODE DUPLICATION

slide-47
SLIDE 47

Dependencies Management

header footer image related articles article description Angular 9 React 16.1 React 15.1

slide-48
SLIDE 48

Performance

  • 1. What is true for SPA is also true for Micro-Frontends
  • 2. Pick the right approach to fulfill your needs
  • 3. A user may download less code than a SPA
slide-49
SLIDE 49

Business Evolution

Auth MFE Sign in MFE Subscribe MFE

slide-50
SLIDE 50

SEO

Server Side Rendering Dynamic Rendering

slide-51
SLIDE 51

MICRO-FRONTENDS

AUTOMATION

slide-52
SLIDE 52

Version of Control

Monorepo Polyrepo

  • Improve code quality
  • Always working with the

latest libraries versions

  • Continuous scaling

investment

  • Faster onboarding
  • Trunk based development
  • Embrace conventional

development methods

  • Focus on part of the code
  • Multiple branching

strategies available

  • Freedom to define CI/CD
slide-53
SLIDE 53

Continuous Integration

  • 1. Investment upfront
  • 2. Fast feedback
  • 3. Parallel and Sequential tasks execution
  • 4. Fitness functions for testing architectural concerns
slide-54
SLIDE 54

Building Evolutionary Architectures - O’Reilly

Fitness Function is a function that provides an objective integrity assessment of some architectural characteristics

slide-55
SLIDE 55

Continuous Integration

Static Analysis Run tests Analyse Permutations Build and Optimize Artifacts saved Clone Git repo Module swapping Bundle size check

slide-56
SLIDE 56

Micro-Frontends Deployment

Catalog Sign In Help

slide-57
SLIDE 57

Components Deployment

header footer image related articles article description Button List Accordion Checkbox

slide-58
SLIDE 58

Strangler Pattern and Canary Releases

Cloudfront Lambda@edge Single Page App Catalog MFE Auth MFE Help MFE

Lambda@Edge in DAZN: bit.ly/2SZ0Y24

slide-59
SLIDE 59

LET’S

WRAP UP

slide-60
SLIDE 60

Micro-frontends summary

Orchestrate Compose Communicate Observability Teams impact Automation Design System Dependencies Management Performance Duplication over Abstraction
slide-61
SLIDE 61
slide-62
SLIDE 62

Useful links

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

slide-63
SLIDE 63

30 days FREE ACCESS

bit.ly/32glJJF

buildingmicrofrontends.com

slide-64
SLIDE 64

THANK YOU

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

🤤🤤 🤤