S2 E19 - Dynamic Module + Component Loading Using any Observables
Jul 7, 2021 ·
1h 3m 3s
![S2 E19 - Dynamic Module + Component Loading Using any Observables](https://d3wo5wojvuv7l.cloudfront.net/t_square_limited_480/images.spreaker.com/original/0271956aa05833cb43519105dd2a9266.jpg)
Download and listen anywhere
Download your favorite episodes and enjoy them, wherever you are! Sign up or log in now to access offline listening.
Description
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...
show more
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
show less
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
Information
Author | ng-conf |
Organization | ng-conf |
Website | - |
Tags |
Copyright 2024 - Spreaker Inc. an iHeartMedia Company