Multi-Framework Micro Frontends w/ Module Federation and Web Comp.

# Please find the example and the source code here:
https://www.npmjs.com/package/@angular-architects/module-federation-tools

# Our free eBook on Architecture
https://www.angulararchitects.io/book

Transcript

1. @ManfredSteyer ManfredSteyer Multi-Framework Micro Frontends w/ Module Federation and Web Comp. Manfred Steyer, ANGULARarchitects.io
2. @ManfredSteyer Egg-Laying Woolly Milk Pig (German Metaphor)
3. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App Micro Frontends
4. @ManfredSteyer
5. @ManfredSteyer
6. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App One Reason: Migrating Step by Step (1) (1) (2+) (2+)
7. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App Onother Reason: Merger
8. @ManfredSteyer
9. @ManfredSteyer Contents #1: Module Federation #2: Web Components #3: Combining Both #4: DEMO
10. @ManfredSteyer Manfred Steyer
11. @ManfredSteyer
12. @ManfredSteyer Idea const Component = await import('http://other-app/xyz')
13. @ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "mfe1" } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
14. @ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
15. @ManfredSteyer
16. @ManfredSteyer Custom Elements class MyElement extends HTMLElement { connectedCallback() { this.innerHTML = '<b>Hello World!</b>' } }
17. @ManfredSteyer Custom Elements class MyElement extends HTMLElement { connectedCallback() { this.innerHTML = '<b>Hello World!</b>' } } customElements.define('my-element', MyElement);
18. @ManfredSteyer Custom Elements class MyElement extends HTMLElement { connectedCallback() { ReactDOM.render(<App/>, this); } } customElements.define('my-element', MyElement);
19. @ManfredSteyer Loading Web Components <script src="bundle.js"></script> […] <my-element></my-element>
20. @ManfredSteyer Simple Script Loader const script = document.createElement('script'); script.src = 'assets/bundle.js'; document.body.appendChild(script);
21. @ManfredSteyer Dynamically Adding a Web Component const script = document.createElement('script'); script.src = 'assets/bundle.js'; document.body.appendChild(script); const myElement = document.createElement('myElement'); myElement['visible'] = true; document.body.appendChild(myElement);
22. @ManfredSteyer ❤️
23. @ManfredSteyer The Best of Both Worlds
24. @ManfredSteyer await import('other-app/main'); const rootElm = document.createElement('my-root') document.body.appendChild(rootElm); WrapperComponent This doesn't even need to be a Web Component
25. @ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
26. @ManfredSteyer
27. @ManfredSteyer https://github.com/manfredsteyer/react-app
28. @ManfredSteyer
29. @ManfredSteyer Some Ugly Pitfalls and Workarounds Multiple Routers Bundle Size Cache Angular Platform Zone.js
30. @ManfredSteyer
31. @ManfredSteyer Further Reading on Tricky Details etc.
32. @ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
33. @ManfredSteyer Conclusion You Need a Good Reason! Module Federation: Sharing Code Web Components: Hiding Frameworks and Versions
34. @ManfredSteyer Take Care of the Egg-Laying Woolly Milk Pig!
35. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io