Customizing Angular – Laufzeit-Anpassung der Web App mit Module Federation - DWX Nürnberg 06/2023

ANGULARarchitects.io - Michael Egger-Zikes

Die Standard-Angular-Architektur ist der Build-Monolith, bei der alle Anwendungsteile zum Build-Zeitpunkt bekannt sind. Eine alternative Architektur erlaubt das Hinzufügen von neuen Micro-Frontends über Webpack Module Federation zur Laufzeit. Module Federation kann allerdings weit mehr, als "nur" Micro-Frontends zu bauen. Es erlaubt sogar das Anpassen der eigenen Anwendung auf Basis von Use Cases, Services und Funktionen.

Diese Session zeigt die praktische Anwendung von Module Federation, um das eigene Angular-Softwareprodukt mit separat gebauter, neuer Anwendungslogik zu erweitern. Damit kann das White-Labeling des eigenen Produkts, weit über das Styling hinaus, umgesetzt werden. Das Softwareprodukt selbst muss dabei nicht neu gebaut werden.

Transcript

1. Customizing Angular Michael Egger-Zikes Runtime-Configure your ANGULARarchitects.io Web App with Module Federation
2. Runtime Composition Micro Apps Features Services Functions Dependency Injection Routing What this talk is about JSON API Module Federation Michael Egger-Zikes (@MikeZks)
3. About Michael • Michael Egger-Zikes ANGULARarchitects.io • Trainings, Consultancy, Reviews • Conference Speaker • Focus on Angular Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops Michael Egger-Zikes (@MikeZks)
4. Why do you need Runtime Composition of your Angular App? ?
5. Reasons for Runtime Composition • App ships with a feature set included in the main build process • App settings can modify the runtime behavior • Customizing is more than changing themes or known settings • Runtime Composition allows to hook into the currently running code Michael Egger-Zikes (@MikeZks)
6. Technology stack • Angular and the Build Monolith • Webpack Module Federation • Angular Routing • Angular Dependency Injection • New, custom Dynamic APIs Michael Egger-Zikes (@MikeZks)
7. Module Federation • Often connected with Micro Frontends only • API allows the integration of any exported JavaScript implementation • Defines what shall be exposed • Defines what shall be shared • Allows the integration of new code into a running Angular App Michael Egger-Zikes (@MikeZks)
8. Challenges • App needs to be customized w/o a Rebuild • New features may be deployed while the Shell is running • App needs to be customized w/o a Browser Reload • Routed views may be exchanged on any hierarchal level • Root-level Services shall be exchanged at runtime • Switch between Default and Plugin behavior needs to work Michael Egger-Zikes (@MikeZks)
9. Micro Apps Features Functions Supported Runtime APIs Services Michael Egger-Zikes (@MikeZks)
10. Micro Apps • Module Federation Single Version approach • Exposed Routes array • Like Angular Lazy Loading, but from separate Build process • Allows full integration into Angular’s Dependency Injection tree Michael Egger-Zikes (@MikeZks)
11. DEMO Shell Micro App
12. Features • Routed Use-Cases as Smart Components with Child Components • Can be added into present Lazy Loaded Routes • Integrates into the correct level of the Dependency Injection tree • Custom Features can be switched on & off Michael Egger-Zikes (@MikeZks)
13. Service Discovery Module Federation Load Config Customizing Custom Code Types Module Federation Key JSON API Dynamic UI Widgets Toggles Michael Egger-Zikes (@MikeZks)
14. DEMO Custom Features Router Hooks JSON Config
15. Services • Load Services at Runtime • Exchange Services w/o Browser Reload • Exchange even root-level Services • Custom Services can be switched on & off Michael Egger-Zikes (@MikeZks)
16. DEMO Custom Services Dynamic Provider
17. Functions • Load Functions at Runtime • Switch between Default implementation & Plugin logic at Runtime • Reactive Forms Validation Function as example • Wrapping Function: concept works for any other Function as well Michael Egger-Zikes (@MikeZks)
18. DEMO Custom Functions Function Wrapper
19. ! • Default implemention • Runtime Composition where needed • Module Federation integrates code from separate Build process at Runtime • Configuration with JSON/Backend • Exchange logic w/o Rebuild • Exchange logic w/o Reload Key takeaways
20. [web] ANGULARarchitects.io [twitter] Michael Egger-Zikes (@MikeZks) [repo] https://github.com/mikezks/angular-customizing-v16 Contact • Slides • Code Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops