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

Micro Frontend Routing – Solutions for mature applications - iJS 04/2022

Micro Frontend Routing – Solutions for mature applications - iJS 04/2022

Micro Frontends are here to stay and today we have solid APIs to use them—even in enterprise architectures. Thanks to Webpack 5 and community projects, integration is easier than ever before.

Module Federation offers clear and well-designed APIs to ship self-contained parts of an application suite as Micro Apps. Many features like runtime integration and shared dependencies are directly supported.

One of the challenging parts, where no easy-to-use API exists, is a cross-application routing strategy. Depending on your requirements, Micro App Routing can start easily or result in a hard-to-manage blocker for your frontend mission.

This talk will provide answers on how to implement a mature Micro Frontend Routing strategy introducing an Angular App Shell with Multi Framework support, Deep Linking, and a consolidated browser URL, where each Micro App routing path can be managed without conflicts.


Michael Zikes

April 25, 2022

More Decks by Michael Zikes

Other Decks in Programming


  1. Micro Frontend Routing Michael Egger-Zikes Solutions for mature applications ANGULARarchitects.io

  2. Micro Frontend Routing Michael Egger-Zikes Solutions for mature applications ANGULARarchitects.io

  3. Micro Frontend Routing Michael Egger-Zikes Solutions for mature applications ANGULARarchitects.io

  4. Micro Frontends Different Versions Developer Experience Seamless Integration What this

    talk is about Different Frameworks Distributed Routing Michael Egger-Zikes (@MikeZks)
  5. About Michael • Michael Egger-Zikes ANGULARarchitects.io • Trainings, Consultancy, Reviews

    • Focus on Angular Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops Michael Egger-Zikes (@MikeZks)
  6. Why do we need Micro Frontends with Multi Version and

    Multi Tech support??
  7. Micro Frontends: Multi Version/Tech • Separate build and deployment processes

    • Independent developer teams • Different frontend technologies • Seamless integration? Michael Egger-Zikes (@MikeZks)
  8. Micro Frontends: Multi Version/Tech • Should this architecture be your

    first choice? • Maybe not … Michael Egger-Zikes (@MikeZks)
  9. Choose the right approach • Build Monolith • Everything known

    at build time • Same versions • Apps separated with DDD patterns • Module Federation with same dependency versions • Dynamic cross origin integration possible • Different build- & deployment processes, but same versions • Webpack 5 • Module Federation with different dependency versions • Bootstraping different apps • No shared dependency injection, but shared dependencies possible • Comparable to Web Components and Framework Root Components Michael Egger-Zikes (@MikeZks)
  10. How does Routing work in a Multi Version and Multi

    Tech setup? ?
  11. Routing facts • Several bootstrapped apps → different Router instances

    • Only one address bar → only one URL • Default behavior →URL gets overwritten w/o coordination • Sounds like chaos, right? Michael Egger-Zikes (@MikeZks)
  12. DEMO History API

  13. History API findings • Routers can not recognize History API

    pushState changes • No callback possible • Only user interaction can be identified • By using a popstate event listener • Is this good or bad? Michael Egger-Zikes (@MikeZks)
  14. Targets for a Routing concept • How many apps need

    to be active in the shell concurrently? • Do Apps have own demand for changing the Route? • Necessary to manage more than one Route? • Deep Linking between Apps resp. Shell & App? • Are Apps allowed to be nested? Michael Egger-Zikes (@MikeZks)
  15. Choosing your challenge • Easy challenge • Intermediate challenge •

    Tough challenge Michael Egger-Zikes (@MikeZks)
  16. Easy challenge • Only one router instance • Coordinates all

    routing requests • Messaging API to communicate routing requests • Limit access to pushState Michael Egger-Zikes (@MikeZks)
  17. Intermediate challenge • Only one MFE active at one time

    • No nested MFEs • Defined route segments for shell and MFE Michael Egger-Zikes (@MikeZks)
  18. Tough challenge • Each MFE is allowed to use routing

    • Use default framework routing • How do we avoid URL chaos? • Not supported by ... • Module Federation: out of scope • Browser: no API Michael Egger-Zikes (@MikeZks)
  19. DEMO URL Chaos

  20. Possible solution • Monkey patch pushState & replaceState → React

    on URL changes → Prevent that certain Apps change the URL • Offer framework-specific Distributed Routing support → Intercept navigation to transform URL and execute App State change → Avoid unknown path errors • Intelligent URL composition → Convert App internal to Shell compatible URL Michael Egger-Zikes (@MikeZks)
  21. URL Composition • Single App URLs: • Use the concept

    of Angular’s named RouterOutlets → But cross App, cross Router https://www.angulararchitects.io/mfe-1/article/search https://www.angulararchitects.io/mfe-2/invoice/edit/8 https://www.angulararchitects.io/(mfe-1:article/search//mfe-2:invoice/edit/8) Michael Egger-Zikes (@MikeZks)
  22. None
  23. DEMO URL Composition

  24. DEMO Different Frameworks

  25. ! • Define your requirements • Know, whether you need

    multi- version and multi-tech support • Know, whether you need to show more than one Micro App at one time • Accept the challenge Key takeaways
  26. What is on the Roadmap? Tell me more! ?

  27. Complex Routing Big three: Angular, React, Vue Distributed State Management

    Headless Mode Roadmap Messaging API Michael Egger-Zikes (@MikeZks)
  28. [web] ANGULARarchitects.io [twitter] Michael Egger-Zikes (@MikeZks) [npm] @angular-architects/microapp [repo] https://github.com/intauria/microapp

    Contact | Lib | Source Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops