《Microfrontendsantipatterns微前端的反模式开发_LucaMezzalira.pdf》由会员分享,可在线阅读,更多相关《Microfrontendsantipatterns微前端的反模式开发_LucaMezzalira.pdf(49页珍藏版)》请在三个皮匠报告上搜索。
1、UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Micro-Frontends anti-patternsMicro-Frontends anti-patternsdistributed architecture for the user interfacesLuca Mezzali
2、raPrincipal Serverless Specialist Solutions Architect亚马逊云科技 yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.There is no compression algorithm for experience“”Andy Jassy CEO of AmazonAndy Jassy CEO of AmazonUPDATE THIS PRESENTATION HEADER IN SLIDE MASTER yyyy,Amazon Web Services,In
3、c.or its affiliates.All rights reserved.yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.3Luca Luca MezzaliraMezzaliraPrincipal Serverless Specialist at AWSInternational SpeakerAuthor yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Micro-Frontendsar e th e techni
4、cal representation of a business subdomain,th ey al l o w independent implementations w i th th e same or different technology.Fi nal l y,th ey sh o ul d minimize the code shared w i th o th er subdo mai ns and th ey ar e own by a single team yyyy,Amazon Web Services,Inc.or its affiliates.All rights
5、 reserved.Micro-Frontends ar e th e technical representation of a business subdomain,th ey al l o w independent implementations w i th th e same or different technology.Fi nal l y,th ey sh o ul d minimize the code shared w i th o th er subdo mai ns and th ey ar e own by a single team yyyy,Amazon Web
6、 Services,Inc.or its affiliates.All rights reserved.Micro-Frontends ar e th e technical representation of a business subdomain,th ey al l o w independent implementations w i th th e same or different technology.Fi nal l y,th ey sh o ul d minimize the code shared w i th o th er subdo mai ns and th ey
7、 ar e own by a single team yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Micro-Frontends ar e th e technical representation of a business subdomain,th ey al l o w independent implementations w i th th e same or different technology.Fi nal l y,th ey sh o ul d minimize the code sh
8、ared w i th o th er subdo mai ns and th ey ar e own by a single team yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Micro-Frontends ar e th e technical representation of a business subdomain,th ey al l o w independent implementations w i th th e same or different technology.Fi na
9、l l y,th ey sh o ul d minimize the code shared w i th o th er subdo mai ns and th ey ar e own by a single team yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Micro-Frontends ar e th e technical representation of a business subdomain,th ey al l o w independent implementations w i
10、th th e same or different technology.Fi nal l y,th ey sh o ul d minimize the code shared w i th o th er subdo mai ns and th ey ar e own by a single team yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Micro-Frontends benefitsMicro-Frontends benefits332244I n c r e m e n t a lu p g
11、 r a d e sTe a m c o g n it iv e lo a dr e d u c t io nD e c e n t r a liz a t io nSc a le t h e t e c h n o lo g ya s w e ll t h e o r g a n iz a t io n yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Yin and Yang“”(Micro-Frontends and Components)(Micro-Frontends and Components)y
12、yyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.A componentA componentWhat a LABELChange border colorAuto size dimensionDifferent rollover animationDisabled by default yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.A micro-frontendA micro-frontendIndependentNot
13、eStensibleDomain awareDefines input and output yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Too manyToo many components?components?yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Are you designing a micro-frontendAre you designing a micro-frontendor a compone
14、nt?or a component?yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Hydra of Lerna“”(Multi frameworks approach)(Multi frameworks approach)yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Frameworks,frameworks everywhere!Frameworks,frameworks everywhere!yyyy,Amazon
15、Web Services,Inc.or its affiliates.All rights reserved.How manyUI libraries or frameworkswould you use in a SPA?yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Multi-framework approachMulti-framework approach113322D e a lin g w it hle g a c y s y s t e m sA f t e r a c q u ir in g
16、n e w c o m p a n ie sM ig r a t io n t o a n e w U I f r a m e w o r k/lib r a r y yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Use multi-frameworks when appropriate,Use multi-frameworks when appropriate,dondon t optimize your architecture for themt optimize your architecture
17、for them yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.The swiss army knife“”(Write programs that do one thing and do it well)(Write programs that do one thing and do it well)yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.The greenfield projectThe greenfield
18、projectMFE AMFE BMFE C yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.The legacy editorThe legacy editorLegacy EditorAn t i cor r upt i on l aye rAr chi t e ct ur e d e ci s i on s al i gn m e n tRe ad y f or t he f ut ur e yyyy,Amazon Web Services,Inc.or its affiliates.All right
19、s reserved.Spare the application shell codebase,Spare the application shell codebase,use an anti-corruption layeruse an anti-corruption layerfor the legacy systemfor the legacy system yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.A return ticket,please“”(Unidirectional data flow
20、 at the rescue)(Unidirectional data flow at the rescue)yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.SharingSharingREMOTEHOST yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Unidirectional data flow at the rescueUnidirectional data flow at the rescue yyyy,Amaz
21、on Web Services,Inc.or its affiliates.All rights reserved.Unidirectional data flow learningsUnidirectional data flow learnings1122Ea s y t o d e b u gL e s s p r o n e t o e r r o r s yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Avoid bi-directional sharingAvoid bi-directional
22、sharingunless strictly neededunless strictly needed yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Relax,its just code“”(Avoid organizational coupling)(Avoid organizational coupling)yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Design-time couplingDesign-time
23、 couplingGlobal stateMFE CMFE DMFE BMFE A yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Loosely coupled entitiesLoosely coupled entitiesEvent EmitterMFE CMFE DMFE BMFE A yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Embrace loosely coupledEmbrace loosely cou
24、pledbut highly aligned MFEsbut highly aligned MFEs yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Lets hammer the APIs“”(Multiple MFEs calling the same endpoint)(Multiple MFEs calling the same endpoint)yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Multiple MF
25、Es in the same viewMultiple MFEs in the same viewAPI 1API 1 yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Your distributed systemYour distributed systemAPI GatewayAuthServiceAPI 1AnotherAPIAnotherAPI yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Possible sol
26、utionsPossible solutions yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Possible solutionsPossible solutionsComponent AComponent B yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Understand the end-to-end impactUnderstand the end-to-end impactof your decisionso
27、f your decisions yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Bye bye big-bang“”(Iterative deployment)(Iterative deployment)yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Migration strategiesMigration strategies yyyy,Amazon Web Services,Inc.or its affiliates
28、.All rights reserved.Migration strategiesMigration strategies yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Migration strategiesMigration strategies/*/catalog yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Migration strategiesMigration strategies/home/catalog
29、/account yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.https:/bit.ly/3G0SnNR yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.https:/ yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Iteratively deploy micro-frontends helpsIteratively deploy m
30、icro-frontends helpsincreasing the developers confidenceincreasing the developers confidenceas well as adding value for usersas well as adding value for users yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Architecture is always a trade-off,just find a balanced approach for your contextUPDATE THIS PRESENTATION HEADER IN SLIDE MASTER yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.谢谢谢谢 yyyy,Amazon Web Services,Inc.or its affiliates.All rights reserved.Luca M