Introducción
La visualización de datos es un aspecto crítico de DoiT Console Analytics, y dependemos en gran medida de los gráficos para que nuestros usuarios puedan descifrar datos complejos. A medida que crecía la demanda de nuestros clientes por trabajar con conjuntos de datos cada vez más grandes, nuestra librería de gráficos, Highcharts, empezó a quedarse corta: la UI se congelaba y la experiencia del usuario se veía afectada.
Frente a esta necesidad, salimos a buscar una librería de gráficos alternativa que pudiera manejar grandes volúmenes de datos de forma eficiente, sin sacrificar el rendimiento ni la funcionalidad que nuestros usuarios esperan de nosotros.
En este blog post compartimos el camino que recorrimos al migrar de una librería de gráficos basada en SVG a una basada en canvas, y los retos y beneficios de cada enfoque.
Los retos de los gráficos basados en SVG con grandes volúmenes de datos
Scalable Vector Graphics (SVG) ha sido durante mucho tiempo una de las opciones favoritas para gráficos y visualización de datos. Sin embargo, cuando se manejan conjuntos de datos más grandes, las librerías basadas en SVG pueden generar cuellos de botella importantes en el rendimiento. La raíz del problema está en cómo estas librerías manejan los elementos del gráfico.
Como cada elemento se representa con un nodo del DOM, mientras más elementos tenga un gráfico, más crece el DOM. Y a JavaScript le cuesta recorrer árboles DOM tan grandes de forma eficiente, lo que termina traduciéndose en congelamientos de la UI y otros problemas en la experiencia de uso.
Por ejemplo: un reporte sencillo como este genera más de 10.000 nodos en el DOM.
Gráfico sencillo de Analytics
Si inspeccionamos una sola barra del gráfico en el navegador, vemos que cada barra se representa con una única etiqueta SVG
Estructura del gráfico en el DOM
Las ventajas de un enfoque basado en canvas para gráficos con grandes volúmenes de datos
Canvas es una tecnología web que ofrece un área de dibujo dentro de una página y permite crear y manipular objetos gráficos con JavaScript. Al ser una tecnología de dibujo basada en mapas de bits, renderiza el contenido directamente sobre el elemento canvas, dejando un solo nodo en el DOM.
Esto la vuelve una excelente opción para gráficos dinámicos e interactivos y para visualizaciones complejas. Además, al aprovechar la GPU, Canvas produce gráficos más fluidos y responsivos, lo que se traduce en una experiencia mucho más atractiva para el usuario.
Comparación del tiempo de renderizado entre SVG y Canvas
Comparar librerías y elegir la opción ideal
Con tantas librerías basadas en canvas disponibles, elegir la mejor puede ser una tarea complicada. Abordamos este reto probando varias librerías con grandes conjuntos de datos y evaluando su rendimiento, funcionalidades, documentación, popularidad y flexibilidad. Tras un análisis exhaustivo, elegimos Apache ECharts como la librería ideal para nuestro proyecto por su rendimiento excepcional, sus opciones de personalización y el sólido respaldo de su comunidad.
Integración de la nueva librería y análisis de resultados
Integramos Apache ECharts de forma incremental: primero dejamos que los gráficos nuevos convivieran con la librería antigua para hacer una migración gradual. Así se redujo al mínimo el riesgo de errores y nos aseguramos de que los nuevos gráficos cumplieran con nuestros requisitos. Una vez implementada, comparamos el rendimiento de la nueva librería con el de la anterior usando datos reales de producción, lo que nos permitió medir las mejoras en rendimiento y eficiencia.
Ejemplo: mejora de rendimiento al generar un reporte muy grande con datos reales de producción.
Experiencia de gráficos: antes vs. después
Resumen y conclusión
Migrar de una librería de gráficos basada en SVG a una basada en canvas fue un proceso desafiante, pero muy gratificante. Nuestra librería anterior ya no daba abasto con la creciente demanda de nuestros clientes por trabajar con conjuntos de datos más grandes, y eso se traducía en problemas de rendimiento. Tras una investigación y pruebas exhaustivas, concluimos que Apache ECharts era la mejor solución. La integración gradual de la nueva librería permitió una transición fluida y mejoras significativas en el rendimiento. La nueva librería ofrece una experiencia de usuario más atractiva visualmente e interactiva, incluso con grandes volúmenes de datos, cumpliendo y superando las expectativas de nuestros clientes.