SlideShare une entreprise Scribd logo
1  sur  42
Télécharger pour lire hors ligne
Building applications in a
Micro-frontends way
@MatthiasLaug
2
Lead Developer with
ThoughtWorks for 9
Years
pvenk
prasann
#java #ruby #javascript #clojure
prasann@thoughtworks.com
3
Lead Developer with
ThoughtWorks for 2
Years
MatthiasLaug
#java #ruby #javascript #clojure
mlaug@thoughtworks.com
AGENDA
Team and Tech-
stack
Introducing Micro-
frontends
Things to take care
in Micro-frontends
When to choose
Micro-frontends
TEAM AND TECH-STACK
Migrate a legacy application
for selling cars by 2020
5teams with 30developers
distributed over 2countries
AGENDA
Team and Tech-
stack
Introducing Micro-
frontends
Things to take care
in Micro-frontends
When to choose
Micro-frontends
INTRODUCING MICRO-FRONTENDS
Monoliths aren’t a
bad design choice
Monolith
web
application
INTRODUCING MICRO-FRONTENDS
Then came MicroservicesMonolith
web
application
● Strong module boundaries
● Independent deployment
● Technology diversity
But...
INTRODUCING MICRO-FRONTENDS
Microservices were like these
Monolith
web
application Independent deployments
!== Independent releases
Frontend Monolith
INTRODUCING MICRO-FRONTENDS
All of Microservices’
promises
+
Independent releases
Frontend Monolith
Monolith
web
application
Micro-frontends
AGENDA
Team and Tech-
stack
Introducing Micro-
frontends
Things to take care
in Micro-frontends
When to choose
Micro-frontends
THINGS TO LOOK OUT IN MICRO-FRONTENDS
● Composing multiple frontends
● Sharing data between multiple frontends.
● Consistent UX across multiple frontends
● Testing strategy
INTRODUCING SERVICES
Configure
Search
Order
Frame
A business-logic agonistic
orchestrator service that knows
how to download the rest of the
services’ frontend
1
4
Composing Multiple
Frontends
COMPOSING MULTIPLE FRONTENDS
Build time
Composition
Run-time
Composition
vs
BUILD TIME FRONTEND COMPOSITION
Search
Configure
Order
Package
Registry
Frame
deploys to
deploys to
deploys to
builds the
app
deploys
App
Server
BUILD TIME FRONTEND COMPOSITION
Good dependency
management resulting in
smaller bundles
Independent cross team
development
A monolith built by
different teams
Non atomic deployments
RUN TIME FRONTEND COMPOSITION
Frame
downloaded initially
Search
Configure
Order
downloaded later
dow
nloaded
later
downloadedlater
Integration happens in
browser
RUN TIME FRONTEND COMPOSITION - TOOLKIT
Client Side
● JSPM
● SystemJS
● FrintJS
● Single-Spa
Server Side
● SSI (Server side
includes)
● Tailor (from Zalando)
RUN TIME FRONTEND COMPOSITION
Independent teams with
independent deployments.
Atomic deployments, so no
versioning issues.
Too many network calls
from client, with increased
bundle size.
Sharing data
between multiple
frontends
SHARING DATA - COMPONENT INITIALIZATION
SHARING DATA - BROWSER STORE
State
Management
Tools
MobX
SHARING DATA - THROUGH DOM EVENTS
SHARING DATA - REDUX ACTIONS
● Reducers will receive all
actions within a store.
● Dynamically possible to
combine reducers after
store initialization.
Design consistency
2
7
Design
Issues
UX
Consistency
CSS
Ambiguity
CSS AMBIGUITY
CSS AMBIGUITY
UX CONSISTENCY
UX CONSISTENCY
Design
Guild
UX CONSISTENCY
Design Guild
# 0 0 7 8 b f
0 ,1 2 0 ,1 9 1
# 0 0 b c c d
0 ,1 8 8 ,2 0 5
# 7 d c e d 5
1 2 5 ,2 0 6 ,2 1 3
# 0 0 a a 5 b
0 ,1 7 0 ,9 1
# 8 5 b 8 8 0
1 3 3 ,1 8 4 ,1 2 8
# b d b d 3 2
1 8 9 ,1 8 9 ,5 0
# f f f 3 5 0
2 5 5 ,2 4 3 ,8 0
# f b e 0 c e
2 5 1 ,2 2 4 ,2 0 6
# f 2 b a 9 7
2 4 2 ,1 8 6 ,1 5 1
# a 1 7 8 6 1
1 6 1 ,1 2 0 ,9 7
# 8 0 8 1 8 4
1 2 8 ,1 2 9 ,1 3 2
# e e e e e e
2 3 8 ,2 3 8 ,2 3 8
# e e 5 b a 0
2 3 8 ,9 1 ,1 6 0
# 7 0 2 2 6 9
1 1 2 ,3 4 ,1 0 5
# b 5 1 b 5 8
1 8 1 ,2 7 ,8 8
# e d 3 1 2 f
2 3 ` 7 ,4 9 ,4 7
# f 5 8 a 3 3
2 4 5 ,1 3 8 ,5 1
# 5 f 3 c 2 5
9 5 ,6 0 ,3 7
Styleguide
Testing strategy
TESTING STRATEGY
3
4
Integration Tests
● Consumer driven
Contracts (CDC)
● Functional tests
TESTING STRATEGY - CDC
3
5
● Frame services is the consumer of
all services
● Frame issues a contract that runs
in all pipelines
TESTING STRATEGY - CDC
3
6
Sample of
Frame’s
contract
TESTING STRATEGY
3
7
Functional Tests
TESTING STRATEGY
3
8
Service level testing
Application Smoke
Test
AGENDA
Team and Tech-
stack
Introducing Micro-
frontends
Things to take care
in Micro-frontends
When to choose
Micro-frontends
WHEN MICRO-FRONTENDS
● Distributed self-contained teams, with a need for
independent releases.
● Collaborate with different frameworks in the frontend.
● Teams have experience building Microservices application,
and willing to take it to next step.
Sustain the pace!
Questions?
@MatthiasLaug

Contenu connexe

Similaire à Building application in a "Microfrontends" way - Matthias Lauf *XConf Manchester

Rajendra Kumar Sahu_243535(Maximo 7 5 Certified )
Rajendra Kumar Sahu_243535(Maximo 7 5 Certified )Rajendra Kumar Sahu_243535(Maximo 7 5 Certified )
Rajendra Kumar Sahu_243535(Maximo 7 5 Certified )
Rajendra Kumar Sahu
 
Usha_BuildandRelease_Resume
Usha_BuildandRelease_ResumeUsha_BuildandRelease_Resume
Usha_BuildandRelease_Resume
Usha Nagubandi
 

Similaire à Building application in a "Microfrontends" way - Matthias Lauf *XConf Manchester (20)

Micro Front-End & Microservices - Plansoft
Micro Front-End & Microservices - PlansoftMicro Front-End & Microservices - Plansoft
Micro Front-End & Microservices - Plansoft
 
Commit to the Cause, Push for Change: Contributing to Call for Code Open Sour...
Commit to the Cause, Push for Change: Contributing to Call for Code Open Sour...Commit to the Cause, Push for Change: Contributing to Call for Code Open Sour...
Commit to the Cause, Push for Change: Contributing to Call for Code Open Sour...
 
Rajendra Kumar Sahu_243535(Maximo 7 5 Certified )
Rajendra Kumar Sahu_243535(Maximo 7 5 Certified )Rajendra Kumar Sahu_243535(Maximo 7 5 Certified )
Rajendra Kumar Sahu_243535(Maximo 7 5 Certified )
 
Azure Industrial Iot Edge
Azure Industrial Iot EdgeAzure Industrial Iot Edge
Azure Industrial Iot Edge
 
Continuous (Non-)Functional Testing of Microservices on K8s
Continuous (Non-)Functional Testing of Microservices on K8sContinuous (Non-)Functional Testing of Microservices on K8s
Continuous (Non-)Functional Testing of Microservices on K8s
 
Getting Started with ThousandEyes Proof of Concepts
Getting Started with ThousandEyes Proof of ConceptsGetting Started with ThousandEyes Proof of Concepts
Getting Started with ThousandEyes Proof of Concepts
 
Getting Started With ThousandEyes Proof of Concepts: End User Digital Experience
Getting Started With ThousandEyes Proof of Concepts: End User Digital ExperienceGetting Started With ThousandEyes Proof of Concepts: End User Digital Experience
Getting Started With ThousandEyes Proof of Concepts: End User Digital Experience
 
[Tutorial] building machine learning models for predictive maintenance applic...
[Tutorial] building machine learning models for predictive maintenance applic...[Tutorial] building machine learning models for predictive maintenance applic...
[Tutorial] building machine learning models for predictive maintenance applic...
 
Oracle Code One San Francisco - Monolith to microservices
Oracle Code One San Francisco - Monolith to microservicesOracle Code One San Francisco - Monolith to microservices
Oracle Code One San Francisco - Monolith to microservices
 
Cimteq CableBuilder Go
Cimteq CableBuilder GoCimteq CableBuilder Go
Cimteq CableBuilder Go
 
Profreekey.pptx
Profreekey.pptxProfreekey.pptx
Profreekey.pptx
 
Getting Started with ThousandEyes Proof of Concepts
Getting Started with ThousandEyes Proof of ConceptsGetting Started with ThousandEyes Proof of Concepts
Getting Started with ThousandEyes Proof of Concepts
 
Oracle Code Javaday Sao Paulo Monolith_to Microservices
Oracle Code Javaday Sao Paulo Monolith_to MicroservicesOracle Code Javaday Sao Paulo Monolith_to Microservices
Oracle Code Javaday Sao Paulo Monolith_to Microservices
 
Jay Thakkar
Jay ThakkarJay Thakkar
Jay Thakkar
 
Building Microservices in the cloud at AutoScout24
Building Microservices in the cloud at AutoScout24Building Microservices in the cloud at AutoScout24
Building Microservices in the cloud at AutoScout24
 
DevOps: Find Solutions, Not More Defects
DevOps: Find Solutions, Not More DefectsDevOps: Find Solutions, Not More Defects
DevOps: Find Solutions, Not More Defects
 
Usha_BuildandRelease_Resume
Usha_BuildandRelease_ResumeUsha_BuildandRelease_Resume
Usha_BuildandRelease_Resume
 
Building Microservices in the cloud - GOTO Nights Berlin 2016
Building Microservices in the cloud - GOTO Nights Berlin 2016Building Microservices in the cloud - GOTO Nights Berlin 2016
Building Microservices in the cloud - GOTO Nights Berlin 2016
 
Best Practices - By Lofi Dewanto
Best Practices - By Lofi DewantoBest Practices - By Lofi Dewanto
Best Practices - By Lofi Dewanto
 
Building Microservices in the cloud - Software Architecture Summit 2016
Building Microservices in the cloud - Software Architecture Summit 2016Building Microservices in the cloud - Software Architecture Summit 2016
Building Microservices in the cloud - Software Architecture Summit 2016
 

Plus de Thoughtworks

Plus de Thoughtworks (20)

Design System as a Product
Design System as a ProductDesign System as a Product
Design System as a Product
 
Designers, Developers & Dogs
Designers, Developers & DogsDesigners, Developers & Dogs
Designers, Developers & Dogs
 
Cloud-first for fast innovation
Cloud-first for fast innovationCloud-first for fast innovation
Cloud-first for fast innovation
 
More impact with flexible teams
More impact with flexible teamsMore impact with flexible teams
More impact with flexible teams
 
Culture of Innovation
Culture of InnovationCulture of Innovation
Culture of Innovation
 
Dual-Track Agile
Dual-Track AgileDual-Track Agile
Dual-Track Agile
 
Developer Experience
Developer ExperienceDeveloper Experience
Developer Experience
 
When we design together
When we design togetherWhen we design together
When we design together
 
Hardware is hard(er)
Hardware is hard(er)Hardware is hard(er)
Hardware is hard(er)
 
Customer-centric innovation enabled by cloud
 Customer-centric innovation enabled by cloud Customer-centric innovation enabled by cloud
Customer-centric innovation enabled by cloud
 
Amazon's Culture of Innovation
Amazon's Culture of InnovationAmazon's Culture of Innovation
Amazon's Culture of Innovation
 
When in doubt, go live
When in doubt, go liveWhen in doubt, go live
When in doubt, go live
 
Don't cross the Rubicon
Don't cross the RubiconDon't cross the Rubicon
Don't cross the Rubicon
 
Error handling
Error handlingError handling
Error handling
 
Your test coverage is a lie!
Your test coverage is a lie!Your test coverage is a lie!
Your test coverage is a lie!
 
Docker container security
Docker container securityDocker container security
Docker container security
 
Redefining the unit
Redefining the unitRedefining the unit
Redefining the unit
 
Technology Radar Webinar UK - Vol. 22
Technology Radar Webinar UK - Vol. 22Technology Radar Webinar UK - Vol. 22
Technology Radar Webinar UK - Vol. 22
 
A Tribute to Turing
A Tribute to TuringA Tribute to Turing
A Tribute to Turing
 
Rsa maths worked out
Rsa maths worked outRsa maths worked out
Rsa maths worked out
 

Dernier

Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
 
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
chiefasafspells
 

Dernier (20)

OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
 
%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto
 
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
 
What Goes Wrong with Language Definitions and How to Improve the Situation
What Goes Wrong with Language Definitions and How to Improve the SituationWhat Goes Wrong with Language Definitions and How to Improve the Situation
What Goes Wrong with Language Definitions and How to Improve the Situation
 
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park %in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
 
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
 
VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
 
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
 

Building application in a "Microfrontends" way - Matthias Lauf *XConf Manchester