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.

Ff15019ea188e36922681430d710eb2c?s=128

Michael Zikes

April 25, 2022
Tweet

More Decks by Michael Zikes

Other Decks in Programming

Transcript

  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