Micro Frontends
•
4 likes•2,686 views
A micro frontend architecture is an approach to developing web applications as a composition of small frontend apps. Instead of writing a large monolith frontend application, the application can be broken down into domain-specific micro frontends, which are self-contained and can be developed and deployed independently. Each micro frontend can be owned by verticalised domain specific teams. Micro frontends do have advantages and disadvantages and they are not suitable in many cases. When micro frontends is a potential solution, make sure to use a domain driven top-down approach, with no big design upfronts. Keep it simple! Frontend Developer Love Amsterdam - 30 January 2018
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to Micro Frontends
Similar to Micro Frontends (20)
Recently uploaded
Recently uploaded (20)
Micro Frontends
- 1. Micro Frontends Extending the Micro Services Architecture to Web Development Jan 2018 | Frontend Developer Love @ Usabilla
- 2. Monolith
- 3. Monolith
- 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 Service 2 Service 3 Frontend Monolith
- 7. Service 1 Service 2 Service 3 Frontend Monolith???
- 8. Service 1 Service 2 Service 3 Frontend Monolith??? Micro Frontends???
- 10. Chapter 1: What? Why?
- 15. Service 1 Service 2 Service 3 Frontend Monolith
- 16. Service 1 Service 2 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 Service 2 Service 3 Frontend 2Frontend 1 Frontend 3 + Verticalised teams + Self contained + Vertical decomposition + UI Composition
- 19. Service 1 Service 2 Service 3 Frontend 2Frontend 1 Frontend 3 + Verticalised teams + Self contained + Vertical decomposition + UI Composition - Proprietary solution - Fit current architecture - Load times - Redundancy risk
- 23. Isolation Separate Deployment Feels Like One Page Different Frameworks Tree Shaking Vendor Bundles Several Frontends No Version Conflicts Separate Development
- 24. Chapter 2: How?
- 25. App Shell FTW!
- 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
- 30. We need to register routing in the micro frontend!
- 31. Web Components Each app a component Again App Shell is the orchestrator
- 32. Separate Deployment Feels like one 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
- 34. imports imports https://github.com/CanopyTax/single-spa https://github.com/medikoo/event-emitter
- 36. Reporting Account Management Security Interactions /reporting /account /editor Isolation Separate Deployment Feels like one page Different Frameworks Vendor Bundles Tree Shaking (per app) Several Frontends Separate Development No Version Conflicts Hybrid
- 37. loads Move responsibility to micro frontends
- 39. Integration!
- 40. Is this a micro frontend?
- 41. Or are these micro frontends?
- 43. Its your time to figure out what the previous developers had in mind! We use docker, it should work! And this person suffers
- 44. Adaptive, Responsive & Accessible Design
- 47. http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/ Can you fit your 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 fit your 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 fit your 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
- 51. “Architecture in micro frontends 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
- 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