El desarrollo web es un mundo en constante evolución. Optimizar el rendimiento de visualización de tablas que contienen grandes cantidades de datos es un reto bien conocido por los desarrolladores. En NetDevicesNuestro equipo afronta este tipo de retos todos los días.
En este artículo, exploraremos un problema específico de visualización de tablas. También veremos cómo uno de nuestros desarrolladores, Dany, utilizó ReactReact-table y React-window para tratarlos con eficacia. Está encantado de compartir su experiencia. Hace unos días le hicimos una entrevista. Pensamos que sus ideas serían muy valiosas. En particular, para cualquiera que se enfrente a retos similares en sus propios proyectos.
Vayamos ahora al meollo de la cuestión y descubramos cómo resolvió Dany este complejo reto técnico. !
Mejorar el rendimiento de la pantalla para elapplication
Dany se enfrentó a un verdadero reto al desarrollar application , que requería una visualización optimizada de los datos en una tabla. Este application presenta datos en cantidades muy grandes. La información varía en el tiempo y en función de numerosos datos que se recalculan en el front-end. Los datos cambian en tiempo real y con mucha frecuencia.
En total, estos datos deben mostrarse en una tabla con unas treinta columnas. Dentro, hay mucha información duplicada. Hay varios cientos de filas. Por tanto, la tabla debe mostrar una enorme cantidad de datos que se actualizan en tiempo real. Además, debe permitir funciones de clasificación y filtrado sin perder su capacidad de respuesta. Las actualizaciones son casi instantáneas.
En consecuencia, la cuestión técnica es cómo gestionar mejor la visualización de una tabla rica en datos con React y React-table.
El papel crucial de Windowing y React-window en la optimización de la visualización
El escaparate es un concepto técnico clave. Se utiliza para optimizar la visualización de una tabla con gran cantidad de datos. Este proceso define una ventana en la que sólo se cargan en el DOM (Document Object Model) los elementos que contiene. En lugar de mostrar todos los elementos de la página, lo que ralentiza la carga de componentes. Sólo se muestra lo que es útil. Es decir, lo que contiene la ventana definida por el windowing.
Cuando el usuario se desplaza por la tabla, los elementos que entran en la ventana se cargan en el DOM. Los que quedan fuera de la ventana se borran. Esto se hace fácilmente utilizando la biblioteca React-window. Esta biblioteca se recomienda en la documentación de React-table. La biblioteca se utiliza para generar la tabla de datos.
Además, Dany comparte con nosotros un interesante artículo sobre la técnica mencionada: Optimización del rendimiento de React : ventanas VS reciclaje de componentes.
Un obstáculo importante: la lentitud de la pantalla
Al implementar la tabla, Dany se encontró con problemas de ralentización, sobre todo al utilizar las funciones de ordenación. Esto se notaba especialmente los días en que había muchos datos que actualizar mediante sockets. La tabla tardaba mucho en actualizarse cuando se quería ordenar. Tuvimos que reaccionar y encontrar una solución pertinente. El mayor reto consistió en investigar la técnica del Windowing. De hecho, nuestro desarrollador no la conocía antes de implementar la tabla. Un desarrollador eficaz tiene que ser flexible y tenazmente curioso para encontrar la mejor solución, como Dany.
Cómo Dany utilizó FixedSizeList para mejorar el rendimiento de la visualización
React-window proporciona varios componentes para la creación de ventanas, por lo que nuestro experto desarrollador decidió utilizar ListaTamañoFijo. En función de la altura y la anchura de la ventana, la altura de un elemento de la matriz y el número total de elementos de la matriz, cste componente gestiona la visualización dentro de la ventana y la retirada de la misma.
Por lo tanto, es esencial proporcionar al componente los parámetros correctos. Esto permite a la biblioteca gestionar la visualización de forma eficaz. Para este proyecto, la biblioteca React-table proporcionó directamente el número total de elementos de la tabla y la anchura total de la misma. Sólo quedaba introducir la altura de visualización deseada y la altura de un solo elemento.
También es importante tener en cuenta los distintos tamaños de pantalla posibles. Es necesario especificar un tamaño que se adapte a estos tamaños de pantalla. En nuestro caso, Dany ha optado por utilizar el tamaño del elemento padre mediante la opción getBoundingClientRect javascript (ver código de ejemplo adjunto).
Uso estratégico de la propiedad overscanCount
Una propiedad proporcionada por React-window, overscanCount, le permite elegir el número de elementos que desea cargar además de los que ya están en la ventana. Dany descubrió que cargar el número exacto de elementos calculado por la biblioteca no era óptimo en términos de rendimiento de visualización. Cuando te desplazas rápidamente por la tabla, la biblioteca no tiene tiempo de renderizar los elementos tan rápido como te desplazas, dejando espacios en blanco mientras la biblioteca carga los elementos en la pantalla. En nuestro caso, cargar 10 elementos adicionales optimiza la visualización.
Explorar alternativas: reciclar elementos
Como se menciona en el artículo de Dany más arriba, también existe la técnica del reciclaje de elementos. Sin embargo, él no utilizó esta técnica. Ya que las bibliotecas que encontró no hacían mucha diferencia en términos de rendimiento de visualización.
Implementación de React-window con React-table, código de ejemplo
He aquí un ejemplo simplificado de la implementación de React-window con React-table. Se trata de un ejemplo básico de cómo estas dos bibliotecas pueden utilizarse conjuntamente para optimizar la visualización de una tabla que contenga datos de gran tamaño.
enseñanzas de Dany, el siguiente paso adelante con NetDevices
En conclusión, optimizar la visualización de una tabla llena de datos es un reto frecuente en el desarrollo web. Gracias a la combinación de React, React-table y React-window, es posible crear una experiencia de usuario fluida y con capacidad de respuesta, incluso con una cantidad masiva de datos.
Sin embargo, cada application es único y requiere su propia solución. El enfoque que Dany, uno de nuestros desarrolladores experimentados, compartió con nosotros funcionó bien. Pero no puede aplicarse a todos los proyectos. El mejor consejo, como nos transmitió Dany. Investiga y prueba siempre distintos enfoques para encontrar el que mejor se adapte a tus necesidades.
En NetDevices, nos esforzamos por ofrecer las mejores soluciones técnicas para afrontar los retos únicos de cada proyecto. Si tiene alguna pregunta o duda sobre la optimización de la visualización de tablas de datos, o si necesita ayuda para desarrollar un sitio web application con capacidad de respuesta y alto rendimiento, no dude en ponerse en contacto con nosotros. póngase en contacto con nosotros.
Estaremos encantados de ayudarle a encontrar la mejor solución para su proyecto, tal y como Dany pudo hacer para este proyecto. No deje que los problemas técnicos se interpongan en su camino hacia el éxito en application, recurra a los expertos para garantizar una experiencia de usuario óptima.
