Building application in a "Microfrontends" way - Prasanna N Venkatesen *XConf Munich&Barcelona
•
1 like•924 views
In this talk, we plan to explain some general tech considerations that developers need to be aware of while building a micro-frontends application. This comes from my year-long experience in building a micro-frontends application in a geographically distributed team. I will share some approaches and practices that worked for us and things that were learned from them!
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Building application in a "Microfrontends" way - Prasanna N Venkatesen *XConf Munich&Barcelona
Similar to Building application in a "Microfrontends" way - Prasanna N Venkatesen *XConf Munich&Barcelona (20)
More from Thoughtworks
More from Thoughtworks (20)
Recently uploaded
Recently uploaded (20)
Building application in a "Microfrontends" way - Prasanna N Venkatesen *XConf Munich&Barcelona
- 1. Building applications in a Micro-frontends way Prasanna N Venkatesan@pvenk
- 2. Lead Developer with ThoughtWorks for 9 Years pvenk prasann #java #ruby #javascript #clojure prasann@thoughtworks.com
- 3. AGENDA Team and Tech- stack Introducing Micro- frontends Things to take care in Micro-frontends When to choose Micro-frontends
- 4. TEAM AND TECH-STACK Migrate a legacy application for selling cars by 2020 5teams with 30developers distributed over 2countries
- 5. AGENDA Team and Tech- stack Introducing Micro- frontends Things to take care in Micro-frontends When to choose Micro-frontends
- 6. INTRODUCING MICRO-FRONTENDS Monoliths aren’t a bad design choice Monolith web application
- 7. INTRODUCING MICRO-FRONTENDS Then came Microservices Monolith web application ● Strong module boundaries ● Independent deployment ● Technology diversity But...
- 8. INTRODUCING MICRO-FRONTENDS Microservices were like these Monolith web application Independent deployments !== Independent releases Frontend Monolith
- 9. INTRODUCING MICRO-FRONTENDS All of Microservices’ promises + Independent releases Frontend Monolith Monolith web application Micro-frontends
- 10. AGENDA Team and Tech- stack Introducing Micro- frontends Things to take care in Micro-frontends When to choose Micro-frontends
- 11. THINGS TO LOOK OUT IN MICRO-FRONTENDS ● Composing multiple frontends ● Sharing data between multiple frontends. ● Consistent UX across multiple frontends ● Testing strategy
- 12. INTRODUCING SERVICES Configure Search Order Frame A business-logic agonistic orchestrator service that knows how to download the rest of the services’ frontend
- 14. COMPOSING MULTIPLE FRONTENDS Build time Composition Run-time Composition vs
- 15. BUILD TIME FRONTEND COMPOSITION Search Configure Order Package Registry Frame deploys to deploys to deploys to builds the app deploys App Server
- 16. BUILD TIME FRONTEND COMPOSITION Good dependency management resulting in smaller bundles Independent cross team development A monolith built by different teams Non atomic deployments
- 17. RUN TIME FRONTEND COMPOSITION Frame downloaded initially Search Configure Order downloaded later dow nloaded later downloadedlater Integration happens in browser
- 18. RUN TIME FRONTEND COMPOSITION - TOOLKIT Client Side ● JSPM ● SystemJS ● FrintJS ● Single-Spa Server Side ● SSI (Server side includes) ● Tailor (from Zalando)
- 19. 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.
- 21. SHARING DATA - COMPONENT INITIALIZATION
- 22. SHARING DATA - BROWSER STORE State Management Tools MobX
- 23. SHARING DATA - THROUGH DOM EVENTS
- 24. SHARING DATA - REDUX ACTIONS ● Reducers will receive all actions within a store. ● Dynamically possible to combine reducers after store initialization.
- 27. CSS AMBIGUITY
- 28. CSS AMBIGUITY
- 29. UX CONSISTENCY
- 31. 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
- 32. Testing strategy
- 33. TESTING STRATEGY 3 3 Integration Tests ● Consumer driven Contracts (CDC) ● Api journey tests
- 34. TESTING STRATEGY - CDC 3 4 ● Frame services is the consumer of all services ● Frame issues a contract that runs in all pipelines
- 35. TESTING STRATEGY - CDC 3 5 Sample of Frame’s contract
- 37. TESTING STRATEGY 3 7 Service level testing Application Smoke Test
- 38. AGENDA Team and Tech- stack Introducing Micro- frontends Things to take care in Micro-frontends When to choose Micro-frontends
- 39. 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.
- 40. It’s not a sprint, it’s a marathon.