Multi Version Micro Frontends - Solutions for Routing & State Management

Today, we have solid APIs to create Micro Frontends with Angular thanks to Webpack 5 and community projects. An enterprise-scale application can be split into self-contained Micro Apps with independent build and deployment schedules. Even different dependency versions or frameworks are supported. Nevertheless, to support cross-version and cross-technology Micro Frontends, a solid shell infrastructure is required.

We need to synchronize different Router instances, where each one usually overwrites the current URL. Another challenge is State Management across Micro Frontends.

This talk will provide solutions on how to implement a mature Micro Frontend platform with an Angular App Shell that coordinates complex Routing and State Management in a multi version and technology architecture.

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/ng-poland-2022 Contact | Lib | Source Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops