在阿里云,可能每时每刻都在身边充斥着“数据表”“模型”“调度”等等抽象概念。作为阿里云的前端,如何将这种抽象的概念实体化可视化地给客户或者其他合作伙伴展示出来显得尤为重要。
与此同时,在阿里云数据智能产品的孵化速度和迭代速度大大超乎大家的想象,总结起来就是“人少事多繁琐”,经常出现拉几个外包就开始孵化一个中台项目,此时,集团内各种搭建系统能缓解一部分的工作量,可是当遇到了可视化“编排”,“流程图”,“关系图”这种场景,就显得捉襟见肘了。
小蝴蝶( https://github.com/alibaba/butterfly)脱胎于阿里云数据智能事业部实际的业务场景,在覆盖了我们业务需求的情况下,同时支持了多个兄弟部门抽象出来的前端图组件库,其特性如下:
// 继承式的定制
const Node = require('butterfly-dag').Node;
class ANode extends Node {
draw(obj) {
// "零件式"开发,把最终的 dom 返回给我即可
}
// 随意自己拓展方法
}
canvas.draw({
nodes: [{
id: 'xxxx',
top: 100,
left: 100,
Class: ANode //设置基类之后,画布会根据自定义的类来渲染
}]
})
曾经很多人都质疑我们,小蝴蝶使用 DOM,那性能不会很差么?咱们小蝴蝶专注于流程图,为了确保我们业务的完整性和清晰度,我们的定位是:10000 个节点为性能的极限,因为超过了 10000 个节点,整个业务流程会变得混乱不堪。与此同时,我们做了非常多的性能优化的工作:
我们经常被问到小蝴蝶和 G6 有什么关系?我们和 AntV-G6 推出的时间差不多,可谓亦师亦友,竞争共建,大家都是为了共同推进这个领域的发展而努力。我们经常和 @聚则 交流沟通,为了减少重复建设,我们初步制定了第一阶段的计划,也在努力推进中:
针对第二阶段的合作共建,我们最近不断在思考,小蝴蝶胜在定制性比较好上手简单但性能上不能支持 1w 以上的节点,G6 渲染引擎是 Canvas 性能是比较优秀但是定制性有所欠缺入门门槛也会相对高一点。我们能不能把两者优点结合下,取其精华,去其糟粕。我们的构想是:
这块我们已经在积极调研中了,期间我们发现在 Html to Canvas 的时候会损失了一部分 CSS 的特性,但这部分特性可以由 Canvas 来补救。希望在这年度能突破这个难关,真正能把 DOM 和 Canvas 融合起来,把性能和定制发挥到极致,帮助更多的有需要的同学.
感谢阿里云设计中心,DataV 的兄弟们和其他贡献者 这三年来的添砖加瓦 ,这个年度我们会更加努力增强小蝴蝶底层的能力,丰富小蝴蝶的生态,为打造“零”代码的图编排而努力。
我们已经积累支持了 30+个业务,沉淀了 100+个节点样式,不久的将来会开放给小伙伴使用,到时候大家可以像“iconfont”式都组合拼凑,能大大降低了大家的开发时间。 三年磨一剑,希望小蝴蝶能为你提供一份助力。小蝴蝶坚持开源了三年,您的 star 是我们的动力: https://github.com/alibaba/butterfly,谢谢大家!也同时欢迎有兴趣的兄弟们一起来添砖加瓦。
1
wampyl 2020-08-27 19:41:17 +08:00
前一段时间搜索到了,今天在 v2 碰巧看到,希望做好
|
2
haozhang 2020-08-28 06:57:42 +08:00 via Android
const {Node} = require('butterfly-dag');
用对象解构赋值多优雅。 |
3
kekedabaozha 2020-08-28 09:30:09 +08:00
有点像 UE4 的蓝图
|
4
noonnightstorm OP @kekedabaozha 咱们还做了类似 U4E 的编辑交互的产品,后续会打包开源
|
5
noonnightstorm OP @wampyl 谢谢,咱们一定会坚持的,准备在 9 月会出一个 dag 搭建平台,后续可以直接拖拉生成 dag 画布代码,而且可读性和官网的一致,到时候可以体验下哈~
|
6
cnlee 2020-08-28 09:57:05 +08:00
已 Star,这个必须支持一下,希望越做越好,💪
|
7
noonnightstorm OP @cnlee 感谢,一定会的
|
8
wampyl 2020-08-28 10:53:43 +08:00
是否考虑节点支持操作,比如点击节点后弹出操作面板
|
9
noonnightstorm OP @wampyl 这部分正在编写插件中,包括节点 /线段的 tips,右键菜单,弹出框等等都在支持着
|
10
overkazaf 2020-08-28 17:02:22 +08:00
DAG 判环和获取路径是否有 API?
|
11
noonnightstorm OP @overkazaf 这个正在支持
|