Micro Frontend Routing – Solutions for mature applications - iJS Munich 10/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.

Transcript

1. Multi Version Micro Frontends Michael Egger-Zikes Solutions for Routing & State ANGULARarchitects.io
2. Multi Version Micro Frontends Michael Egger-Zikes Solutions for Routing & State ANGULARarchitects.io
3. Multi Version Micro Frontends Michael Egger-Zikes Solutions for Routing & State ANGULARarchitects.io
4. Micro Frontends Different Versions Shared State 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)
23. DEMO URL Composition Different Frameworks Share State
24. ! • 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
25. What is on the Roadmap? Tell me more! ?
26. Complex Routing Big three: Angular, React, Vue Distributed State Management Headless Mode Roadmap Messaging API Michael Egger-Zikes (@MikeZks) Micro App Composition
27. [web] ANGULARarchitects.io [twitter] Michael Egger-Zikes (@MikeZks) [npm] @angular-architects/microapp [repo] https://github.com/intauria/microapp/tree/ijs-munich-2022 Contact | Lib | Source Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops