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