Más allá de las listas virtuales: Cómo renderizar 100K elementos con 100s de actualizaciones/seg en React

Rate this content
Bookmark

Generalmente hay una buena comprensión de cómo renderizar grandes conjuntos de datos (digamos, 100K elementos) usando listas virtuales, ...si permanecen en gran medida estáticos. ¿Pero qué pasa si se están agregando o actualizando nuevas entradas a un ritmo de cientos por segundo? ¿Y si el usuario debería poder filtrarlos y ordenarlos libremente? ¿Cómo podemos mantenernos receptivos en tales escenarios? En esta charla discutimos cómo Flipper introdujo transformaciones FSRW inspiradas en map-reduce para manejar tales escenarios con gracia. Al aplicar las técnicas introducidas en esta charla, las tasas de cuadros de Flipper aumentaron al menos 10 veces y esperamos abrir el código de este enfoque pronto.

This talk has been presented at React Advanced 2021, check out the latest edition of this React Conference.

FAQ

Flipper es una plataforma de código abierto utilizada principalmente por desarrolladores móviles para inspeccionar diseños en dispositivos móviles, ver solicitudes de red de aplicaciones React Native, entre otros usos.

ADB, o Android Debug Bridge, es una herramienta utilizada para el debugging de aplicaciones móviles. Permite a los desarrolladores ejecutar comandos como 'ADB log', que genera datos de log para ayudar en el diagnóstico de problemas.

La nueva implementación de Flipper resultó ser diez veces más rápida, reduciendo significativamente la caída de fotogramas y el uso de CPU, lo que se traduce en un mejor rendimiento y menor carga en los dispositivos.

React Virtual, una biblioteca para React, utiliza virtualización para manejar grandes conjuntos de datos permitiendo un desplazamiento fluido y una carga eficiente al renderizar solo los elementos visibles en la pantalla.

Se optimizó no filtrando y clasificando todo el conjunto de datos, sino solo los nuevos datos que cumplen con los criterios establecidos. Esto reduce la necesidad de re-renderizaciones frecuentes y mejora el rendimiento.

Flipper Datasource es un paquete dentro del repositorio de Flipper que generaliza el manejo de operaciones como adiciones, actualizaciones y eliminaciones en los datos. Facilita la gestión eficiente de grandes conjuntos de datos en aplicaciones.

Michel Weststrate
Michel Weststrate
27 min
22 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla discute la optimización de la renderización de grandes tablas utilizando Flipper, una nueva versión que es diez veces más rápida con una mejor interacción del usuario y datos más ricos. Explora la optimización de la renderización con React, virtualización, filtrado, ordenación y técnicas de ventanas. La introducción del paquete de datos de Flipper simplifica la gestión de actualizaciones, inserciones y eliminaciones. El rendimiento del paquete de datos de Flipper es excelente, incluso en una compilación de depuración de React, con un uso mínimo de CPU. La sesión de preguntas y respuestas cubre la ordenación incremental, la altura de fila dinámica y el potencial para la virtualización bidimensional en el futuro.

1. Optimizando la Representación de Tablas Grandes con Flipper

Short description:

Soy Michel Vestrater de Facebook, y hoy hablaré sobre la optimización de la representación de tablas grandes utilizando Flipper. La implementación original era lenta, especialmente con filtros y problemas de ajuste de línea. Construimos una nueva versión que es diez veces más rápida, con una interacción de usuario mejorada y datos más ricos. La mejora del rendimiento fue significativa, con una caída de fotogramas diez veces menor y un uso reducido de la CPU.

Buenos días a todos. Mi nombre es Michel Vestrater. Trabajo en Facebook, creo, porque podría tener otro nombre hoy. Pero es bueno estar aquí y es muy bueno ver todos sus rostros sin ver también su dormitorio y su ropa y su tazón de avena vacío. Gracias por tenerme.

Actualmente estoy trabajando en un proyecto llamado Flipper que es una plataforma de código abierto que es utilizada principalmente por desarrolladores móviles. Y voy a hablar sobre cómo optimizar la representación de tablas realmente grandes. Y en esta charla, hablaré un poco sobre Flipper. Encontraré una aplicación realmente útil de bitcoins y les mostraré una biblioteca de código abierto.

Entonces, en primer lugar, hay una herramienta llamada ADB que se utiliza para debugging aplicaciones móviles. Y si ejecutas, por ejemplo, ADB log, simplemente genera muchos datos. Puede generar fácilmente hasta 100 líneas por segundo o algo así. Y entonces estamos trabajando en Flipper, una herramienta que te permite inspeccionar diseños en un dispositivo móvil y ver las solicitudes de red de tu aplicación React Native y así sucesivamente. Sin embargo, nos vamos a centrar en esta charla en una característica específica, que son los registros. Y los registros, básicamente muestran la misma salida que acabas de ver de ADB, excepto que lo hemos analizado para que pueda ordenar un filtro.

Ahora, la implementación original que teníamos no es muy fluida. Como que empieza un poco, no mantiene realmente el ritmo, y especialmente si aplicas algunos filtros, se ralentiza. Y además, no envuelve correctamente las líneas, lo cual es realmente molesto si usas registros. Así que pensamos que esto es demasiado lento, y en realidad lo que detectamos, incluso en las compilaciones de producción, si el filtro es un poco complicado, y ya tienes 100,000 líneas de registro en él, entonces una sola pasada de renderizado de nuestro componente React podría consumir fácilmente hasta 250 milisegundos, por lo que terminas con cuatro fotogramas por segundo, lo cual es realmente molesto.

Y entonces pensamos que necesitábamos una mejor implementación, y construimos una. Y esta es la nueva versión, que es mucho más suave, pero que realmente mantiene el ritmo con los datos que llegan a través de ADB, e incluso si estás filtrando, apenas afecta al rendimiento. Y también mejoramos mucho la interacción del usuario, así que tenemos enlaces que se resaltan, las líneas se ajustan automáticamente si cambias el tamaño de la ventana, ese tipo de cosas. Así que hicimos los datos mucho más ricos, e incluso añadimos cosas como poder ordenar en cualquier columna que quieras.

¿Y cómo afectó esto al rendimiento? Resulta que el rendimiento de la nueva implementación fue diez veces más rápido. Y vimos que en Facebook, medimos cuál es el rendimiento, cuántos fotogramas dejamos caer, cuál es la carga de la CPU para nuestros usuarios, y básicamente vimos una caída de fotogramas diez veces menor, y un uso mucho más lento de la CPU. Y si miras el perfil en Chrome, podemos explicar eso. Y entonces las dos secciones de la izquierda son básicamente la situación antigua donde hay mucha CPU en marcha y la mayoría de ella es amarilla. Y el amarillo significa que esto está ejecutando JavaScript código, nuestro código de Flipper. Y en la nueva situación, todavía hay mucho uso de la CPU pero se gasta de manera diferente. Ya no se gasta en la parte amarilla, ya no en el scripting.

2. Optimizando la Representación con React

Short description:

Ahora está realizando mucho diseño y estilizado, lo que significa que está generando muchos más fotogramas por segundo. Establecemos una conexión WebSocket con Coinbase y comenzamos a escuchar tres tipos diferentes de tasas de cambio. Introducimos un estado para almacenar todas las filas que llegan y aplicamos filtros y funciones de clasificación. Luego, representamos las filas una por una.

Ahora está realizando mucho diseño y estilizado, y eso significa que está generando muchos más fotogramas por segundo. Entonces, en resumen, el morado es bueno. El amarillo es malo. Entonces, ¿cómo hicimos eso? Y para explicarlo un poco, voy a mostrarles una pequeña aplicación de demostración que transmite muchas transacciones de Bitcoin para que al menos pongamos todos esos ciclos de CPU desperdiciados en buen uso. Y no soy tan valiente como Sarah, así que simplemente lo pregrabé. De todos modos.

Entonces, comencemos con la base. ¿Qué hacemos? Establecemos una conexión WebSocket con Coinbase y comenzamos a escuchar tres diferentes tasas de cambio. Y para cada nuevo mensaje que llega, recogemos las devoluciones de llamada. Y los data básicamente se ven un poco así. Solo un intercambio de una cierta tasa. Entonces, lo que sucede aquí es que realmente no estamos representando nada. Lo siento. Estoy estropeando esto. Entonces, lo que Sarah puede hacer con la codificación en vivo, yo puedo hacerlo con un video. ¿No es asombroso? Entonces, la idea aquí es que aún no representamos nada. Y si comienzas a transmitir, verás que básicamente estamos recibiendo mil elementos por segundo. La CPU no está haciendo nada porque no hacemos nada con ella. Pero esta es nuestra línea de base. Entonces, conceptualmente, esto es lo que está sucediendo. Entonces, vamos a mezclar React.

Entonces, tenemos nuestros pequeños componentes base y comenzamos a introducir un estado en el que almacenamos todas las filas que llegan. También comenzamos con un conjunto base de diez mil filas para tener al menos algo. Y cada vez que llega cualquier fila, actualizamos el estado, asignamos un nuevo array y lo colocamos allí. Y luego, si hay un filtro activo, lo aplicamos al conjunto de datos. Y de manera similar, si el usuario quiere ordenar las secciones por precio, aplicamos una función de clasificación. Entonces, mapeamos todas las filas y las representamos una por una. Entonces, si ejecutas esto... Oh, creo que la presentación se rompió al moverla a un portátil. De todos modos, eso es lo que sucede si lo cambias en el último momento.

QnA

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

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced 2021React Advanced 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.