The Composable Web – Runtime-Configure Your Frontend Application Suite - iJS London 04/2023

ANGULARarchitects.io - Michael Egger-Zikes

Since childhood, we all loved to play with building blocks. HTML introduced a declarative way to describe our views alike. Server- and client-rendered frameworks gave us APIs to introduce custom, isolated components. Custom Elements extended the browser with your own HTML tags.

Today, we use APIs like Module Federation to runtime-integrate Micro Frontends or smaller pieces like Features, Services, or Functions. Still, we need a mature infrastructure to compose all parts of our Frontend Application Suite together.

This talk will give an overview of current challenges and introduce a way to compose independently built Views, States, Features, and Logic together – just like you'd create a new building, block by block.

Transcript

1. Composable Web Michael Egger-Zikes Runtime-Configure ANGULARarchitects.io Your Frontend Application Suite
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/composable-web Contact • Slides • Code Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops