- . , visx . , .
- , . visx, , CSS-in-JS-. , React- , , , , , . Visx, , . , .
- Esta não é uma coleção de itens "aprimorados" para a criação de gráficos. Se você usar primitivas de visualização para criar gráficos, eventualmente criará sua própria biblioteca que resolve este problema. Além disso, será uma biblioteca otimizada para suas necessidades. Ela estará sob seu controle total.
A força mais importante do visx é que ele é essencialmente um conjunto regular de componentes React. Saber como trabalhar com a biblioteca React significa que você pode usar o visx para criar visualizações. Ele usa APIs padrão e padrões familiares aos desenvolvedores do React. Em qualquer projeto React, visx deve se sentir em casa. Estamos muito interessados em dar uma olhada no que você cria com o visx!
Desafio: visualização de dados no desenvolvimento front-end
A visualização de dados é necessária para especialistas de várias áreas. Por isso, é necessária a existência de frameworks para a criação de elementos gráficos. Essas estruturas que são capazes de resolver os problemas dessas pessoas. O tipo que essas pessoas podem realmente dominar.
Um desses grupos são os desenvolvedores de front-end que precisam criar visualizações de dados para projetos da web constantemente. Existem inúmeras bibliotecas e estruturas excelentes para a criação de gráficos para a web. De D3 , Highcharts , Plotly , Echarts , Victory , G2 , Recharts , react -vis , vega ,vega-lite , a semiótica e outros projetos semelhantes. Apesar dessa diversidade, analisamos mais de uma dúzia de bibliotecas existentes e consideramos usá-las no Airbnb e descobrimos que a maioria delas tem deficiências em pelo menos uma das três áreas importantes para nossos desenvolvedores front-end:
- ( ?). - . API D3 vega. , -.
- ( , ?). , ? ( — airbnb.com), . ? .
- . -, , -, , airbnb.com, . , , , , , .
Notou-se que muitas vezes existe uma relação direta entre a expressividade das ferramentas de visualização de dados e a capacidade de explorá-las rapidamente. Quanto melhor uma dessas características, pior pode ser a outra. Tudo isso nos levou à questão de como criar uma biblioteca que possa ser explorada rapidamente, uma biblioteca que seja expressiva o suficiente e, ao mesmo tempo, de alto desempenho. A resposta a esta pergunta consiste em uma palavra: "Reaja".
Solução: primitivos visuais de baixo nível baseados em React
Nos últimos anos, a biblioteca React se tornou a principal fonte de desenvolvimento da web. Em parte, isso se deve ao fato de que ele tem APIs declarativas que ajudam a escrever um código limpo e legível que é fácil de manter. Esta biblioteca é familiar para muitos desenvolvedores front-end, há muito material disponível sobre como otimizar o desempenho de aplicativos React. Baseamos o projeto no React e no ecossistema desta biblioteca, o que significa que o tornamos fácil de aprender e produtivo. A implementação de uma API modular de baixo nível nele se tornou a chave para sua expressividade.
Quando falamos sobre essa visão desse projeto, geralmente nos fazem duas perguntas.
Aqui está o primeiro: "Por que não usar apenas a D3, uma biblioteca muito expressiva em aplicativos React?"
A questão é que você pode fazer isso. Mas, uma vez que D3 e React desejam manipular sozinho o DOM, descobrimos que é melhor quando D3 é usado puramente para computação e React para DOM. Caso contrário, dois modelos mentais competindo para atualizar o DOM abrem a porta para que bugs se infiltrem no projeto. Mas usar D3 apenas para cálculos significa que uma grande parte da funcionalidade desta biblioteca (aquelas relacionadas ao DOM) não será usada. Trata-se de seleção , junção , zoom , arrastar , pincel e transições... Além disso, como mencionado, D3 leva algum tempo para dominar. E gostaríamos que os desenvolvedores sentissem que estão escrevendo código React nativo ao fazer a visualização de dados que usa APIs padrão e padrões familiares.
Aqui está a segunda pergunta: por que não usar apenas uma das muitas bibliotecas de renderização construídas para o React?
Nossa pesquisa (os resultados são apresentados na figura a seguir) mostrou que as bibliotecas React existentes para visualização de dados geralmente são abstrações de alto nível e são otimizadas para facilidade de uso (ou seja, focadas na redução da quantidade de código necessária para usá-las). Isso é feito em detrimento de sua expressividade. Nenhum deles oferece ao desenvolvedor a expressividade das primitivas D3, e muitos não permitem as otimizações que precisamos para projetos de produção, uma vez que computação, animação, gerenciamento de estado, estilos e renderização estão intimamente relacionados entre si.
- , , . visx , React-
Ao analisar o espaço do problema apresentado na figura anterior, você pode ver claramente a oportunidade para o desenvolvimento bem-sucedido de uma biblioteca React com um alto nível de expressividade. Ao criar primitivas de renderização de baixo nível que foram projetadas desde o início para usar APIs React comuns, esperávamos poder criar uma biblioteca fácil de aprender, expressiva e de alto desempenho. Achamos que tal biblioteca seria útil para qualquer desenvolvedor front-end. Assim nasceu o projeto visx.
Detalhes sobre visx
A coleção de componentes visx (anteriormente conhecida como vx) esconde as palavras "componentes de visualização" em seu nome. Ele consiste em mais de 30 pacotes separados contendo primitivos de visualização de dados React, divididos em várias categorias (veja a figura a seguir). Quem quer que use essas primitivas não é forçado a algum tipo de esquema de gerenciamento de estado de aplicativo. O desenvolvedor pode escolher a abordagem de animação de elementos e seu estilo. Tudo isso significa que as primitivas visx podem ser integradas a qualquer base de código baseada em React. E o fato de que ao criar visx, uma ênfase foi colocada na modularidade (isso torna visx semelhante ao D3) permite que você crie pacotes de aplicativos de um tamanho compacto, incluindo em sua composição apenas o que é necessário para implementar sua própria biblioteca para visualização de dados, destinada ao uso reutilizável, ou então ,o que é necessário para formar uma programação única que existe em uma única cópia.
Visx é uma coleção modular de mais de 30 pacotes que tratam de tarefas comuns de visualização de dados em aplicativos React.
Perguntas e respostas
▍Como o D3 é usado no Visx?
Vários dos pacotes incluídos com visx usam D3 para realizar vários cálculos, como a colocação de elementos nas páginas. Eles duplicam funcionalmente os pacotes D3 que usam, equipando-os com APIs React declarativas. Exemplos de tais pacotes incluem @ visx / axis, @ visx / geo, @ visx / hierarchy e @ visx / shape. Outros pacotes substituem a funcionalidade de gerenciamento DOM do D3 e fornecem ao desenvolvedor primitivos React para interagir com os elementos. Estes são, por exemplo, @ visx / brush, @ visx / drag e @ visx / zoom.
▍O que Visx pode fazer que D3 não pode?
Muitos pacotes são completamente alheios ao D3, eles abstraem as soluções para problemas comuns que enfrentamos ao criar layouts de design no React que reproduzem layouts com precisão de pixel. Muitas dessas ferramentas abstraem e simplificam problemas complexos de dimensionamento de objetos e simplificam a API SVG. Aqui estão alguns exemplos.
@ visx / tooltip
Aqui está um exemplo interativo.
Dicas de
ferramentas As dicas de ferramentas são um elemento frequentemente usado em projetos da web. Mas perceber todas as microinterações com tais elementos não é uma tarefa fácil. O pacote @ visx / tooltip abstrai o gerenciamento de estado de dicas de ferramentas. Ajuda a administrar seu conteúdo, suas coordenadas, mostrando e escondendo. Isso é feito usando ganchos React (useTooltip) e usando um componente de ordem superior (withTooltip). Usar o pacote @ visx / tooltip também simplifica as tarefas relacionadas à renderização de dicas de ferramentas, como posicionamento automático (como resultado, a dica de ferramenta não é cortada por seu contêiner) e como renderização opcional dentro do portal.para solucionar problemas de sobreposição de atalhos
@ visx / text
Um exemplo interativo pode ser encontrado aqui .
Trabalhando com texto
em SVG 1.1. não há possibilidades de trabalhar com texto multilinhas, semelhantes aos do HTML, onde, por exemplo, você pode facilmente, usando CSS, implementar uma representação multilinha de textos longos. A implementação de tais mecanismos com React (ou mesmo JavaScript puro) geralmente requer a renderização de elementos DOM invisíveis usados para medir o tamanho do texto e encontrar parâmetros para quebrar o texto em linhas. O pacote @ visx / text abstrai todas essas tarefas e torna mais fácil suportar textos longos em visualizações.
@ visx / responsive
Aqui está um exemplo interativo.
Aplicativo da Web responsivo Os aplicativos da
web responsivos são fáceis de criar usando HTML. Se os diagramas forem criados com base em gráficos SVG e nos recursos do elemento canvas, então medidas de precisão de pixel devem ser tomadas para torná-los responsivos, o que não é tão fácil no React. O pacote @ visx / responsive fornece ao desenvolvedor muitas ferramentas auxiliares que facilitam a obtenção das dimensões em pixels dos elementos para que você possa criar facilmente gráficos responsivos.
@ visx / gradiente, @ visx / padrão
Aqui está um exemplo interativo.
Gradientes e padrões Gradientes de
cores e preenchimentos de padrões aumentam muito as capacidades de quem projeta gráficos. Esses efeitos gráficos permitem que você crie imagens atraentes que se destacam do fundo. Mas descrever essas imagens com SVG é muito código e pode ser uma tarefa assustadora. Os pacotes @ visx / gradient e @ visx / pattern simplificam muito a sintaxe para declarar os estilos apropriados, permitindo que qualquer pessoa crie diagramas bonitos.
▍O que pode ser criado usando visx?
Temos usado visx nos últimos 2,5 anos, usando essa coleção de itens em dezenas de ferramentas de dados internas e no airbnb.com.
Visualizações criadas usando visx
A figura anterior mostra exemplos do que criamos usando visx. Se você for no sentido horário, começando do canto superior esquerdo, os seguintes projetos: gráfico de Gantt com dependências, gráfico de pizza da organização, gráfico radial, relatório de métricas de negócios, visão geral da interação de serviço.
Também usamos visx para criar uma biblioteca de alto nível para a criação de diagramas reutilizáveis. Isso nos permitiu reduzir a quantidade de código clichê ao gerar elementos gráficos simples.
Visx é uma coleção de elementos de baixo nível. Ele é projetado para a criação de sistemas de nível superior em sua base. Deve ser usado para criar suas próprias bibliotecas de alto nível e para criar visualizações personalizadas para aplicativos da web.
▍Visx parece interessante, mas e se eu realmente gostar do D3?
Nós amamos o D3 também!
▍Como o Visx está se desenvolvendo?
Por 3 anos de trabalho no visx, desenvolvemos esta coleção de primitivas nas seguintes três direções:
- . , visx, - Airbnb, ( — , , ) , ( , ). , , , , , .
- . , visx, , , . , vx, . visx, blocks.org, CodeSandbox, , , visx.
- . visx JavaScript-, TypeScript. . TypeScript — - Airbnb. , TypeScript, — ts-migrate. , , visx . , Happo, visx, .
A documentação do visx usa exemplos do estilo blocks.org que você pode experimentar na plataforma CodeSandbox. Todos os exemplos estão intimamente relacionados com os pacotes de coleção correspondentes.Você
usou visx?