分享一個阿里雲輕量級開源前端圖編排，流程圖js組件——butterfly-dag

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"背景"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 在阿里雲，可能每時每刻都在身邊充斥着“數據表”“模型”“調度”等等抽象概念。作爲阿里雲的前端，如何將這種抽象的概念實體化可視化地給客戶或者其他合作伙伴展示出來顯得尤爲重要。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 與此同時，在阿里雲數據智能產品的孵化速度和迭代速度大大超乎大家的想象，總結起來就是“人少事多繁瑣”，經常出現拉幾個外包就開始孵化一箇中臺項目，此時，集團內各種搭建系統能緩解一部分的工作量，可是當遇到了可視化“編排”，“流程圖”，“關係圖”這種場景，就顯得捉襟見肘了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"通過盤點在不同業務支持過的此類場景，總結DAG面臨以下痛點："}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"產品業務邏輯複雜，且形態差異大"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"樣式豐富，交互複雜且有較高視覺質量訴求"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"定製性要求高，開發速度要求快"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"解決方案"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/alibaba/butterfly","title":""},"content":[{"type":"text","text":"小蝴蝶(https://github.com/alibaba/butterfly)"}]},{"type":"text","text":"脫胎於阿里雲數據智能事業部實際的業務場景，在覆蓋了我們業務需求的情況下，同時支持了多個兄弟部門抽象出來的前端圖組件庫，其特性如下："}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“零件式開發”，定製性強，入門門檻低：利用了DOM的便利性，提供非常強大的樣式定製和複雜的交互定製的能力"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/58/5833b1ced1e72ba5047bd40cc61ba3fd.png","alt":"技術架構備份 2.png","title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"// 繼承式的定製\nconst Node = require('butterfly-dag').Node;\nclass ANode extends Node {\n draw(obj) {\n // \"零件式\"開發，把最終的dom返回給我即可\n }\n // 隨意自己拓展方法 \n}\n\ncanvas.draw({\n nodes: [{\n id: 'xxxx',\n top: 100,\n left: 100,\n Class: ANode //設置基類之後，畫布會根據自定義的類來渲染\n }]\n})"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"畫布常規功能一應俱全，如：Minmap、網格系統、對齊線、框選、redo/undo、畫布縮放和平移、線段動畫、自動佈局等等。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更細膩更人性化的交互，後續我們將花更多的精力聚焦更智能的交互："}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":" 1. 聚焦部分節點 & 聚焦畫布 "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a2/a24000ac06c6bc667cf8927bec078480.gif","alt":"test5.gif","title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"2. 框選更智能化。控制框選交互：觸碰即選中或者是完全包含才選中；控制可選元素：錨點，節點，線段"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/10/10b4cc3ec8bbd08e11deb5c3f7684ccb.gif","alt":"test1.gif","title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"!"},{"type":"link","attrs":{"href":"https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdGEyLWltZy5vc3MtY24temhhbmdqaWFrb3UuYWxpeXVuY3MuY29tLzE2M2NhYWYzY2RmOTZlMDFlZGUwYjZiYjZhNzQwMjA0LmdpZg","title":""},"content":[{"type":"text","text":"test2.gif"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ea/eaadee9c53f4555a0e606abcb0253d89.gif","alt":"test3.gif","title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"!"},{"type":"link","attrs":{"href":"https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdGEyLWltZy5vc3MtY24temhhbmdqaWFrb3UuYWxpeXVuY3MuY29tLzU3MGEyMTNhMDM4ZDZhOGEwYmQzNjg3OTQ4YzY4NWU1LmdpZg","title":""},"content":[{"type":"text","text":"test4.gif"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"3. 拖動邊緣處的處理"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/47/47125766ce56190dbb2518d4a7657aab.gif","alt":"test5.gif","title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"4. 成組的優化"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/76/76f9ed4c18c2e63250a26b5b51e0ae37.gif","alt":"test6.gif","title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"性能問題"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 曾經很多人都質疑我們，小蝴蝶使用DOM，那性能不會很差麼？咱們小蝴蝶專注於流程圖，爲了確保我們業務的完整性和清晰度，我們的定位是：10000個節點爲性能的極限，因爲超過了10000個節點，整個業務流程會變得混亂不堪。與此同時，我們做了非常多的性能優化的工作："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - 分層渲染。各層互不影響，並且確保渲染達到更細的粒度"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/09/090b765f7889679e75f48c6163b9e923.png","alt":"FF026125-11AF-4AB0-BFD5-324A7E4B68B4.png","title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - 首屏逐步渲染。確保畫布的首次展示能接近Canvas的渲染速度"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/dc/dcd3da4bce90e543d4e640e0251ce06d.png","alt":"21D2B681-FE82-47BC-8B6B-F897A5FD4DF3.png","title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - 局部渲染。確保每各元素的每次更改都是最小粒度地渲染，不會觸發大面積地重新渲染"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - 批量操作。把畫布內所有元素增刪查改都是優化爲批量操作，確保儘可能少地操作DOM"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"合作共建"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 我們經常被問到小蝴蝶和G6有什麼關係？我們和AntV-G6推出的時間差不多，可謂亦師亦友，競爭共建，大家都是爲了共同推進這個領域的發展而努力。我們經常和@聚則 交流溝通，爲了減少重複建設，我們初步制定了第一階段的計劃，也在努力推進中："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/15/1551125ea3f59883b6af8181b9e2c576.png","alt":"2654CF2A-9C44-4005-8785-5E032B4C1EE5.png","title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 針對第二階段的合作共建，我們最近不斷在思考，小蝴蝶勝在定製性比較好上手簡單但性能上不能支持1w以上的節點，G6渲染引擎是Canvas性能是比較優秀但是定製性有所欠缺入門門檻也會相對高一點。我們能不能把兩者優點結合下，取其精華，去其糟粕。我們的構想是："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - "},{"type":"text","marks":[{"type":"italic"}],"text":"第一層"},{"type":"text","text":"： 當鼠標浮動上面需要編輯的時候，對應的某個節點會出現在DOM層，把Canvas相應的節點覆蓋着"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - "},{"type":"text","marks":[{"type":"italic"}],"text":"第二層"},{"type":"text","text":"： 當不需要編輯的時候，Canvas作爲真正的渲染引擎"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - "},{"type":"text","marks":[{"type":"italic"}],"text":"第三層"},{"type":"text","text":"： 背景和框選等操作層爲不常變化層"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1e/1ee0660a68e446c852463b10f73fec74.png","alt":"技術架構.png","title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 這塊我們已經在積極調研中了，期間我們發現在Html to Canvas的時候會損失了一部分CSS的特性，但這部分特性可以由Canvas來補救。希望在這年度能突破這個難關，真正能把DOM和Canvas融合起來，把性能和定製發揮到極致，幫助更多的有需要的同學."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"未來的規劃"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 感謝阿里雲設計中心，DataV的兄弟們和其他貢獻者 這三年來的添磚加瓦 ，這個年度我們會更加努力增強小蝴蝶底層的能力，豐富小蝴蝶的生態，爲打造“零”代碼的圖編排而努力。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"結語"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 我們已經積累支持了30+個業務，沉澱了100+個節點樣式，不久的將來會開放給小夥伴使用，到時候大家可以像“iconfont”式都組合拼湊，能大大降低了大家的開發時間。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 三年磨一劍，希望小蝴蝶能爲你提供一份助力。小蝴蝶堅持開源了三年，您的star是我們的動力：https://github.com/alibaba/butterfly ，謝謝大家！也同時歡迎有興趣的兄弟們一起來添磚加瓦。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}