S2 E19 - Dynamic Module + Component Loading Using any Observables

The Angular Plus Show

Single Page Applications (SPA) have many advantages, including increased interactivity, responsiveness, and user experience. However, a SPA often requires sending large chunks of JavaScript code to the client. This code must be downloaded and parsed by the client, not to mention the execution time required. There are many strategies to achieve a highly performant single-page application. One of the most commonly used strategies is to lazy-load as much of the application as possible. It's likely that the client does _not_ need the entire application's code upfront, rather, we can deliver a minimal amount of code to the client to bootstrap the application. We can then either prefetch and preload the remaining chunks or wait until the user interacts with a specific feature or module of our application, and then fetch and load the JavaScript that is necessary to render and execute.
As Angular developers, you are likely familiar with the built-in router's ability to lazy load child modules via routing. This is a big win for all of us. But, what if you could dynamically load modules and components at runtime? The Angular Show panelists (Aaron, Jennifer, and Brian) sat down with Jay Cooper Bell to learn more about this solution and the approach that he has used. Jay is the CTO and co-founder of Trellis, a fundraising platform for non-profit organizations, and a frequent contributor and speaker in the Angular community. Jay, and the team at Trellis, created rx-dynamic-component, an open-source library that enables Angular developers to dynamically load and mount a component at runtime using RxJS Observables. Jay teaches us about what he learned building the library along with the advantages of lazy-loading components using an Observable's next notification as the observer.
Don't forget to subscribe so you can continue to hang out with the Angular Show panelists as we learn from the Angular community!
Show Notes:
rx-dynamic-component source code:
https://github.com/trellisorg/platform/tree/master/packages/rx-dynamic-component
rx-dynamic-component demo:
https://github.com/trellisorg/platform/tree/master/apps/rx-dynamic-component-demo
https://blog.angular.io/ivys-internal-data-structures-f410509c7480
Video about Memory Management: https://www.youtube.com/watch?v=Zs-d6_FPfMY&t=1s
Article: https://www.nytimes.com/interactive/2021/05/24/us/tulsa-race-massacre.html
Connect with us:
Jay Bell - @JayCooperBell
Brian F Love - @brian_love
Jennifer Wadella - @likeOMGitsFEDAY
Aaron Frost - @aaronfrost
Follow us on X: The Angular Plus Show
Bluesky: @theangularplusshow.bsky.social
The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge every year to attend talks and workshops by the Angular team and community experts.
Join
Attend
X
Bluesky
Read
Watch
Edited by Patrick Hayes
Stock media provided by JUQBOXMUSIC/ Pond5