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

Module Federation in practice with NX link

Module Federation in practice with NX link

857072f5d3d767da89a8edd1c7ec9ff2?s=128

Eliran Eliassy

December 30, 2021
Tweet

More Decks by Eliran Eliassy

Other Decks in Technology

Transcript

  1. Angular TLV Micro FE Module Federation+ NX eliraneliassy

  2. e-square.io — Founder & CEO @ e-square.io — Angular Google

    Developer Expert — Writer @ AngularInDepth — Community leader About mySelf
  3. None
  4. None
  5. jobs@e-square.io

  6. e-square.io Micro FE Backof fi ce Online Orders Menu Book

    A Table Restaurant POS
  7. e-square.io Micro FE Backof fi ce Online Orders Menu Book

    A Table Restaurant POS
  8. e-square.io Micro FE Runtime Integration Backof fi ce Restaurant POS

    Backof fi ce
  9. e-square.io Micro FE Separate Deployments Backof fi ce 1.0.0 Restaurant

    POS Book A Table 1.0.0
  10. e-square.io Micro FE Separate Deployments Backof fi ce 1.0.0 Restaurant

    POS Book A Table 2.0.0
  11. e-square.io The Challenges • Share code? NPM? • Version mismatches?

  12. Module Federation!

  13. e-square.io What is MFE? • Allows JavaScript application to dynamically

    import code from another application at runtime. • The module will build a unique JavaScript entry fi le which can be downloaded by other applications • Share dependencies between apps!
  14. e-square.io Micro FE - Terminology Backof fi ce Online Orders

    Menu Book A Table Restaurant POS
  15. e-square.io Micro FE - Terminology Remote Remote Remote Remote Host

  16. e-square.io Host: webpack.con fi g

  17. e-square.io Remote: webpack.con fi g

  18. e-square.io Host: routing

  19. MFE & Monorepo ?

  20. e-square.io MFE & Monorepo • One package.json • Consume shared

    code easily with a simple import
  21. e-square.io NX

  22. e-square.io What is NX • Build system • Workspace manager

    for Monorepos • Rich Plugin ecosystem: • Storybook, eslint, Jest, Cypress and many more… • A ff ected builders - test, lint & build
  23. e-square.io MFE & NX • NX enforce module boundaries -

    No applications coupling • DDD friendly architecture (apps & libs) - Fit the “modules separation” concept
  24. e-square.io Sharing Libs Backof fi ce Online Orders Menu Book

    A Table Restaurant POS
  25. e-square.io Sharing Libs Backof fi ce Online Orders Menu Book

    A Table Restaurant POS Application Library Auth
  26. e-square.io Sharing Libs Dep Graph

  27. e-square.io Sharing Libs Dep Graph

  28. e-square.io Sharing Libs Dep Graph - A ff ected

  29. e-square.io SharedMappings

  30. e-square.io Live Demo…

  31. e-square.io Sca ff olding

  32. • MFE - Probably the most exciting feature coming to

    the world of FE • MFE & NX - as a force multiplier • Share code without publish libraries • No version mismatch • A ff ected app - deploy separately e-square.io Summary
  33. Keep in Touch with me! https://e-square.io https://eliassy.dev @eliraneliassy eliran@e-square.io

  34. e-square.io Ra ff le Time!

  35. Thank You