Download as PDF, PPTX
Uploaded bySpyros Ioakeimidis
Micro Frontends
The document discusses micro frontends as an extension of microservices architecture for web development, highlighting their advantages such as improved agility, reduced risk, and easier testing. It addresses the common challenges faced during integration, shared codebases, and the trade-offs between adopting a micro frontend approach versus maintaining monolithic structures. The author emphasizes the importance of thoughtful architectural decisions and offers resources for further exploration of micro frontends.
More Related Content
![[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...](https://cdn.slidesharecdn.com/ss_thumbnails/microfrontendsarchitectureedit-190410074045-thumbnail.jpg?width=640&height=640&fit=bounds)
Micro Frontends
- 1. Micro Frontends Extending theMicro Services Architecture to Web Development Jan 2018 | Frontend Developer Love @ Usabilla
- 2.
- 3.
- 4. Monolith + Single codebase +Easy quick setup + No version management + Single CI/CD pipeline
- 5. Monolith + Single codebase +Easy quick setup + No version management + Single CI/CD pipeline - Refactoring is difficult - Try new stack - Experiment - Long build times - Long development times - Long deployment cycles
- 6. Service 1 Service2 Service 3 Frontend Monolith
- 7. Service 1 Service2 Service 3 Frontend Monolith???
- 8. Service 1 Service2 Service 3 Frontend Monolith??? Micro Frontends???
- 9.
- 10. Chapter 1: What?Why?
- 11.
- 13.
- 14.
- 15. Service 1 Service2 Service 3 Frontend Monolith
- 16. Service 1 Service2 Service 3 Frontend 2Frontend 1 Frontend 3
- 17. > Reusable Code >Agility > Reduce risk > Easier Testing Service 1 Service 2 Service 3 Frontend 2Frontend 1 Frontend 3
- 18. Service 1 Service2 Service 3 Frontend 2Frontend 1 Frontend 3 + Verticalised teams + Self contained + Vertical decomposition + UI Composition
- 19. Service 1 Service2 Service 3 Frontend 2Frontend 1 Frontend 3 + Verticalised teams + Self contained + Vertical decomposition + UI Composition - Proprietary solution - Fit current architecture - Load times - Redundancy risk
- 20.
- 21.
- 22.
- 23. Isolation Separate Deployment Feels Like One Page Different Frameworks Tree Shaking Vendor Bundles Several Frontends NoVersion Conflicts Separate Development
- 24.
- 25.
- 26. iframe App Shell - State -Routing
- 27. iframe App Shell - State -Routing Isolation Separate Deployment Feels like one page Different Frameworks Tree Shaking Several Frontends No Version Conflicts Separate Development Vendor Bundles
- 28.
- 29.
- 30. We need toregister routing in the micro frontend!
- 31. Web Components Each appa component Again App Shell is the orchestrator
- 32. Separate Deployment Feels likeone page Different Frameworks Tree Shaking Several Frontends Separate Development Isolation Vendor Bundles No Version Conflicts Web Components Each app a component Again App Shell is the orchestrator
- 33.
- 34.
- 35.
- 36. Reporting Account Management Security Interactions /reporting /account /editor Isolation Separate Deployment Feelslike one page Different Frameworks Vendor Bundles Tree Shaking (per app) Several Frontends Separate Development No Version Conflicts Hybrid
- 37. loads Move responsibility tomicro frontends
- 38.
- 39.
- 40. Is this amicro frontend?
- 41. Or are thesemicro frontends?
- 42.
- 43. Its your timeto figure out what the previous developers had in mind! We use docker, it should work! And this person suffers
- 44. Adaptive, Responsive &Accessible Design
- 45.
- 46.
- 47. http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/ Can you fityour team around a large table? Yes No You might not need micro frontends yet Micro frontends might help you
- 48. http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/ Can you fityour team around a large table? Do you have monolithic dependencies? Yes No Yes No You might not need micro frontends yet Micro frontends might help you Integration might be complicated Micro frontends may be easily integrated
- 49. http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/ Can you fityour team around a large table? Do you have monolithic dependencies? Got container, orchestration, devops experience? Yes No Yes No Yes No You might not need micro frontends yet Micro frontends might help you Micro frontends might be valuable Consider giving them a try first Integration might be complicated Micro frontends may be easily integrated
- 50.
- 51. “Architecture in microfrontends is domain driven, and low level components can be technical driven. It makes sense to follow a top down approach. Thinking of how to split your monolith in apps according to your domain. No big design upfront as things might go wrong.” Stefan Tilkov @ Devoxx Belgium 2016
- 53.
- 54.
- 55.
- 56. Check these out! >https://medium.com/@gilfink/why-im-betting-on-web-components-and-you-should-think- about-using-them-too-8629396e27a > https://softwarearchitekt.at/post/2017/12/28/a-software-architect-s-approach-towards-using- angular-and-spas-in-general-for-microservices-aka-microfrontends.aspx > https://www.upwork.com/blog/2017/05/modernizing-upwork-micro-frontends/ > https://x-team.com/blog/micro-frontend > https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web- development-f325ebdadc16 > https://www.packtpub.com/books/content/what-micro-frontend > https://technologyconversations.com/2015/08/09/including-front-end-web-components-into- microservices > https://www.tikalk.com/js/introduction-to-micro-frontends/ > https://micro-frontends.zeef.com/elisabeth.engel? ref=elisabeth.engel&share=ee53d51a914b4951ae5c94ece97642fc