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

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

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

Micro Frontends Different Versions Developer Experience Seamless Integration What this talk is about Different Frameworks Distributed Routing Michael Egger-Zikes (@MikeZks) 

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) 

Why do we need Micro Frontends with Multi Version and Multi Tech support?? 

Micro Frontends: Multi Version/Tech • Separate build and deployment processes • Independent developer teams • Different frontend technologies • Seamless integration? Michael Egger-Zikes (@MikeZks) 

Micro Frontends: Multi Version/Tech • Should this architecture be your first choice? • Maybe not … Michael Egger-Zikes (@MikeZks) 

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) 

How does Routing work in a Multi Version and Multi Tech setup? ? 

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) 

DEMO History API 

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) 

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) 

Choosing your challenge • Easy challenge • Intermediate challenge • Tough challenge Michael Egger-Zikes (@MikeZks) 

Easy challenge • Only one router instance • Coordinates all routing requests • Messaging API to communicate routing requests • Limit access to pushState Michael Egger-Zikes (@MikeZks) 

Intermediate challenge • Only one MFE active at one time • No nested MFEs • Defined route segments for shell and MFE Michael Egger-Zikes (@MikeZks) 

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) 

DEMO URL Chaos 

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) 

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) 

No content

DEMO URL Composition 

DEMO Different Frameworks 

! • 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 

What is on the Roadmap? Tell me more! ? 

Complex Routing Big three: Angular, React, Vue Distributed State Management Headless Mode Roadmap Messaging API Michael Egger-Zikes (@MikeZks) 

[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