Recommended
Recommended
More Related Content
What's hot
What's hot (15)
Similar to Micro Frontends as a solution to legacy JS applications
Similar to Micro Frontends as a solution to legacy JS applications (20)
Recently uploaded
Recently uploaded (20)
Micro Frontends as a solution to legacy JS applications
- 1. Micro Frontends as a solution to legacy JS William Brander William Brander @williambza Particular Software
- 7. Our examples: • Complete Isolation • Componentization • Web Components • Hybrid Multi-Framework
- 8. Let’s look at Isolation
- 11. Pros and Cons of Isolation • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • No code reuse • No shared branding identity • Not a smooth user experience <body> <!--#include virtual="/navbar" --> <!--#include virtual="/footer" --> <!--#include virtual="/userprofile" --> </body>
- 12. Pros and Cons of Isolation + Embedding • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience • Technology Isolation • Deployment Isolation • Runtime Isolation • Slow load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience
- 13. Let’s look at Componentization
- 14. Pros and Cons of Components • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience • No technology Isolation • Deployment Isolation • No runtime Isolation • Slow load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience
- 15. WebComponents
- 16. Pros and Cons of WebComponents • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience • No technology Isolation • No deployment Isolation • No runtime Isolation • Slow load times • Hard cache management • Code reuse • Shared branding identity • Smooth user experience
- 18. Pros and Cons of Framework Isolation • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience • Technology Isolation • Deployment Isolation • Runtime Isolation • Fast load times • Easy cache management • Code reuse • Shared branding identity • Smooth user experience
- 19. Recap
- 20. Themes: • Hosting things separately • Or package and bundle components in the same application • Each implementation has a set of pros and cons • There are quite likely many other ways of doing it too • There is no perfect answer
- 21. Required reading • https://www.devconf.co.za/rate • Finding your service boundaries (https://vimeo.com/284707733) • http://single-spa.js.org/ • https://developer.mozilla.org/en-US/docs/Web/Web_Components • https://github.com/WilliamBZA/microfrontends-cruises • https://github.com/WilliamBZA/Microfrontends-demo William Brander @williambza Particular Software
Editor's Notes
- August 26, 2006
- npm install --save git+https://git@github.com/WilliamBZA/microfrontends-cruises.git import { Cruise, CruiseNavButton } from 'microfrontends-cruises'; <div id="cruises" className="tab-pane fade"> <Cruise></Cruise> </div>