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

Rate this content
Bookmark

En general, se entiende bien cómo renderizar conjuntos de datos grandes (digamos, 100K elementos) utilizando listas virtuales, ...si se mantienen en su mayoría estáticos. Pero ¿qué pasa si se agregan o actualizan nuevas entradas a una velocidad de cientos por segundo? ¿Y qué pasa si el usuario debe poder filtrarlos y ordenarlos libremente? ¿Cómo podemos mantener la capacidad de respuesta en tales escenarios? En esta charla discutimos cómo Flipper introdujo transformaciones FSRW inspiradas en map-reduce para manejar estos escenarios de manera elegante. Al aplicar las técnicas presentadas en esta charla, las tasas de fotogramas de Flipper aumentaron al menos diez veces y esperamos abrir este enfoque como código abierto pronto.

27 min
22 Oct, 2021

Video Summary and Transcription

La charla trata sobre 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, ordenamiento y técnicas de ventana. La introducción del paquete Flipper Datasource simplifica el manejo de actualizaciones, inserciones y eliminaciones. El rendimiento del paquete de origen de datos de Flipper es excelente, incluso en una compilación de depuración de React, con un uso mínimo de la CPU. La sesión de preguntas y respuestas aborda la clasificación incremental, la altura dinámica de las filas y el potencial de virtualización bidimensional en el futuro.

Available in English

1. Optimización de 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 mejor interacción del usuario y datos más ricos. La mejora de rendimiento fue significativa, con una caída de diez veces en los fotogramas y un menor uso de la CPU.

Buenos días a todos. Mi nombre es Michel Vestrater. Trabajo en Facebook, creo, porque tal vez tenga otro nombre hoy. Pero es bueno estar aquí y es muy bueno ver todas sus caras sin ver también su habitación, su ropa sucia y su tazón vacío de avena. Gracias por recibirme.

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, presentaré un poco sobre Flipper. Encontraré una aplicación realmente útil de bitcoins y les mostraré una biblioteca de código abierto.

Primero que nada, hay una herramienta llamada ADB que se utiliza para depurar aplicaciones móviles. Y si ejecutas, por ejemplo, ADB log, genera una gran cantidad de data. Puede generar fácilmente hasta 100 líneas por segundo o algo así. Así que 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 de React Native y demás 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 analizamos para poder ordenarlo y filtrarlo.

Ahora bien, la implementación original que teníamos no era muy fluida. Comienza un poco, no se mantiene realmente al día y especialmente si aplicas algunos filtros, se vuelve lenta. Y además, no ajusta 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 compilaciones de producción, si el filtro es un poco complicado y ya tienes 100,000 líneas de registro, entonces un solo pase de renderizado de nuestro componente de React podría consumir fácilmente hasta 250 milisegundos, por lo que terminas con cuatro fotogramas por segundo, lo cual es realmente molesto.

Así que pensamos que necesitábamos una mejor implementación y construimos una. Y esta es la nueva versión, que es mucho más fluida y realmente se mantiene al día con los data que llega a través de ADB, e incluso si estás filtrando, apenas afecta el rendimiento. También mejoramos mucho la interacción del usuario, por lo 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 que los data sean mucho más ricos e incluso agregamos cosas como poder ordenar por cualquier columna que desees.

Entonces, ¿cómo afectó esto al rendimiento? Resulta que el rendimiento de la nueva implementación fue diez veces más rápido. Y vimos eso en Facebook, medimos cómo es el rendimiento, cuántos fotogramas se pierden, cuál es la carga de la CPU para nuestros usuarios, y básicamente vimos una caída de diez veces en los fotogramas y un uso mucho más lento de la CPU. Y si miras el perfil en Chrome, podemos explicarlo. Y las dos secciones de la izquierda son básicamente la situación anterior donde hay mucha CPU en funcionamiento y la mayor parte es amarilla. Y el amarillo significa que se está ejecutando código JavaScript, 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. Optimización de la representación con React

Short description:

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

Ahora está realizando mucho diseño y estilo, lo que significa que está generando muchos más fotogramas por segundo. Entonces, en resumen, el púrpura es bueno. El amarillo es malo. Y entonces, ¿cómo lo hicimos? 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 aprovechemos todos esos ciclos de CPU desperdiciados de manera útil. Y no soy tan valiente como Sarah, así que lo grabé previamente. De todos modos.

Entonces, comencemos con las bases. ¿Qué hacemos? Configuramos una conexión WebSocket a Coinbase y comenzamos a escuchar tres tasas de cambio diferentes. Y por cada nuevo mensaje que llega, recopilamos devoluciones de llamada. Y los data básicamente se ven un poco así. Solo un intercambio de una cierta tasa. Y lo que sucede aquí es que en realidad no estamos renderizando en absoluto. Lo siento. Estoy arruinando esto. Entonces, lo que Sarah puede hacer con la codificación en vivo, yo puedo hacerlo con un video. ¿No es increíble? Y la idea aquí es que aún no renderizamos 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 esto es nuestra línea de base. Conceptualmente, esto es lo que está sucediendo. Así que agreguemos React a la mezcla.

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 una fila, actualizamos el estado, asignamos una nueva matriz y la colocamos allí. Y luego, si hay un filtro activo, lo aplicamos al conjunto de datos. Y de manera similar, si el usuario desea ordenar las secciones por precio, aplicamos una función de ordenamiento. Entonces, mapeamos todas las filas y las renderizamos una por una. Entonces, si ejecutas esto... Oh, creo que la presentación se rompió al transferirla a una computadora portátil. De todos modos, eso es lo que sucede si lo cambias en el último momento.

3. Optimización de la representación con Virtualización

Short description:

Si lo renderizas, se ve bastante bien siempre y cuando los datos sean estáticos. Pero tan pronto como comenzamos a filtrar, realmente comienza a ralentizarse. Ahora tenemos cinco fotogramas por segundo y la CPU está al máximo. Lo obvio en estas situaciones es aplicar la virtualización. Tomemos un terminal, por ejemplo, solía tener una cantidad fija de líneas de desplazamiento, pero los ingenieros quieren líneas ilimitadas para desplazarse, buscar y filtrar rápidamente. Lo mismo ocurre con los paneles de control con actualizaciones de datos en tiempo real. Aplicar la virtualización es la solución típica, y se recomienda encarecidamente la biblioteca React Virtual. Proporciona un gancho para renderizar conjuntos de datos grandes de manera eficiente.

Si lo renderizas, se ve bastante bien siempre y cuando los data sean estáticos. Pero tan pronto como comenzamos a filtrar, realmente comienza a ralentizarse. Ahora tenemos cinco fotogramas por segundo y la CPU está al máximo. Y si comenzamos a habilitar el flujo, en realidad podemos procesar alrededor de tres nuevos registros por segundo y eso se debe a que estamos renderizando todas esas 10,000 filas una y otra vez.

Esto es realmente lento, no es una buena idea. Lo obvio que hacemos en este tipo de situaciones es aplicar la virtualización. En este punto, generalmente hay personas que preguntan por qué estamos renderizando 10,000 filas en primer lugar. Eso no es una buena user experience. ¿Por qué mostrar tanta data? Y en mi experiencia, eso suele ser una excusa para evitar un problema difícil. Y es muy fácil de demostrar. Tomemos un terminal. Hace una década, solía tener una cantidad fija de líneas de desplazamiento, como tal vez 1,000. Y lo que hace cada ingeniero es ponerlo en ilimitado. Queremos tener todas esas líneas a nuestro alcance cuando hacemos una instalación de NPM. Queremos desplazarnos rápidamente hacia atrás, buscar, filtrar. Y estoy bastante seguro de que la mayoría de los ingenieros renunciarían a ese trabajo si alguien sugiriera que el terminal debería ser paginado. Y lo mismo ocurre con muchos paneles de control que muestran una gran cantidad de data comercial, gráficos, filas que se actualizan con información de acciones en realtime. Tener miles de puntos de data con cientos de actualizaciones por segundo no es realmente tan extraño en absoluto.

Entonces, lo típico que hacemos en este punto es aplicar la virtualización. Hay un montón de buenas bibliotecas disponibles para React, como React Window, Virtuoso, pero la mejor que encontré es React Virtual de Tanner Lindsay. Y es realmente buena. Básicamente, el uso es bastante simple. Proporciona un gancho, pero también admite el ajuste de filas. La idea es que llames a este useVirtualHook, le des la cantidad de data que deseas renderizar y un contenedor que se utiliza para los cálculos de tamaño. Y luego te devuelve un montón de elementos para mapear, y para cada uno de ellos, aplicas algún estilo. Es un montón de estilos, pero es muy sencillo construir esto.

Entonces pongamos esto a prueba. Nuevamente, en el conjunto de datos estático, se desplaza con fluidez. Y lo interesante es que, una vez que comenzamos a transmitir los data, ahora podemos, en lugar de tres o cuatro elementos, renderizar un par de cientos de elementos antes de que comencemos a ralentizarnos. Ahora, el filtrado sigue siendo costoso. Una vez que aplicas el filtrado y la ordenación, puedes ver realmente la cantidad de elementos que puedes procesar en ese momento disminuir.

4. Optimización de la Representación: Filtrado y Ordenamiento

Short description:

React Virtual resuelve el problema de desplazamiento rápido para conjuntos de datos estáticos, pero no aborda el costoso procesamiento de datos. La memorización y el debouncing pueden ayudar hasta cierto punto, pero no resuelven completamente los problemas de rendimiento. Para optimizar la representación, podemos filtrar solo los datos que llegan, en lugar de todo el conjunto de datos. Al ordenar las filas en una referencia en lugar de en el estado y actualizar el conjunto de filas visibles según el filtro, podemos mejorar el rendimiento.

Y estamos utilizando al máximo la CPU. Entonces, React Virtual resuelve el problema para nosotros si tenemos un conjunto de datos estático y necesitamos poder desplazarnos muy rápido. Ese es el problema que resuelve. Sin embargo, esto no resuelve nuestro problema. Porque no es la única parte que es costosa, la representación. También es el procesamiento de datos. Si cada vez que recibimos un nuevo elemento, tenemos que mapear todo el conjunto de datos, filtrarlo nuevamente. Y si la ordenación está activa, también tenemos que volver a ordenar el conjunto de datos. Ahí es donde realmente se pierde el rendimiento.

Entonces, la virtualización que ya teníamos en el primer ejemplo que mostré. Y aún así teníamos 250 milisegundos por representación solo debido a todo el procesamiento que ocurre. Y hay algunos trucos que la gente aplica comúnmente. Por ejemplo, podríamos memorizar las filas filtradas. Pero eso no ayuda realmente. Eso solo ayuda si el filtro cambia de vez en cuando. Pero no si tus filas están cambiando todo el tiempo. Si tienes docenas de actualizaciones que debes procesar, entonces tu memoria nunca va a tener un resultado positivo en la caché. Y de manera similar, puedes hacer un debouncing, lo que asegura que al menos tu aplicación se mantenga usable. Pero no reduce el rendimiento de una sola representación. Y te permite ir más allá de esos cuatro fotogramas por segundo en nuestro caso de uso. Entonces, ¿qué podemos hacer de manera más inteligente?

Una cosa que podemos hacer de manera más inteligente es no filtrar todo el conjunto de datos que tenemos. De hecho, ya sabemos para cada elemento si cumple con los criterios de filtro o no. Solo necesitamos filtrar los datos que llegan, no los datos que ya tenemos. Así que hagamos eso. Lo primero es que no vamos a ordenar nuestras filas en el estado, lo cual causaría una representación cada vez que lo cambiemos, sino que ordenamos en una referencia. Y el estado contendrá solo las filas visibles. Ahora, si llega un nuevo evento, lo aplicamos al conjunto base y luego también verificamos si coincide con el filtro actual. Si coincide con el filtro actual, también actualizamos el conjunto de filas visibles. Y luego hay otra cosa que hacer, y es que cada vez que el criterio de filtro en sí entonces necesitamos volver a filtrar todo el conjunto, pero eso ahora es el caso excepcional. Así que pongamos esto a prueba.

5. Optimización de Filtrado, Ordenamiento y Ventaneo

Short description:

Optimizamos el filtrado y ordenamiento actualizando el estado solo si el elemento coincide con el filtro. Esto reduce el costo del filtrado de O(n) a una sobrecarga constante. Para el ordenamiento, aprovechamos el hecho de que los datos ya están ordenados y utilizamos una búsqueda binaria en lugar de un ordenamiento completo. Esto mejora el rendimiento de O(n log n) a log n. Además, podemos ventanear los datos que procesamos para una optimización adicional.

Recuerda, lo importante es que solo actualizamos el estado si el elemento coincide con el filtro. Entonces, en el caso base, nuestro rendimiento es el mismo que en el ejemplo anterior. Sin embargo, si comenzamos a filtrar, ahora el rendimiento aumenta en cuanto a la cantidad de nuevos elementos que podemos procesar. Porque ahora, en 2 de cada 3 transacciones, no causamos una representación. Por lo tanto, dejamos mucha más capacidad de CPU disponible para procesar ese WebSocket entrante. Eso ya es una buena mejora. Esto reduce el costo del filtrado del orden de n a una sobrecarga constante.

¿Podemos hacer lo mismo para el ordenamiento? Y la respuesta es sí. También podemos hacer exactamente lo mismo para el ordenamiento. ¿Cómo lo hacemos? La idea básica es que aprovechamos el hecho de que sabemos que lo que estamos representando ya está ordenado, si antes estaba ordenado. Entonces, cada vez que llegan nuevos datos, no necesitamos ordenar el conjunto completo. En su lugar, podemos usar una pequeña utilidad de Lodash. Y encontrar utilizando sorted last index by, la búsqueda binaria, la posición de inserción en la que debemos insertar nuestra nueva fila. Y luego solo hay una búsqueda binaria en lugar de un ordenamiento completo en los datos. Por lo tanto, pasamos de básicamente N log N a log N. Nuevamente, lo mismo se aplica si el ordenamiento en sí cambió, debemos hacer el conjunto completo, pero nuevamente, este es el caso menos común.

Entonces pongamos esto a prueba. Y recuerda, lo crucial aquí es que en lugar de ordenar el conjunto completo, hacemos una búsqueda binaria para encontrar la posición de inserción. Y así, nuevamente, procesamos los datos. Comenzamos a filtrar. Y tenemos un buen rendimiento. Y ahora habilitamos el ordenamiento. Entonces ahora el conjunto de datos está ordenado. Y aún así no afecta mucho nuestro rendimiento. Normalmente, el ordenamiento es realmente costoso. Ahora no impacta tanto. Entonces ahora optimizamos el filtrado, optimizamos el ordenamiento. ¿Podemos hacerlo aún mejor que esto? Y la respuesta es sí. También podemos comenzar a ventanear los datos que procesamos.

6. Aplicando Ventaneo Anticipado

Short description:

Podemos aplicar el ventaneo anticipado en el momento en que procesamos los datos. Si se agrega una nueva fila fuera de la vista actual, no es necesario activar la representación o volver a representar React.

Ahora suena un poco controvertido porque ya estamos aplicando el ventaneo, pero solo lo estamos aplicando a la representación. Pero en realidad, si lo piensas, podemos aplicar el ventaneo anticipado en el momento en que procesamos los datos. Entonces, cuando se agrega una nueva fila, pero se agrega efectivamente fuera de la vista actual, ni siquiera necesitamos activar una representación. Incluso si coincide con el filtro y encuentra el índice de inserción. Si después de eso descubrimos que no está dentro de la ventana de visualización, en realidad no es necesario hacer que React vuelva a representar y realizar esos cálculos de fertilización. Así que apliquemos ese truco también.

7. Optimizando la Representación: Ventaneo y Rendimiento

Short description:

Introducimos una ventana para capturar el conjunto visible de filas y usamos un truco de actualización forzada para representar React cuando sea necesario. Después de cada representación, almacenamos el rango representado y verificamos si un índice de inserción está dentro de la ventana visible. Hay un caso de excepción para activar una representación y asegurarnos de que la barra de desplazamiento siga creciendo. Las pruebas muestran un rendimiento mejorado con un uso mínimo de la CPU.

Ahora ya no tenemos ningún estado. Y para capturar lo que estamos viendo actualmente, introducimos una ventana que simplemente comienza el conjunto visible de filas y usamos un truco, actualización forzada, para forzar una representación de React cuando queramos. Y si no queremos representar, React nunca se volverá a representar.

Ahora lo siguiente que hacemos es después de cada representación, almacenamos el rango que representamos, el rango que obtuvimos de React virtual, lo siento. Y luego verificamos cuando encontramos el índice de inserción de una fila, verificamos si está dentro del Luego verificamos si React debe representar y, de lo contrario, no lo hace.

Ahora hay un caso de excepción, y es que una vez cada cien filas, todavía vamos a activar una representación, y eso es para asegurarnos de que nuestra barra de desplazamiento siga creciendo si llega más data, incluso si toda la data llega fuera de la ventana actual. Así que probemos esto. Comenzamos a transmitir y verás que procesamos mucha data, especialmente si no hacemos tail, porque entonces todos los eventos ocurren fuera de la ventana. Cada tail, todavía tenemos el mismo rendimiento que antes, pero con nuestro tailing, casi todo se agrega fuera de la pantalla, por lo que apenas usamos CPU. Esta es también la primera vez que la CPU realmente cae por debajo del uso máximo.

8. Optimizando la Representación con Flipper Datasource

Short description:

Ahora tenemos un pipeline más largo para filtrar, iniciar y verificar actualizaciones dentro de la ventana visible antes de la representación. Hemos generalizado este enfoque en el paquete Flipper Datasource, que maneja actualizaciones, inserciones y eliminaciones utilizando un pipeline de operaciones. Al transformar la operación inicial y aplicar la clasificación, podemos manejar fácilmente diferentes tipos de operaciones. Con el paquete Flipper data source, podemos refactorizar nuestro ejemplo para eliminar la lógica y representación personalizadas, y en su lugar utilizar el data source para manejar eventos y actualizar la configuración de la vista cuando cambien los criterios de filtro o clasificación.

Entonces, ahora tenemos un pipeline más largo, filtramos, iniciamos, verificamos si la actualización realmente aparece dentro de la ventana visible y solo si todo eso es cierto, entonces hacemos que React se represente. Así que ahora no agregamos mucha lógica, y fue solo para añadidos. ¿Cómo lidiamos con las actualizaciones? ¿Cómo lidiamos con las inserciones? ¿Cómo lidiamos con las eliminaciones? Y la solución que les he mostrado hasta ahora, la hemos generalizado en un paquete. Se llama Flipper Datasource. Por ahora, se mantiene dentro del repositorio de Flipper en GitHub. Pero puedes usar este paquete de inmediato. Y la idea básica es que en realidad todas las demás operaciones siguen básicamente el mismo patrón. Una actualización o una eliminación no es significativamente diferente de una inserción. Esos cuatro pasos son básicamente un pipeline donde describimos la operación inicial. Por ejemplo, agregar un elemento. Y luego aplicamos la clasificación y simplemente transformamos la descripción de la operación. Entonces, una operación de agregado se convierte en una inserción en una posición diferente con el mismo elemento. Y luego también tenemos una operación de reversión en caso de que estemos clasificando en orden inverso. Y luego decidimos si esta operación termina en la ventana. Primero transformamos la operación sin pensar en la representación en absoluto. Y las otras operaciones también son muy fáciles de expresar en estos mismos términos. Pasan por el mismo pipeline. Y ahora refactoricemos nuestro ejemplo para aprovechar el paquete Flipper data source. Así que eliminamos toda nuestra lógica personalizada, nuestros efectos. Todavía tenemos los mismos criterios de vista. El usuario todavía tiene las mismas funciones. Solo vamos a conectarlo de manera diferente. Así que ya no necesitamos React Virtual. Eso está abstraído. Eliminamos todo ese código de representación, que está aquí. Ahí vamos. Y luego solo importamos algunas cosas del paquete. Importamos el create data source, que crea el data source y mantenemos una referencia a él. Y lo único que hacemos cuando llega un nuevo evento es llamar a append, y eso almacena el evento en el data source. Luego, cada vez que el usuario cambia los criterios de filtro o clasificación, simplemente actualizamos la configuración de vista del data source.

9. Optimizando la Representación con Flipper Data Source

Short description:

Pasamos el origen de datos al renderizador virtual del origen de datos, lo que resulta en la misma funcionalidad que hemos construido hasta ahora en esta demostración. El rendimiento es excelente, incluso en una compilación de depuración de React. El uso de la CPU es mínimo, incluso con un alto volumen de registros y filtrado. El paquete Flipper Data Source hace que la demostración sea eficiente y se utiliza para alimentar vistas críticas en Flipper. Tiene potencial para su uso futuro en la generación de gráficos.

Ese origen de datos, lo pasamos al renderizador virtual del origen de datos. Y con eso, básicamente tenemos lo mismo que hemos construido hasta ahora en toda esta demostración. Ahora son solo unas pocas líneas de código.

Así que pongámoslo a prueba. Nuevamente, comenzamos. Comenzamos a seguir. Haciéndolo difícil. Y comenzamos a filtrar. Y realmente vemos que, como, el rendimiento es realmente bueno ahora. Aunque esta es solo una compilación de depuración de React, se mantiene fácilmente en términos de uso de la CPU.

Entonces, esto está implementado de manera un poco más eficiente que lo que hicimos hasta ahora. Pero ahora nuestra CPU apenas se esfuerza. Aunque estamos agregando casi mil registros por segundo y los estamos ordenando y filtrando. Y para hacerlo aún más difícil, podemos comenzar con un conjunto de datos grande. Entonces, en lugar de 10,000 elementos, comencemos con 100,000. Nuevamente, hicimos lo mismo. Y lo que notaremos es que esto lo hace un poco más costoso. Por lo tanto, el uso de la CPU es ligeramente mayor. Pero aún así, se mantiene bien. Por lo tanto, no estamos al máximo en términos de CPU y JavaScript. Esto significa que la representación, la velocidad de fotogramas, se mantiene estable en 50 fotogramas por segundo.

Básicamente, esto es todo lo que quedaba para que esta demostración fuera eficiente. Y eso es lo que hace el paquete Flipper Data Source. Aún no es perfecto, pero funciona muy bien en esos casos. Lo usamos para alimentar todas nuestras vistas críticas en Flipper. Puedes ver el código fuente. Está en nuestro repositorio. Y hay algunas ideas futuras. Por ejemplo, el mismo mecanismo podría usarse para generar gráficos. Hay una pequeña demostración de ello.

QnA

Q&A: Ordenamiento Incremental y Altura Dinámica de Filas

Short description:

Pero hay muchas posibilidades. Porque, al igual que muchas visualizaciones, sigue este filtro, orden y ventana. Así que pruébalo. Déjame saber qué piensas. Si tienes alguna pregunta, no dudes en preguntar. Gracias. La primera pregunta es, ¿cómo funciona el ordenamiento incremental con datos no lineales? Los datos entrantes no tienen que estar ordenados en absoluto. Puedes ordenar según tantos criterios como sea posible. Siempre y cuando tengas una función de ordenamiento estable, eso funciona. Perfecto. Otra pregunta es, ¿cómo maneja la lista virtual la altura dinámica de las filas? Mide y almacena en caché las medidas para compensar los elementos siguientes. Eso funciona muy bien en la práctica. Gracias por la excelente charla.

Pero hay muchas posibilidades. Porque, al igual que muchas visualizaciones, sigue este filtro, orden y ventana. Así que pruébalo. Déjame saber qué piensas. Si tienes alguna pregunta, no dudes en preguntar. Gracias.

Esa fue una charla increíble. Muchas gracias. Aplaudamos nuevamente. Muy bien. Tenemos algunas preguntas que llegaron durante la charla y simplemente te las haré y luego al final, elegirás tu pregunta favorita y esa persona recibirá una camiseta. Así que simplemente las haré en el orden en que han sido votadas hasta ahora.

La primera pregunta es, ¿cómo funciona el ordenamiento incremental con data no lineal en términos de tener que volver a calcular el conjunto de datos ordenado, un conjunto de fechas no ordenadas entrantes, por ejemplo? Así que veamos si entiendo correctamente la pregunta. La forma en que funciona el ordenamiento es a través de una función de comparación donde puedes, como, tener una salida de ordenamiento estable. Por ejemplo, puede ser una fecha en efecto. Y solo se compara en relación con otros elementos. Entonces, los datos entrantes no tienen que estar ordenados en absoluto. Puedes ordenar según tantos criterios como sea posible. Siempre y cuando tengas una función de ordenamiento estable, eso funciona. Perfecto.

Y otra pregunta es, ¿cómo maneja la lista virtual la altura dinámica de las filas? Esa es una muy buena pregunta. He leído el código fuente de eso hace un tiempo. Entonces, lo que hace es ejecutar los elementos, luego los mide y almacena las medidas y las utiliza para compensar los elementos siguientes. Pero debido a que, como, la altura se memoriza por fila, al menos mientras el ancho no cambie, eso funciona muy bien en la práctica. Debes proporcionar una función heurística para la altura base. Pero luego eso comienza a ajustarse. Curiosamente, eso no es realmente notable. Genial. Y otra más. Gracias por la excelente charla.

Q&A: Flippa Data Source y Noches sin Dormir

Short description:

¿Tiene la fuente de datos Flippa una API para virtualización en dos dimensiones? No, actualmente solo admite virtualización unidimensional. Agregar el muestreo hacia abajo a la abstracción sería útil para trazar gráficos. La representación automática de cebra se puede lograr utilizando el índice del elemento de la matriz. No hubo muchas noches sin dormir durante el desarrollo de Flipper. Puedes descargar Flipper y probarlo. Gracias por tus preguntas y siéntete libre de continuar la discusión en las salas designadas.

¿La fuente de datos Flippa ya tiene una API para la virtualización en dos dimensiones, por ejemplo, para las cuadrículas? No. Actualmente solo realiza virtualización unidimensional. Y también lo que creo que es realmente interesante agregar en el futuro es agregar el muestreo hacia abajo a la abstracción. Esto sería realmente útil para trazar gráficos si pudiéramos reducir dinámicamente los eventos que llegan.

Genial. ¿Y has intentado optimizar la representación automática de cebra? Por ejemplo, filas oscuras y claras una tras otra. No, no lo intenté. Pero eso no debería... Entonces, lo que obtienes de useVirtual es solo una matriz con elementos. Por lo tanto, puedes usar el índice del elemento de la matriz para la representación de cebra, en lugar de asociarlo con los datos. Eso debería funcionar bien. A menos que realmente te importe que la fila específica siempre sea gris y las otras siempre sean blancas. Pero no creo que ese sea generalmente el caso.

Excelente. Ahora, hay tantas preguntas que no podremos responderlas todas. Así que solo voy a hacer esta última para concluir, porque es una de mis favoritas. ¿Cuántas noches sin dormir hubo para llegar a esta solución final? En realidad, no muchas. La razón es que quería construir esto hace años, pero nunca tuve una excusa sólida hasta que comencé a trabajar en Flipper. Y sí, usamos Flipper en la vida real en Flipper. Así que puedes descargar Flipper y probarlo. No me quitó muchas noches sin dormir. Genial, muchas gracias. Ahora sé que había más preguntas, así que puedes quedarte en la sala de discusión con el orador en persona, que estará cerca de la esquina justo afuera de la puerta, y si estás en una audiencia remota, puedes ir al espacio react advanced, que es bit.ly diagonal espacial react advanced, para unirte a la conversación. Pero tienes una gran decisión que tomar. ¿Cuál fue tu pregunta favorita de todas las que viste? Esa sería la pregunta sobre las noches sin dormir. Noches sin dormir. Es tan amable de Gareth. Una pregunta muy buena, ¿verdad? Entonces, Dave o DJ Amy, recibirán una camiseta. Si estás aquí en persona, acércate al frente. Si estás en línea, nos pondremos en contacto contigo. Todos aplaudan y definitivamente revisen su charla.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn