Post on 02-Jan-2021
transcript
I DON’T UNDERSTANDMICRO-FRONTENDS@lucamezzalira
🧐
Luca MezzaliraVP of Architecture at DAZN
Google Developer Expert
London JavaScript Community Manager
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
Who is using micro-frontends
MICRO-FRONTENDS DEFINITION
“ Micro-frontends are the technicalrepresentation of a business subdomain,they allow independent implementationswith the same or different technology choices.Finally they should avoid sharing logic with other subdomains and they are own by a single team ”
What is a micro-frontend?
Landing pageSign inSing upCatalog
Help
Landing page
Sign in
Sign up
Catalog
Help
MICRO-FRONTENDS PRINCIPLES
Model around business domain
Culture of automation
Hide implementation details
Decentralisation
Deploy independently
Isolate failure
Model around business domain
Core Subdomain Supporting Subdomain Generic Subdomain
Model around business domainLanding page
Sign in
Sign up
Catalog
Schedule
Search
Generic
Generic
Core
Model around business domainLanding page
Sign in
Sign up
Catalog
Schedule
Search
Landing page MFE
Auth MFE
Discovery MFE
Model around business domain
AmsterdamGeneric Subdomain
LondonCore Subdomain
LeedsSupporting Subdomain
KatowiceSupporting Subdomain
Decentralisation
Tech LeadsArchitecture
Team Mars
Team Venus
Team Moon
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
Culture of automation
1 1 1 1 1 1
1
1
1
Independent deployment
Catalog 2.0.0
Landing Page 1.1.0
My Account 2.4.1
Catalog 1.9.2
Hide implementation details
SubscriptionMicro-Frontend
PayPal Component
CONTRACT
MICRO-FRONTENDSDECISIONS FRAMEWORK
1. Define
2. Compose
3. Route
4. Communicate
Key micro-frontends decisions
Define a micro-frontends
header
footer
image
relatedarticlesarticle
description
landingpage
sign insign up
catalog
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
Compose micro-frontends
ORIGIN
CDN
CLIENT
Route micro-frontends
ORIGIN
CDN
CLIENT
RR
R
R
Micro-frontends communication
header
footer
image
relatedarticlesarticle
description
header
footer
image
relatedarticlesarticle
description
mysite.com/section?id=123
Isolate failure
header
footer
image
relatedarticles
article description
CatalogError
THERE IS NORIGHT OR WRONGBUT ONLYTHE RIGHT APPROACHBASED ON THE CONTEXT
MICRO-FRONTENDS @DAZN
Micro-Frontend @ DAZN
CSS
HTML App.js
Vendor.js
DAZN implementation
BOOTSTRAP
1. Application startup
2. I/O operations
3. Micro-Frontends lifecycle
4. Communication between
Micro-Frontends
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
How bootstrap works
CSS
HTML
App.js
Vendor.js
1. Call Startup service
2. Understand user status
3. Load and Mount a
Micro-Frontend
DAZN routing
Cloudfront Lambda@Edge Bootstrap Micro-Frontend
Components
1. Development time
integration
2. APIs first
3. Own by a single team
MICRO-FRONTENDSBEST PRACTICES
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
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
Duplication over abstraction
Duplication over abstraction
Core Library
Lib A
Lib B
Lib C
Project Moon
Project Saturn
WRONG ABSTRACTION IS MORE EXPENSIVE THAN CODE DUPLICATION
Dependencies Management
header
footer
image
relatedarticlesarticle
descriptionAngular 9
React 16.1
React 15.1
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
Business Evolution
Auth MFE
Sign in MFE Subscribe MFE
SEO
Server Side Rendering Dynamic Rendering
MICRO-FRONTENDSAUTOMATION
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
Continuous Integration
1. Investment upfront
2. Fast feedback
3. Parallel and Sequential tasks execution
4. Fitness functions for testing architectural concerns
Building Evolutionary Architectures - O’Reilly
Fitness Function is a function that provides an objective integrity assessment of some architectural characteristics
Continuous Integration
Static AnalysisRun tests
Analyse Permutations
Build and Optimize
Artifacts saved
Clone Git repo
Module swapping
Bundlesize check
Micro-Frontends Deployment
Catalog
Sign In
Help
Components Deployment
header
footer
image
relatedarticlesarticle
description
Button
List
Accordion
Checkbox
Strangler Patternand Canary Releases
Cloudfront Lambda@edge
Single Page App
Catalog MFE
Auth MFE
Help MFE
Lambda@Edge in DAZN: bit.ly/2SZ0Y24
LET’SWRAP UP
Micro-frontends summary
Orchestrate
Compose
Communicate
Observability
Teams impact
AutomationDesign System
DependenciesManagement
PerformanceDuplication over Abstraction
Useful links
bit.ly/386DNbx
Resources
bit.ly/2v79e70
Webinar
30 daysFREE ACCESS
bit.ly/32glJJF
buildingmicrofrontends.com
THANK YOU
t: @lucamezzaliraw: lucamezzalira.come: mezzalab@gmail.com🤣🤣
🤣