Suspenso Ingenioso

Bookmark
Rate this content

En las aplicaciones modernas tenemos millones de líneas de código con datos provenientes de una variedad de fuentes de datos. Para lograr una experiencia de usuario rápida, usar un patrón similar a suspense es innegociable. Solo si hubiera algo que pudiera manejar las complejidades en suspense con prefetching, cascadas, dependencias de datos, etc. ¿Cómo podemos hacer que suspense sea más ingenioso?

En esta charla veremos cómo la creación de plantillas y las señales hacen que el patrón de suspense sea muy sencillo en Angular. ¡Suspende tu incredulidad! Hay un estado asíncrono más simple con recursos.

This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.

Minko Gechev
Minko Gechev
30 min
12 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Minko Gedev presenta las compensaciones de la carga diferida en Angular y React, abordando conceptos erróneos sobre los frameworks. Explorando las sutilezas de la carga diferida y la implementación de Angular vs. React con modelos de lenguaje grandes. Comenzando con AngularJS, transición a React y contribución a la comunidad de Angular. Uniéndose al equipo de Angular en Google, construyendo una aplicación React, comparando la funcionalidad con Angular. Asistencia de IA en la aplicación Angular, usando la funcionalidad de chat con IA para acciones, implementando la llamada de funciones para los elementos del carrito. Agregando camisetas al carrito usando IA, implementación simple y adición de herramientas para la llamada AI.generate, visualizando mensajes y agregando productos al carrito. Acelerando la aplicación con carga diferida en React y Angular, configurando la funcionalidad de chat. Configurando datos de chat en React, observación de dependencias en el árbol de componentes. Problema de función asíncrona en React, dependencia de datos de componentes, carga de datos en Angular. Inspiración de Amazon para la carga diferida, implementación de React y Angular, visibilidad con IntersectionObservers. Agregando prefetching en Angular y consideraciones de renderizado del lado del servidor con hidratación incremental. Compensaciones de React y Angular en plantillas y características del framework. Evaluando frameworks de JavaScript e impacto en SEO. Utilizando GenKit API para mapeo de funciones y abstracción de lógica de componentes React. Explorando requestIdleCallback en Safari y señales vs. RxJS en Angular. Considerando criterios de selección de frameworks más allá de la popularidad y las tendencias. Explorando características de React y plantillas de Angular en TypeScript. Desventajas de la hidratación parcial de Angular y efectos de cascada.
Available in English: Resourceful Suspense
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
JSNation 2022JSNation 2022
19 min
El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
Top Content
Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.
Momento Angular
JSNation 2023JSNation 2023
22 min
Momento Angular
Angular has experienced significant growth and is the second most popular framework after React. The latest release of Angular, called Angular Ivy, went through a major refactoring in 2021. Angular's reactivity model has been improved with the introduction of signals, which enable better integration with RxJS and support advanced reactivity patterns. Angular has made optimizations for performance, including improvements in load speed and lazy loading. The Angular team acknowledges the innovations in other frameworks and highlights the impact of introducing TypeScript in enabling the project's success.
Pruebas unitarias en aplicaciones Angular
TestJS Summit 2022TestJS Summit 2022
24 min
Pruebas unitarias en aplicaciones Angular
This talk explores unit testing in Angular applications, covering topics such as testing front-end applications, specifics of testing Angular, best practices, and educational resources. It discusses the anatomy of a unit test in both Jasmine and Jest, the setup and initial tests in Angular, testing user interaction and event handlers, testing rendered output and change detection, and unit testing parent components with child components. It also highlights best practices like using test doubles, testing components with dependency injection, and considerations for unit testing. Code coverage is emphasized as a metric that doesn't guarantee bug-free code.
Renacimiento de Angular
JSNation 2024JSNation 2024
29 min
Renacimiento de Angular
Angular and React have similar models of reactivity, with the framework optimizing change detection. Angular introduced signals for optimizing change detection in real-world applications, resulting in improved performance. Deferrable views in Angular allow for lazy loading and significant speed improvements. The island architecture in Angular enables independent component islands without needing hydration. Angular is working on features like partial iteration and zoneless, and aims to support developers in delivering web apps with confidence.
El estado de Angular
JSNation Live 2020JSNation Live 2020
36 min
El estado de Angular
This Talk provides an overview of Angular and its development stack, including the Component Development Kit (CDK) and UI components. It discusses the balance between static and dynamic systems and the benefits of using TypeScript. The Talk also highlights the evolution of Angular, version 10 updates, and the deployment of Angular Universal applications. It mentions the ease of updating Angular and the incorporation of web components. The future of frameworks, external contributions, and monorepo setups are also discussed.
¿Qué dice Angular? 🦊
JSNation Live 2020JSNation Live 2020
8 min
¿Qué dice Angular? 🦊
Today's Talk is about using Angular, Web Audio API, and ToneJS to create custom sounds and instruments in a web application. The speaker demonstrates how to create an audio context, connect sources, and add filters to modify the sounds. They explore different elements in the ToneJS library, such as synthesizers, parts, noise, and audio tracks, to enhance the user experience. The Talk also showcases instruments that play cat and dog samples according to the pitch. Overall, it highlights the possibilities of using these technologies to create unique and interactive audio experiences in web applications.

Workshops on related topic

Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Comienza con AG Grid Angular Data Grid
JSNation 2022JSNation 2022
116 min
Comienza con AG Grid Angular Data Grid
Workshop
Stephen Cooper
Stephen Cooper
Comienza con AG Grid Angular Data Grid con un tutorial práctico del equipo principal que te guiará a través de los pasos para crear tu primera cuadrícula, incluyendo cómo configurar la cuadrícula con propiedades simples y componentes personalizados. La edición de la comunidad de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar de inmediato a tus proyectos. También descubrirás cómo cargar datos en la cuadrícula y diferentes formas de agregar representación personalizada a la cuadrícula. Al final del masterclass, habrás creado y personalizado una cuadrícula de datos AG Grid Angular.
Contenido:- comenzando e instalando AG Grid- configurando ordenamiento, filtrado, paginación- cargando datos en la cuadrícula- la API de la cuadrícula- agregar tus propios componentes a la cuadrícula para representación y edición- capacidades de la edición de la comunidad gratuita de AG Grid
Microfrontends con Module Federation y Angular
JSNation Live 2021JSNation Live 2021
113 min
Microfrontends con Module Federation y Angular
Workshop
Manfred Steyer
Manfred Steyer
Cada vez más empresas eligen Microfrontends. Sin embargo, no son fáciles de implementar. Afortunadamente, Module Federation introducido con webpack 5 ha iniciado un cambio crucial de dirección.
En este masterclass interactivo, aprenderás de Manfred Steyer, Angular GDE y Colaborador de Confianza en el equipo de Angular, cómo planificar e implementar arquitecturas de Microfrontend con Angular y el nuevo Module Federation de webpack. Hablaremos sobre compartir bibliotecas y conceptos avanzados como manejar desajustes de versión, Module Federation dinámico e integración en monorepos.
Después de los ejercicios individuales, tendrás un estudio de caso que podrás utilizar como plantilla para tus proyectos. Este masterclass te ayuda a evaluar las opciones individuales para tus proyectos.
Prerrequisitos:Debes tener algo de experiencia con Angular.
Poniéndose cómodo con Angular y UI
JSNation Live 2021JSNation Live 2021
149 min
Poniéndose cómodo con Angular y UI
Workshop
Alyssa Nicoll
Alyssa Nicoll
Un masterclass tanto para principiantes en UI como en Angular. Vamos a descargar la aplicación Tour of Heroes (escrita por John Papa y encontrada en la documentación de Angular) y darle una mejora en la interfaz de usuario. Todo lo que necesitarás es una computadora portátil y tu conjunto de datos favorito (el mío, por supuesto, serán ponis).