S2 E19 - Dynamic Module + Component Loading Using any Observables

7 lug 2021 · 1 h 3 min. 3 sec.
S2 E19 -  Dynamic Module + Component Loading Using any Observables
Descrizione

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...

mostra di più
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


The Ai Dev Craft Show is a part of the Ai Dev Craft Conference happening Master October 27-28, 2026 Las Vegas. Join us weekly as we discuss the rapidly changing AI-scape and how developers can adapt and excel.

Master developing with AI, become your team’s AI expert
Join us for Ai Dev Craft
Get tickets now! https://ai-devcraft.com/

Special thanks to our hosts:

Lara Newsom 
Jay Bell
Mike Hartington
James Spivey
Brian Love
mostra meno
Informazioni
Autore ng-conf
Organizzazione ng-conf
Sito -
Tag

Sembra che non tu non abbia alcun episodio attivo

Sfoglia il catalogo di Spreaker per scoprire nuovi contenuti

Corrente

Copertina del podcast

Sembra che non ci sia nessun episodio nella tua coda

Sfoglia il catalogo di Spreaker per scoprire nuovi contenuti

Successivo

Copertina dell'episodio Copertina dell'episodio

Che silenzio che c’è...

È tempo di scoprire nuovi episodi!

Scopri
La tua Libreria
Cerca