- . , visx . , .
- , . visx, , CSS-in-JS-. , React- , , , , , . Visx, , . , .
- Esta no es una colección de elementos "afilados" para la creación de gráficos. Si usa primitivas de visualización para crear gráficos, eventualmente creará su propia biblioteca que resuelva este problema. Además, será una biblioteca optimizada para sus necesidades. Ella estará bajo tu completo control.
La fortaleza más importante de visx es que es esencialmente un conjunto regular de componentes de React. Saber cómo trabajar con la biblioteca React significa que puede usar visx para crear visualizaciones. Utiliza API estándar y patrones familiares para los desarrolladores de React. En cualquier proyecto de React, visx debería sentirse como en casa. ¡Estamos muy interesados en echar un vistazo a lo que crea con visx!
Desafío: visualización de datos en el desarrollo front-end
La visualización de datos es necesaria para especialistas de diversos campos. Debido a esto, es necesario que existan marcos para la creación de elementos gráficos. Tales marcos que son capaces de resolver los problemas de estas personas. Del tipo que estas personas realmente pueden dominar.
Uno de esos grupos son los desarrolladores front-end que constantemente tienen que crear visualizaciones de datos para proyectos web. Hay toneladas de excelentes bibliotecas y marcos para crear gráficos web. Desde D3 , Highcharts , Plotly , Echarts , Victory , G2 , Recharts , react-vis , vega ,vega-lite , a Semiotic y otros proyectos similares. A pesar de esta diversidad, analizamos más de una docena de bibliotecas existentes y consideramos su uso en Airbnb y descubrimos que la mayoría de ellas tienen deficiencias en al menos una de las tres áreas importantes para nuestros desarrolladores front-end:
- ( ?). - . API D3 vega. , -.
- ( , ?). , ? ( — airbnb.com), . ? .
- . -, , -, , airbnb.com, . , , , , , .
Se señaló que a menudo existe una relación directa entre la expresividad de las herramientas de visualización de datos y la capacidad de explorarlas rápidamente. Cuanto mejor sea una de estas características, peor puede ser la otra. Todo esto nos llevó a la pregunta de cómo crear una biblioteca que se pueda explorar rápidamente, una biblioteca que sea lo suficientemente expresiva y, al mismo tiempo, de alto rendimiento. La respuesta a esta pregunta consta de una palabra: "Reaccionar".
Solución: primitivas visuales de bajo nivel basadas en React
En los últimos años, la biblioteca React se ha convertido en la corriente principal del desarrollo web. Esto se debe en parte al hecho de que tiene API declarativas que lo ayudan a escribir código limpio y legible que es fácil de mantener. Esta biblioteca es familiar para muchos desarrolladores front-end, hay mucho material disponible para optimizar el rendimiento de las aplicaciones React. Basamos el proyecto React y el ecosistema de esta biblioteca, lo que significa que lo hicimos fácil de aprender y productivo. La implementación de una API modular de bajo nivel en él se convirtió en la clave de su expresividad.
Cuando hablamos de esta visión de este proyecto, generalmente nos hacen dos preguntas.
Aquí está el primero: "¿Por qué no usar D3, una biblioteca muy expresiva en aplicaciones React?"
El punto es que puedes hacer eso. Pero dado que tanto D3 como React quieren manipular el DOM sin ayuda, hemos descubierto que es mejor cuando D3 se usa únicamente para cálculos y React se usa para DOM. De lo contrario, dos modelos mentales que compiten por actualizar el DOM abren la puerta a que los errores se infiltran en el proyecto. Pero usar D3 solo para cálculos significa que una gran parte de la funcionalidad de esta biblioteca (lo que está relacionado con el DOM) no se usará. Se trata de selección , unión , zoom , arrastre , pincel y transiciones... Además, como se mencionó, D3 lleva tiempo dominarlo. Y nos gustaría que los desarrolladores sientan que están escribiendo código React nativo que utiliza API estándar y patrones familiares al realizar la visualización de datos.
Aquí está la segunda pregunta: ¿Por qué no usar una de las muchas bibliotecas de renderizado creadas para React?
Nuestra investigación (sus resultados se presentan en la siguiente figura) mostró que las bibliotecas React existentes para la visualización de datos son a menudo abstracciones de alto nivel y están optimizadas para facilitar su uso (es decir, enfocadas en reducir la cantidad de código requerido para usarlas). Esto se hace a expensas de su expresividad. Ninguno de ellos ofrece al desarrollador la expresividad de las primitivas D3, muchos no permiten la optimización que necesitamos para los proyectos de producción, ya que la computación, la animación, la gestión de estados, el estilismo y el renderizado están íntimamente relacionados entre sí.
- , , . visx , React-
Al analizar el espacio del problema presentado en la figura anterior, puede ver claramente la oportunidad para el desarrollo exitoso de una biblioteca React con un alto nivel de expresividad. Al crear primitivas de renderizado de bajo nivel que fueron diseñadas desde cero para usar API de React comunes, esperábamos poder crear una biblioteca que fuera fácil de aprender, expresiva y de alto rendimiento. Pensamos que tal biblioteca sería útil para cualquier desarrollador de aplicaciones para el usuario. Así nació el proyecto visx.
Detalles sobre visx
La colección de componentes visx (anteriormente conocida como vx) oculta las palabras "componentes de visualización" en su nombre. Consiste en más de 30 paquetes separados que contienen primitivas de visualización de datos de React, divididas en varias categorías (ver la siguiente figura). Quien utilice estas primitivas no se verá obligado a entrar en algún tipo de esquema de gestión del estado de la aplicación. El desarrollador puede elegir el enfoque de la animación de los elementos y su estilo. Todo esto significa que las primitivas visx se pueden integrar en cualquier código base basado en React. Y el hecho de que al crear visx, se hizo énfasis en la modularidad (esto hace que visx sea similar a D3) le permite crear paquetes de aplicaciones de un tamaño compacto, incluyendo en su composición solo lo necesario para implementar su propia biblioteca para visualización de datos, destinada a uso reutilizable, o luego ,lo que se necesita para formar un horario único que existe en una sola copia.
Visx es una colección modular de más de 30 paquetes que abordan tareas comunes de visualización de datos en aplicaciones React.
Preguntas y respuestas
▍¿Cómo se usa D3 en visx?
Varios de los paquetes incluidos con visx utilizan D3 para realizar varios cálculos, como la ubicación de elementos en las páginas. Duplican funcionalmente los paquetes D3 que usan, equipándolos con API React declarativas. Algunos ejemplos de estos paquetes son @ visx / axis, @ visx / geo, @ visx / hierarchy y @ visx / shape. Otros paquetes reemplazan la funcionalidad de administración DOM de D3 y brindan al desarrollador primitivas de React para interactuar con los elementos. Estos son, por ejemplo, @ visx / brush, @ visx / drag y @ visx / zoom.
▍¿Qué puede hacer visx que no pueda hacer D3?
Muchos paquetes no tienen ninguna relación con D3, abstraen las soluciones a los problemas comunes que enfrentamos al crear diseños de diseño en React que reproducen diseños con precisión de píxeles. Muchas de estas herramientas abstraen y simplifican problemas complejos de tamaño de objetos y simplifican la API de SVG. Aquí hay unos ejemplos.
@ visx / información sobre herramientas
Aquí tienes un ejemplo interactivo.
Información sobre herramientas La información sobre
herramientas es un elemento que se utiliza a menudo en proyectos web. Pero realizar todas las microinteracciones con dichos elementos no es tarea fácil. El paquete @ visx / tooltip abstrae la gestión del estado de la información sobre herramientas. Ayuda a gestionar su contenido, sus coordenadas, mostrándolo y ocultándolo. Esto se hace usando React hooks (useTooltip) y usando un componente de orden superior (withTooltip). El uso del paquete @ visx / tooltip también facilita la resolución de tareas relacionadas con la representación de información sobre herramientas, como el posicionamiento automático (como resultado, el contenedor no recorta la información sobre herramientas) y la representación opcional dentro del portal.para solucionar problemas de superposición contextual
@ visx / texto
Puede encontrar un ejemplo interactivo aquí .
Trabajar con texto
en SVG 1.1. No hay posibilidades de trabajar con texto de varias líneas, similares a las de HTML, donde, por ejemplo, puede implementar fácilmente, utilizando CSS, la representación de varias líneas de textos largos. La implementación de tales mecanismos en React (o incluso en JavaScript puro) generalmente requiere renderizar elementos DOM invisibles que se usan para medir el tamaño del texto y encontrar parámetros para dividir el texto en líneas. El paquete @ visx / text abstrae todas estas tareas y facilita la compatibilidad con textos largos en visualizaciones.
@ visx / receptivo
Aquí tienes un ejemplo interactivo.
Aplicación web receptiva Las aplicaciones
web receptivas son fáciles de crear utilizando HTML. Si los diagramas se crean basándose en gráficos SVG y las capacidades del elemento de lienzo, entonces se deben tomar medidas de precisión de píxeles para que respondan, lo cual no es tan fácil en React. El paquete @ visx / responsive proporciona al desarrollador muchas herramientas auxiliares que facilitan la obtención de las dimensiones en píxeles de los elementos para que pueda crear fácilmente gráficos receptivos.
@ visx / gradiente, @ visx / patrón
Aquí tienes un ejemplo interactivo.
Degradados y patrones
Los degradados de color y los patrones de relleno mejoran enormemente las capacidades de quienes diseñan gráficos. Estos efectos gráficos crean imágenes llamativas que se destacan del fondo. Pero describir esas imágenes con SVG requiere mucho código y puede ser una tarea abrumadora. Los paquetes @ visx / gradient y @ visx / pattern simplifican enormemente la sintaxis para declarar los estilos apropiados, lo que permite a cualquiera crear bonitos diagramas.
▍¿Qué se puede crear usando visx?
Hemos estado usando visx durante los últimos 2.5 años, usando esta colección de elementos en docenas de herramientas de datos internos y en airbnb.com.
Visualizaciones creadas usando visx
La figura anterior muestra ejemplos de lo que creamos usando visx. Estos son, si va en el sentido de las agujas del reloj, comenzando desde la esquina superior izquierda, los siguientes proyectos: diagrama de Gantt con dependencias, diagrama circular de organización, diagrama radial, informe de métricas comerciales, descripción general de la interacción del servicio.
También usamos visx para crear una biblioteca de alto nivel para crear diagramas reutilizables. Esto nos permitió reducir la cantidad de código repetitivo al generar elementos gráficos simples.
Visx es una colección de elementos de bajo nivel. Está diseñado para la creación de sistemas de nivel superior sobre su base. Debería usarse para crear sus propias bibliotecas de alto nivel y para crear visualizaciones personalizadas para aplicaciones web.
▍Visx parece interesante, pero ¿y si realmente me gusta D3?
¡A nosotros también nos encanta D3!
▍¿Cómo se está desarrollando Visx?
Durante 3 años de trabajo en visx, hemos desarrollado esta colección de primitivas en las siguientes tres direcciones:
- . , visx, - Airbnb, ( — , , ) , ( , ). , , , , , .
- . , visx, , , . , vx, . visx, blocks.org, CodeSandbox, , , visx.
- . visx JavaScript-, TypeScript. . TypeScript — - Airbnb. , TypeScript, — ts-migrate. , , visx . , Happo, visx, .
La documentación de visx utiliza ejemplos al estilo de blocks.org con los que puede experimentar en la plataforma CodeSandbox. Todos los ejemplos están estrechamente relacionados con los paquetes de colección correspondientes
¿Ha utilizado visx?