Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Multi-Framework Micro Frontends w/ Module Federation and Web Components @ReliableWebSummit2021

Multi-Framework Micro Frontends w/ Module Federation and Web Components @ReliableWebSummit2021

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

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

August 26, 2021
Tweet

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

  25. @ManfredSteyer

  26. @ManfredSteyer Some Ugly Pitfalls Multiple Routers Bundle Size Cache Angular

    Platform Zone.js
  27. @ManfredSteyer Further Reading on Tricky Details etc.

  28. @ManfredSteyer Conclusion You Need a Good Reason! Module Federation: Sharing

    Code Web Components: Hiding Frameworks and Versions
  29. @ManfredSteyer Take Care of the Egg-Laying Woolly Milk Pig!

  30. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting

    http://angulararchitects.io