Micro-frontends anti-patterns微前端的反模式开发
如果无法正常显示,请先停止浏览器的去广告插件。
1. UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER
Micro-Frontends anti-patterns
distributed architecture for the user interfaces
Luca Mezzalira
Principal Serverless Specialist Solutions Architect
亚马逊云科技
© yyyy, Amazon Web
© yyyy,
Services,
Amazon
Inc. or
Web
its Services,
affiliates. Inc.
All or
rights
its affiliates.
reserved. All rights reserved.
2. “
There is no compression
algorithm for
experience
Andy Jassy – CEO of Amazon
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
”
3. UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER
Luca Mezzalira
Principal Serverless Specialist at AWS
International Speaker
Author
© yyyy, Amazon
Web
Services,
Inc.
or its affiliates.
rights reserved.
© yyyy,
Amazon
Web
Services,
Inc. or its All
affiliates.
All rights reserved.
3
4. Mic ro -Fro nte nds are th e te c hnic al re pre s e ntatio n o f a
bus ine s s s ubdo main, th ey allo w inde pe nde nt
imple me ntatio ns w ith th e s ame o r diffe re nt te c hno lo gy.
Finally , th ey sh o uld minimize the c o de s hare d w ith o th er
subdo m ains and th ey are o wn by a s ingle te am
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
5. Mic ro -Fro nte nds are th e te c hnic al re pre s e ntatio n o f a
bus ine s s s ubdo main, th ey allo w inde pe nde nt
imple me ntatio ns w ith th e s ame o r diffe re nt te c hno lo gy.
Finally , th ey sh o uld minimize the c o de s hare d w ith o th er
subdo m ains and th ey are o wn by a s ingle te am
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
6. Mic ro -Fro nte nds are th e te c hnic al re pre s e ntatio n o f a
bus ine s s s ubdo main, th ey allo w inde pe nde nt
imple me ntatio ns w ith th e s ame o r diffe re nt te c hno lo gy.
Finally , th ey sh o uld minimize the c o de s hare d w ith o th er
subdo m ains and th ey are o wn by a s ingle te am
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
7. Mic ro -Fro nte nds are th e te c hnic al re pre s e ntatio n o f a
bus ine s s s ubdo main, th ey allo w inde pe nde nt
imple me ntatio ns w ith th e s ame o r diffe re nt te c hno lo gy.
Finally , th ey sh o uld minimize the c o de s hare d w ith o th er
subdo m ains and th ey are o wn by a s ingle te am
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
8. Mic ro -Fro nte nds are th e te c hnic al re pre s e ntatio n o f a
bus ine s s s ubdo main, th ey allo w inde pe nde nt
imple me ntatio ns w ith th e s ame o r diffe re nt te c hno lo gy.
Finally , th ey sh o uld minimize the c o de s hare d w ith o th er
subdo m ains and th ey are o wn by a s ingle te am
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
9. Mic ro -Fro nte nds are th e te c hnic al re pre s e ntatio n o f a
bus ine s s s ubdo main, th ey allo w inde pe nde nt
imple me ntatio ns w ith th e s ame o r diffe re nt te c hno lo gy.
Finally , th ey sh o uld minimize the c o de s hare d w ith o th er
subdo m ains and th ey are o wn by a s ingle te am
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
10. Micro-Frontends benefits
In c re m e n ta
p g ra d e
Te a m c o g n i t i v e l o a
e d u c tio
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
e c e n tr a liz a tio
Sc a l e t h e t e c h n o l o g
s w e ll th e o r g a n iz a tio
11. “
Yin and Yang
(Micro-Frontends and Components)
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
”
12. A component
Change border color
Different rollover animation
What a LABEL
Disabled by default
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Auto size dimension
13. A micro-frontend
Independent
Defines input and output
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Domain aware
Not eStensible
14. Too many… components?
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
15. Are you designing a micro-frontend
or a component?
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
16. “
Hydra of Lerna
(Multi frameworks approach)
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
”
17. Frameworks, frameworks everywhere!
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
18. How many
UI libraries or frameworks
would you use in a SPA?
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
19. Multi-framework approach
e a lin g w it
le g a c y s y s te m
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
fte r a c q u ir in
e w c o m p a n ie
ig r a tio n to a n e
I fr a m e w o r k /lib r a r
20. Use multi-frameworks when appropriate,
don’t optimize your architecture for them
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
21. “
The swiss army knife
(Write programs that do one thing and do it well)
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
”
22. The greenfield project…
MFE B
MFE A
MFE C
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
23. The legacy editor
• A n ticor r uption l ay e
Legacy Editor
• A r chite ctur e d e cis ion s al ign m e n t
• R e ad y for the futur
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
24. Spare the application shell codebase,
use an anti-corruption layer
for the legacy system
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
25. “
A return ticket, please
(Unidirectional data flow at the rescue)
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
”
26. Sharing
HOST
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
REMOTE
27. Unidirectional data flow at the rescue
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
28. Unidirectional data flow learnings
Ea s y t o d e b u
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
e s s p ro n e to e rro r
29. Avoid bi-directional sharing
unless strictly needed
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
30. “
Relax, it’s just code
(Avoid organizational coupling)
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
”
31. Design-time coupling
Global state
MFE A
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
MFE B
MFE C
MFE D
32. Loosely coupled entities
Event Emitter
MFE A
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
MFE B
MFE C
MFE D
33. Embrace loosely coupled
but highly aligned MFEs
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
34. “
Let’s hammer the APIs
(Multiple MFEs calling the same endpoint)
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
”
35. Multiple MFEs in the same view
API 1
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
API 1
36. Your distributed system
Another
API
API 1
Auth
Service
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
API Gateway
Another
API
37. Possible solutions
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
38. Possible solutions
Component A
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Component B
39. Understand the end-to-end impact
of your decisions
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
40. “
Bye bye big-bang
(Iterative deployment)
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
”
41. Migration strategies
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
42. Migration strategies
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
43. Migration strategies
/*
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
/catalog
44. Migration strategies
/home
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
/catalog
/account
45. https://bit.ly/3G0SnNR
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
46. https://www.youtube.com/watch?v=Vm9jlRSlKVQ
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
47. Iteratively deploy micro-frontends helps
increasing the developers confidence
as well as adding value for users
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
48. Architecture is always a trade-
off, just find a balanced
approach for your context
© yyyy, Amazon Web Services, Inc. or its affiliates. All rights reserved.
49. UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER
谢谢
Luca Mezzalira
lmezza@amazon.com
© yyyy, Amazon
Web
Services,
Inc.
or its affiliates.
rights reserved.
© yyyy,
Amazon
Web
Services,
Inc. or its All
affiliates.
All rights reserved.