background
In Alibaba cloud, there may be abstract concepts such as “data table”, “model”, “scheduling” and so on. As the front-end of alicloud, how to materialize and visualize this abstract concept to customers or other partners is particularly important.
At the same time, the incubation speed and iteration speed of the intelligent business department of Alibaba cloud are much faster than you can imagine. To sum up, it is “less people, more tedious work”. It is often seen that one or two students start to hatch a project within two weeks. At this time, various building systems in the industry can alleviate part of the workload, but when it comes to visual “choreography” and “flow chart”“ In the scenario of “relationship diagram”, it seems that we are in short supply.
Through the inventory of such scenarios supported by different businesses, the following pain points of DAG are summarized:
- The product business logic is complex, and the form difference is big
- It has rich styles, complex interaction and high visual quality
- High customization and fast development speed are required
Solution
Little butterfly（ https://github.com/alibaba/butterfly )Based on the actual business scenario of the data intelligence business unit of Alibaba cloud, it supports the front-end diagram component library abstracted by several brother departments while covering our business requirements. Its features are as follows:
- “Part based development”, strong customization and low entry threshold: taking advantage of the convenience of DOM, it provides powerful style customization and complex interactive customization capabilities
//Inherited customization
const Node = require('butterfly-dag').Node;
class ANode extends Node {
draw(obj) {
//"Part type" development, return the final DOM to me
}
//Develop your own methods at will
}
canvas.draw({
nodes: [{
id: 'xxxx',
top: 100,
left: 100,
Class: anode // after setting the base class, the canvas will render according to the custom class
}]
})- The canvas has a wide range of general functions:Minmap, grid system, snap line, marquee, redo / undo, canvas zoom and pan, line animation, automatic layout, etc.
- More delicate and humanized interactionIn the future, we will focus more on Intelligent Interaction:
- Focus on some nodes & focus on canvas
- Box selection is more intelligent. Control box selection interaction: touch to select or select only when completely included; control optional elements: anchor, node, line segment
- Treatment at drag edge
- Group optimization
Performance issues
Many people once questioned us that the performance of little butterfly using DOM would not be very bad? Our little butterfly focuses on the flow chart. In order to ensure the integrity and clarity of our business, our positioning is: 10000 nodes are the performance limit, because more than 10000 nodes, the whole business process will become chaotic. At the same time, we have done a lot of performance optimization work:
- Render Elements 。 Each layer does not affect each other, and ensures that the rendering achieves finer granularity
- First screen rendering step by step。 Make sure that the first presentation of the canvas is close to the rendering speed of canvas
- Local rendering。 Make sure that every change to each element is rendered with minimal granularity and does not trigger a large re rendering
- Batch operation。 The addition, deletion, query and modification of all elements in the canvas are optimized to batch operation to ensure that DOM is operated as little as possible
Cooperation and co construction
We are often asked what does little butterfly have to do with G6? We and antv-g6 were launched at about the same time. We are both teachers and friends. We all work hard to promote the development of this field. We often communicate with @ juze. In order to reduce the duplication of construction, we have initially formulated the plan for the first stage, and we are also making efforts to promote:
In view of the second stage of cooperation and co construction, we have been thinking about it recently. Xiaodiesheng has better customization, but it can’t support more than 1W nodes in terms of performance. G6 rendering engine is canvas, which has excellent performance, but lacks customization. The entry threshold will be higher. Can we combine the advantages of both of them to extract the essence and remove the dross. Our idea is:
- A kind of First floor_ : when the mouse floats above and needs to be edited, a corresponding node will appear in the DOM layer, covering the corresponding node of canvas
- A kind of Second floor_ : canvas is the real rendering engine when no editing is needed
- A kind of The third layer_ Background and marquee operation layer is not constant change layer
We have been actively investigating this issue. During this period, we found that some CSS features will be lost when HTML to canvas, but this part of features can be remedied by canvas. It is hoped that this year we can break through this difficulty and really integrate Dom and canvasMaximize performance and customizationHelp more students in need
Future planning
Thanks to Alibaba cloud design center, the brothers of datav and other contributors for their contributions in the past three years, we will make more efforts to enhance the ability of the bottom layer of small butterflies, enrich the ecology of small butterflies, and make efforts to create “zero” code graph layout.
epilogue
We have accumulated and supported 20 + services and precipitated 100 + node styles. In the near future, it will be open to small partners for use. At that time, you can combine and put together like “iconfont”, which can greatly reduce your development time.
Three years of sharpening a sword, I hope little butterfly can provide you with a helping hand. Little butterfly has been open source for three years. Your star is our driving forcehttps://github.com/alibaba/butterflyThank you! At the same time, we also welcome interested brothers to join us.