Customizing Angular - Runtime modification of Web Apps - Angular Global Summit '23 by geekle 02/2023

ANGULARarchitects.io - Michael Egger-Zikes

The default Angular frontend architecture is the Build Monolith, where every part of the software implementation needs to me known during build time. An alternative architecture uses Webpack Module Federation to integrate Micro Apps during runtime.

But Module Federation is much more than Micro Apps only. It enables the customization of your software on a level of features, services, or functions as well.

We will investigate practical use of Module Federation to extend white label features of your software. By integrating custom logic during runtime, the default behavior can be extended or replaced w/o rebuilding the entire application.

Transcript

1. Customizing Angular Michael Egger-Zikes Runtime modification of Web Apps ANGULARarchitects.io
2. Runtime Customizing Micro Apps Features Services Functions Dependency Injection Routing What this talk is about JSON Config 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 Customizing of your Angular App? ?
5. Reasons for Runtime Customizing • 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 Customizing 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 Custom 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 Config 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 & Custom 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 Customizing 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 Contact • Slides • Code Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops