Guia Jumei: LogicFlow nasceu da prática da equipe técnica da Didi no negócio de atendimento ao cliente. É uma estrutura front-end de visualização de processos desenvolvida pela plataforma inteligente de experiência intermediária da Didi. Ele fornece uma série de funções necessárias para a interação do fluxograma e edição E personalização flexível de nós, plug-ins e outros recursos de expansão, é conveniente para nós atender rapidamente às necessidades do editor de fluxograma de classe no sistema de negócios. Atualmente, o LogicFlow foi verificado nos requisitos de configuração de processos de diferentes usuários dentro e fora da empresa.
1.
fundo
Em primeiro lugar, a equipe técnica da plataforma inteligente de experiência de plataforma média da Didi quase suporta as demandas dos sistemas de atendimento ao cliente em todos os setores de negócios da Didi. Diante de diversos cenários de negócios e mudanças lógicas mais rápidas, a programação tradicional orientada a cenários é cara e demorada. muito tempo. Portanto, construímos um sistema operacional configurável on-line, para que os alunos de operações e produtos possam alterar a lógica de negócios on-line desenhando fluxogramas, como resposta de voz interativa quando os usuários ligam e atendimento manual ao cliente ao lidar com linhas de entrada do usuário. procedimentos, sistema de configuração de página H5 para que os usuários resolvam problemas sozinhos, etc.
Em segundo lugar, embora cada sistema empresarial precise aplicar tecnologia de visualização de processos, os requisitos são diferentes. Alguns têm requisitos relativamente simples para fluxogramas e o formato dos dados do gráfico também é simples, enquanto outros precisam desenhar fluxogramas de acordo com a especificação BPMN e têm requisitos mais elevados para personalização. Investigamos os frameworks relevantes no mercado (BPMN.js, X6, Jsplumb, editor G6), e há cenários insatisfatórios e o custo de unificação da pilha de tecnologia é muito alto. Especificamente em:
As capacidades de expansão de BMPN.js e Jsplumb são insuficientes e o custo do suporte a nós personalizados é alto, eles só podem ser importados na íntegra e cada sistema não pode ser importado sob demanda;
O custo de adaptação ao mecanismo de processo que suporta o back-end é relativamente alto. Nenhum deles oferece suporte a requisitos de personalização de negócios, como conversão de dados e verificação de processos;
Documentação, exemplos não são sólidos. A documentação do X6 e BPMN não é sólida e há poucos exemplos (conclusão da pesquisa no início de 2020).
Por isso, iniciamos o projeto LogicFlow no primeiro semestre de 2020 para dar suporte às necessidades de visualização de processos de cada sistema.
2.
Capacidades e recursos do LogicFlow
Quais recursos o LogicFlow possui atualmente? Vou apresentá-los em duas partes:
▍ 1. Crie rapidamente um editor de fluxograma
Fornece vários recursos necessários para editar um fluxograma, que também é o recurso básico do LogicFlow:
A capacidade de desenhar gráficos. Desenhe nós e linhas de várias formas com base em SVG e forneça nós básicos (retângulos, círculos, polígonos, etc.) e linhas (linhas retas, polilinhas, curvas);
Interação gráfica. Responda a vários eventos do mouse (passar, clicar, arrastar, etc.) de nós, linhas e gráficos. Como arrastar um nó, arrastar para criar uma conexão, ajustar uma linha, clicar duas vezes em um nó para editar o texto, etc.;
Capacidade de melhorar a eficiência da edição. Fornece grades, linhas de alinhamento, etapa anterior, próxima etapa, atalhos de teclado, aumento e redução de imagem e outros recursos de suporte para ajudar os usuários a melhorar a eficiência da edição;
API rica é fornecida. O host R&D completa a interação com o LogicFlow passando parâmetros pela API e ouvindo eventos.
Por meio dos recursos acima, a pesquisa e o desenvolvimento front-end podem criar rapidamente aplicativos de visualização de processos a baixo custo e fornecer interação suave com o produto. A seguir está um exemplo de fluxograma feito por meio de nós integrados e recursos de suporte do LogicFlow:
▍ 2. Expansão baseada em cenários de negócios
Quando os recursos básicos não conseguem atender às necessidades de negócios, eles precisam ser expandidos com base nos cenários de negócios. Esse também é o principal recurso do LogicFlow para oferecer suporte a vários sistemas no lado do atendimento ao cliente.
Define o estilo de todos os elementos do diagrama. Por exemplo, o tamanho e a cor de vários nós, linhas, pontos de ancoragem, setas e linhas de alinhamento, etc., para atender às necessidades de ajustes de estilo front-end;
Extensões de API. Suporta registro de métodos customizados no LogicFlow, como extensão do método de fornecimento de downloads de imagens por meio de expansão de API;
Nós personalizados, linhas. Nós gráficos integrados, como retângulos e círculos, muitas vezes não conseguem atender às necessidades reais do negócio, e nós com importância comercial precisam ser definidos. O LogicFlow fornece uma maneira para os usuários personalizarem nós com gráficos e dados de negócios personalizados, como o nó "Aprovação" no cenário de aprovação de processo;
Componentes de extensão. LogicFlow fornece uma camada HTML e uma série de lógica de transformação de coordenadas na camada SVG e suporta o registro de componentes na camada HTML. Host R&D pode desenvolver componentes baseados em qualquer estrutura View por meio da API LogicFlow, como o menu do botão direito do nó, o painel de controle, etc.;
Adaptador de conversão de dados. Os dados gráficos exportados pelo LogicFlow por padrão podem não ser adequados para todas as empresas. No momento, você pode usar a API do adaptador para fazer conversões personalizadas quando os dados gráficos são inseridos e gerados pelo LogicFlow, como a conversão para dados gráficos padrão BPMN ;
Capacidades de expansão parcial integradas. Com base nos recursos de expansão mencionados acima, também fornecemos um pacote de extensão separadamente, que é usado para armazenar nós e componentes comuns precipitados no negócio de atendimento ao cliente, como nós e adaptadores de dados orientados às especificações BPMN e menus padrão. Observe que as extensões podem ser instaladas separadamente e importadas sob demanda.
Com base nos recursos expandidos acima, a P&D front-end pode desenvolver com flexibilidade os nós, componentes necessários, etc., de acordo com as necessidades dos cenários de negócios reais. A seguir estão dois fluxogramas baseados nos recursos de expansão do LogicFlow:
BPMN
Processo de aprovação
▍ 3. Comparação de posicionamento
A figura acima compara vários frameworks de código aberto que são familiares a todos através de dimensões horizontais e verticais para entender o posicionamento do LogicFlow. O eixo horizontal é a riqueza dos recursos de visualização gráfica da estrutura. Quanto maior o eixo vertical, maior a maturidade da estrutura em aplicativos de processos de negócios e menor o custo de desenvolvimento para implantação inicial. Vamos apresentar essas estruturas separadamente:
Como mecanismo de fluxo de trabalho, o activiti fornece soluções front-end e back-end, e um conjunto de plataformas de gerenciamento de processos de negócios pode ser implantado com desenvolvimento secundário simples;
Bpmn.js: Um editor de fluxograma projetado com base na especificação BPMN2.0;
G6: antv foca na visualização gráfica e tabelas de análise diversas. Como árvore ecológica, mapa cerebral, mapa de radiação, mapa de indentação, etc.;
X6: Mecanismo de edição de gráficos, os principais recursos são nós, conexões e telas. Não apenas suporta fluxogramas, mas também diagramas Dag e diagramas ER.
LogicFlow está posicionado entre Bpmn.js e X6 na figura acima, preenchendo a lacuna no meio. O núcleo fornece um editor de fluxograma e suporta os nós de processo e formatos de dados exigidos pelo BPMN e outras especificações por meio de recursos de expansão para atender ao status atual do negócio.
3.
Princípio e arquitetura de implementação
▍ 1. Diagrama da estrutura geral
O pacote principal @logicflow/core fornece os recursos básicos do editor de fluxograma, e a @logicflow/extension à direita é um plug-in desenvolvido com base em @logicflow/core.
▍ 2. Esquema de design do editor de fluxograma
Apresente principalmente a importante seleção e design do esquema do editor de fluxograma:
2.1 Esquema de renderização de gráfico
Os gráficos de desenho front-end nada mais são do que três formas de HTML + CSS, Canvas e Svg. Fizemos uma comparação abrangente e listamos as vantagens e desvantagens correspondentes:
No cenário do fluxograma, não há necessidade de renderizar um grande número de nós (até vários milhares de elementos) e os requisitos para animação não são altos. Os recursos baseados em DOM do Svg serão mais adequados para nós. Uma é que o custo de aprendizado e desenvolvimento é menor e a outra é que há mais extensões baseadas em DOM. Porém, a tag Svg não suporta a inserção de outras tags como div, portanto, ao implementar determinadas funções, ela precisa ser combinada com outras tags HTML.
Então no final optamos por usar HTML + Svg para completar a renderização do gráfico.Svg é responsável pelos gráficos e linhas, e HTML é usado para implementar camadas como texto, menus e planos de fundo.
2.2 Abstração de módulo
Com base no esquema acima, a próxima etapa que precisamos realizar é classificar e abstrair a realização de um fluxograma.
Através da imagem acima:
Construímos múltiplas camadas para assumir diferentes responsabilidades e facilitar a expansão funcional e de capacidade. A camada superior é a camada Svg. Todos os gráficos (nós, linhas, linhas de alinhamento, outLine, etc.) são renderizados no Svg e também são responsáveis por ouvir vários eventos no gráfico. A camada inferior do Svg é a camada de componentes, que é responsável por expandir os componentes da UI; a camada Grid, que é responsável por renderizar a grade; a camada de fundo, que adiciona um plano de fundo personalizado;
A responsabilidade do Shape é baseada principalmente no encapsulamento de renderização gráfica do Svg, fornecendo estilos padrão, convertendo atributos passados pelos usuários, etc., incluindo principalmente Rect, Circle, Ellipse, Polygon, Path, PolyLine, Text, etc., para facilitar reutilização do LogicFlow.Por exemplo, tanto nós circulares quanto pontos de ancoragem requerem Círculo;
Com base no Shape, muitos pequenos elementos também são implementados, como os pontos de ancoragem necessários para nós e linhas, como setas na linha, etc.;
BaseNode e BaseEdge são o encapsulamento dos recursos gerais de nós e linhas, agregam formas, pontos de ancoragem, texto e também encapsulam o processamento de eventos e estilos. Herdando BaseNode e passando a forma, podemos obter nós renderizáveis, como RectNode e CircleNode.
Como o fluxograma é rico em interação ou reedição, com esses módulos básicos, a próxima coisa a fazer é rico em design de esquema de interação, ou seja, qualquer operação realizada pelo usuário no diagrama deve ser respondida. Por exemplo, se eu acionar o arrastamento de um nó, a linha associada pode precisar se mover de acordo, e também pode identificar se existem outros nós (linhas de alinhamento) em uma determinada linha horizontal.
2.3 MVVM + DOM virtual
Em primeiro lugar, consideramos que todo o editor de gráfico possui muito armazenamento de estado e, para perceber a resposta de cada módulo no gráfico de edição, ele deve ter capacidade de comunicação de estado. Segundo, se funções como refazer/desfazer forem realizadas, a imagem inteira deverá ser renderizada com base nos dados, ou seja, fn(state) => View, e a melhor maneira é conduzir a View através do Model.
Ao final, optou-se por construir o editor de grafos do LogicFlow baseado em MVVM, padrão de projeto amplamente utilizado na engenharia front-end atual, para definir as camadas View e Model do grafo, para que o código de engenharia tenha um certo grau de desacoplamento. Ao mesmo tempo, o Mobx é introduzido para realizar nossos recursos de gerenciamento de estado e resposta de dados, e um gráfico comunica o estado com base em um modelo. Além disso, outro motivo para considerar o Mobx é: pelo tempo que eu quiser, ele pode fazer a vinculação de dados mais refinada (observação), o que pode reduzir a renderização desnecessária.
Aqui está um diagrama MVVM do editor gráfico LogicFlow:
Como pode ser visto na figura acima, a camada View (gráfico, nó, etc.) responderá/atualizará após as alterações do modelo por meio da vinculação de dados. Mencionamos anteriormente que a renderização do gráfico é baseada em Svg + HTML, portanto a atualização da camada View nada mais é do que duas opções: imperativa e declarativa:
imperativo. Por exemplo, a API do jQuery, $('.rectNode').attrs({x: 1, y: 2}), é na verdade bastante complicada para operar o código DOM dessa maneira, e o código escrito em cenários de interação pesada será mais redundante. Embora finalmente tenhamos encontrado uma biblioteca que pode suportar convenientemente o desenho de maneira imperativa - antv/g.
Declarativo. Por exemplo, um dos principais recursos das estruturas View, como React/Vue, é atingir o estado => UI e construir o DOM de forma declarativa. Sempre que o estado mudar, a UI será atualizada.
Além de considerar a escrita complicada de código imperativo no cenário de operação do DOM, outro motivo é o custo da operação do DOM. No projeto de atualização da UI com base no estado, naturalmente pensamos em introduzir o Virtual DOM para resolver alguns problemas. A eficiência da atualização na cena também pode compensar os problemas de desempenho de renderização que podem ser causados até certo ponto pela "renderização de gráficos baseados em Svg".
Resumindo, as duas razões mais fundamentais para escolher o padrão de design MVVM e introduzir o Virtual DOM são:
Melhore a eficiência do desenvolvimento em nosso cenário de editor gráfico.
E sob o esquema de renderização de gráficos HTML + Svg, um melhor desempenho pode ser obtido.
Fizemos uma comparação de desempenho de renderização com o X6. No mesmo ambiente operacional, medimos o tempo que o LogicFlow e o X6 levaram para renderizar o fluxograma em nós/off-line de diferentes magnitudes. Teoricamente, quanto menor o tempo de renderização, melhor o desempenho. Comporte-se bem.
Através da tabela acima, calculamos que a velocidade de renderização inicial do LogicFlow é melhor que a do X6, e isso ainda não habilitou a função de carregamento sob demanda do LogicFlow, que também verificou nossa seleção de tecnologia. Você também pode testá-lo na página de exemplo:
https://yhlchao.github.io/LF-VS-Other/
2.4 Sistema de Eventos
Introduzimos o design que fizemos em "estado" e "resposta". Para coletar várias "operações" de usuários e reportá-las e borbulhá-las no tempo, é necessário um sistema de eventos. O mais importante é a multiplexação e os relatórios unificados.
Reutilizar refere-se a como garantir que todos os nós e linhas tenham retornos de chamada de eventos padrão e como compartilhar a lógica de processamento para eventos complexos (arrastar e soltar).
Comportamento. Para o processamento de eventos complexos, temos funções e classes empacotadas. Por exemplo, Drag usa mousemove, down e up para simular os eventos dragEnter, dragOver, dragEnd e drop de h5. DnD usa dragsource e droptarget abstratos Realize a interação entre arrastar e soltar, como arrastar e soltar para criar nós;
Conforme mencionado na seção de abstração do módulo acima, existem abstrações como BaseNode e BaseEdge internas.Tanto os nós integrados quanto os nós personalizados obtêm recursos comuns ao herdar a classe base, de modo que os retornos de chamada de evento padrão dentro do LogicFlow são na verdade reutilizados por meio de herança;
Centro de Eventos. O relatório unificado é feito através do barramento de eventos, e todos os eventos de comportamento do usuário capturados internamente são relatados ao EventCenter de acordo com uma determinada especificação e formato emit(ev, args) e, finalmente, transmitidos para a classe LogicFlow, que interage com o host em um maneira unificada. Além disso, os eventos podem ser acionados e monitorados através do EventCenter em qualquer lugar do editor de diagramas.
2.5 Centro de Ferramentas
O posicionamento da central de ferramentas são utilitários que resolvem determinados tipos de problemas específicos, como o já citado Behavior (encapsulamento de eventos complexos) e EventCenter. Além disso, no processo de edição de gráficos, para obter um melhor efeito interativo, há, na verdade, muita lógica de cálculo complexa a ser processada.
Sistema de coordenadas. Os sistemas de coordenadas clientX e clientY do navegador, bem como o sistema de coordenadas do próprio gráfico Svg, ao aplicar zoom e panorâmica do gráfico, os dois sistemas de coordenadas são diferentes e a conversão entre os dois sistemas de coordenadas é necessária durante o processamento de eventos.
Algoritmo. Dedica-se a tratar alguns problemas de visualização através de geometria e algoritmos. Por exemplo: quando um nó possui múltiplas polilinhas conectadas na mesma direção, como mesclar os caminhos para deixar a exibição mais bonita, da seguinte forma:
Como calcular o ponto tangente de uma reta a um gráfico, de modo a atingir a posição onde a reta pode se conectar ao ponto não âncora do gráfico, conforme mostra a figura abaixo:
História. Ele fornece principalmente recursos de refazer e desfazer. Duas pilhas são usadas para armazenar desfazer e refazer, e o comprimento máximo é limitado.Graças ao padrão de design MVVM, é conveniente observar alterações de dados e visualização orientada por modelo.
▍ 3. Escalabilidade
Depois de apresentar o esquema de design do editor de fluxograma, vamos apresentar outro recurso importante do LogicFlow, o design de escalabilidade. Para o LogicFlow, é uma estrutura de desenvolvimento para resolver problemas em uma determinada área. Primeiro, a API deve ser escalonável, além disso, o LogicFlow também fornece uma camada de visualização, que deve permitir aos usuários fazer desenvolvimento secundário na parte Visualizar. Depois de determinada a direção dessas duas expansões, o mais importante é combinar as necessidades do negócio para atender aos cenários de negócios atuais e futuros previstos para um período de tempo, mas sem projetar demais.
3.1 Design em API
Em primeiro lugar, a camada orientada ao usuário do LogicFlow é completamente encapsulada com base em padrões de design orientados a objetos. A maior vantagem é que quase todos os programadores estão familiarizados com seu uso e seu custo de uso é baixo. Você pode entender isso através do seguinte método de inicialização.
Através da classe LogicFlow, o usuário pode obter uma instância de um fluxograma após instanciá-lo uma vez, e o estado também é privado, e vários métodos de uso podem ser chamados através da instância de lf.
Um resumo do design das extensões de API:
Padrão de design orientado a objetos, empacotamento interno do LogicFlow, os usuários podem fazer herança, reescrever interface/método;
projeto de método. A primeira é ter tipos fixos de entrada e saída. Além disso, LogicFlow também fornece um método semelhante ao extends, que estende o método no protótipo por meio de LogicFlow.use(fn);
Comunicar-se através do modo observador, ou seja, fornecer o método on para o host assinar diversos eventos internos;
Os dados do gráfico podem ser personalizados. Não importa quais atributos de negócios customizados um nó ou linha tenha, ou que tipo de dados exportar do fluxograma, eles devem poder ser customizados.
3.2 Plug-ins
A escalabilidade da camada View, além da capacidade dos usuários customizarem a apresentação, é o mais importante do plug-in, pois no caminho da visualização do processo, diferentes cenários de negócios exigem recursos diferentes, e é difícil para o LogicFlow para oferecer suporte a todos eles.Cenários, portanto, é a melhor escolha fornecer bons recursos de plug-in e plug-in e permitir que os usuários realizem desenvolvimento secundário. Atualmente, na interface UI, abrimos dois recursos:
Nós e linhas suportam desenvolvimento secundário, ou seja, nós e linhas customizadas.
Os componentes de UI desenvolvíveis são registrados na tela de componentes do LogicFlow.
Com base na ideia de plug-in, oferecemos suporte a diferentes sistemas de negócios e, no processo, precipitamos alguns recursos gerais e os encapsulamos no pacote lf-extension, como nós usados para suportar a especificação BPMN. Atualmente, as extensões da extensão são divididas principalmente em quatro categorias: componentes de UI, nós personalizados, APIs e adaptadores.
4.
plano futuro
A primeira é a facilidade e a riqueza da API. Além do nosso plano de iteração atual (veja o projeto no armazém do github para obter detalhes), o escopo da função específica será adicionado após a priorização de acordo com as necessidades dos usuários. Também esperamos que você possa fornecer mais comentários e necessidades. A tônica dessa direção é manter o posicionamento visual do processo LogicFlow, enriquecer a API do núcleo e aprimorar os recursos da extensão.
Em segundo lugar está uma melhor documentação e exemplos. O principal motivo é que a documentação é fácil de ler e completar, e há exemplos e códigos completos para os desenvolvedores copiarem e colarem o código.Atualmente, os exemplos são apenas a versão react, e os exemplos da versão vue serão adicionados antes de 2021.4.
Por fim, não se trata apenas de uma biblioteca de visualização de processos, mas também se espera um conjunto completo de soluções. O LogicFlow resolve apenas os problemas técnicos de edição de fluxogramas front-end, mas em relação à definição dos dados do gráfico e como o processo é finalmente executado, é necessário um mecanismo de processo de suporte.
Atualmente, nossa equipe também possui uma solução correspondente para o "motor de processo" - turbo (a versão Java é de código aberto: https://github.com/didi/turbo), faremos do LogicFlow e do turbo um fim a solução final e forneça um exemplo completo de aplicação. Além disso, a versão Nodejs do motor também está planejada, vamos esperar para ver.
5.
escreva no final
Através deste artigo, acredito que você já tenha um conhecimento geral do LogicFlow. Se você também possui demandas de visualização de processos em seu negócio e possui requisitos de alta escalabilidade, então o LogicFlow será uma boa escolha. Você também está convidado a se comunicar conosco sobre os detalhes de implementação da própria tecnologia LogicFlow e discussões sobre negócios semelhantes. Teremos mais artigos no futuro para apresentar os detalhes do projeto técnico do LogicFlow e algumas de nossas idéias sobre visualização, processos de negócios, arranjo lógico e outros campos.
Site oficial do LogicFlow: http://logic-flow.org/
Endereço do armazém do GitHub: https://github.com/didi/LogicFlow
equipe de código aberto
▬
leitura adicional
▬
内容编辑 | Mango联系我们 | [email protected]