Keep It Simple, Stupid.

這是開發人耳熟能詳的 KISS 原則，也像是一句有調侃意味的善意提醒，提醒每個前端人，簡潔易懂的用戶體驗和刪繁就簡的搭建邏輯就是前端開發的至簡大道。

這也是袋鼠雲數棧前端開發團隊追求的目標。

數棧是一個專註一站式產品體系，覆蓋數據全鏈路開發流程，全面國產化相容，核心源碼自主可控的雲原生一站式大數據開發治理平臺。

2021年12月16日，基於數棧多年大數據開發經驗的基礎沉澱出的輕量級 Web IDE 組件庫，Molecule 開源。2022年2月22日，將Molecule 作為其中一個重要 UI 組件搭建出的分散式可視化的 DAG 任務調度系統——Taier，也緊鑼密鼓加入了開源社區。

在Taier經過數百家企業客戶的生產環境實戰檢驗之後的今天，我們想用今天這篇文章跟大家分享一些在 Taier 的搭建過程中時遇到的Molecule 與antd如何適配的解決經驗和它們在 Web IDE 開發中的實戰表現。

一、介紹

Taier 是數棧搭建的一個可視化 DAG 任務調度系統，其搭建初衷是為了讓大數據開發工程師可以將精力集中在業務邏輯的開發上，而不用被任務錯綜複雜的依賴關係捆住手腳。這一目標就要靠其中 Web IDE 的部分實現。
而在數棧平臺日積月累的迭代中沉澱而來的Molecule ，作為輕量級的 Web IDE UI 框架，能極大地減少搭建編輯器的時間，其具有的擴展（Extension）機制也使它可以輕易地應對各種需求增長。Molecule抽象自數棧產品中離線任務的線上編輯配置功能，同時反哺支撐了各個產品中都存在的線上編寫 SQL 代碼。Molecule在各方面的不俗表現使我們很快意識到，用Molecule來承擔Taier系統中的IDE組件角色幾乎是順理成章。

二、優勢

Molecule之前，前端苦Web IDE久矣。
Web IDE的開發從來是整個大數據平臺開發中非常繁複和笨重的一環，從零搭建一個 Web IDE 通常意味著大量的殫精竭慮和苦思冥想，時間成本更是不可計數。傳統的 IDE 框架熟悉門檻高，維護費用大，對維護人員的技術一直都有很高要求。數棧的研發團隊對此深有體會，我們開源的 Molecule 從最開始就對“開箱即用，維護方便”這個目標非常堅定，從開源以來它也在不斷完善，現在我們可以自信的說，Molecule 將 Web IDE UI 框架做到了輕量級，高延展，在不犧牲需求可能性的前提下極大地提升了前端開發體驗，是一套具備完整的解決方案的開發組件框架。

三、應用與實踐

將 Molecule 加入 Taier 的過程不是一帆風順的。為瞭解決 Taier 中需要開發 Web IDE 和大量傳統表單表格的問題，我們不得不同時引入 Ant Design 和 Molecule。

而一個前端項目里兩個組件庫同時使用立刻出現了樣式衝突的問題，Molecule的加入讓原本僅由antd參與的開發界面“破壞”得讓我們哭笑不得。我們不得不思考，將多個 UI 組件庫用於同一個前端項目，如何解決樣式風格衝突問題？不同的組件有不同的設計體系，不同體系間又該如何交互？經過無數次摸索實踐和不斷調整，我們找到瞭解決辦法：

3.1 如何解決風格衝突

首先，整體風格顏色的衝突可以通過自定義主題色來解決，而 Ant Design 和 Molecule 都具備通過配置的方式來實現修改整體主題色，如：

配置完上述屬性後，Ant Design 所有組件用到的主品牌色就被修改成了 #3f87ff 這個顏色。除此之外，我們還修改了其他一些樣式使 Ant Design 的整體風格更偏向 Molecule，如圓角屬性，超鏈接屬性等。

除了主題色的修改以外，還需要解決動態主題色的適配問題。Molecule 強大的功能之一就是可以基於自己的喜好切換不同的主題，例如：Dark Default 主題或 Light Default 主題。而 Molecule 可以方便地切換主題的原因簡單來說是基於 CSS 變數實現的。而目前 Ant Design 的動態主題功能仍處於實驗性的功能，故我們另闢蹊徑。通過 Molecule 提供的監聽主題色改變的事件，動態地載入不同主題風格的 Ant Design 樣式文件。如：

以上代碼的大致意思是，當 Molecule 的主題發生改變的時候，如果改變後的主題是暗黑主題，那麼我們就載入 Ant Design 的暗黑主題風格的樣式文件，否則我們移除 Ant Design 的暗黑風格主題樣式文件。

下麵兩張圖就是適配前和做完調整之後可以自由選擇的開發界面：

3.2 如何適配交互體系

在傳統的大數據平臺中，當我們修改某個任務並提交代碼後，我們需要跳轉頁面至任務管理或調度管理查看一些相關運行信息或調度信息。有時我們並不想離開當前的編輯頁面，同時又想進入調度管理頁面查看相關信息的時候，就不得不的來回切換頁面或打開新的頁面來回切換。
得益於 Molecule 提供的強大的擴展（extension）機制，我們可以在擴展中根據自身需求高度定製化頁面中任何可見或不可見的元素。例如在開發任務管理時，為瞭解決頁面之間來回切換跳轉的問題，我們通過將任務管理添加到 Molecule 的菜單欄中，並且監聽菜單欄的事件後打開 Ant Design 的抽屜組件渲染不同組件內容。

3.3 其他優化

除了可以對菜單欄自定義以外，我們還可以對任意區域自定義。例如在處理數據源中心的過程中，我們將數據源中心添加到了活動面板（ActivityBar）處，同時藉助 Molecule 提供的 API 將新增或編輯數據源視窗添加到 Molecule 的 IDE 區域。使得數據源中心同樣也不需要來回切換頁面，而是通過當前在頁面切換面板，打開 Tab 等方式進行修改。
除了上述提到菜單欄和活動面板以外，Molecule 支持對所見的所有區域均可自定義。具體細節可以通過 Molecule 的官方文檔進行查看。
在引入 Molecule 後，在 Taier 上的開發不再需要從零開始佈局，對單個組件進行一一搭建， 而是可以直接將不同的組件填充到對應的佈局區域中。Molecule 的加入極大地減少了前期的開發時長，同時將開發人員從組件的維護和代碼的底層邏輯清理中解放出來，能把精力集中到業務本身。
同時， Molecule 的 引入優化了 Taier 的交互方式，在不捨棄已有的 Ant Design 的前提下，數棧設法相容了 Molecule 的風格，提升了一站式大數據開發平臺的用戶體驗。

四、總結

數棧技術團隊一直相信開源文化的生命力。“人人為我，我為人人”的理想火種也一直在每個數棧開發人的心裡燃燒。數棧這個大家庭匯聚了一幫志同道合的戰友，將開源協同這種高能效，跨邊界的軟體開發模式從起步始，一直貫徹至今。我們對開源路線始終堅定的原因，除了數棧對技術優化的重視，也出於我們處為行業領先水平後，對社區責任感的充分意識，想盡自己綿薄微力，為整個軟體行業的技術水平提升添磚加瓦。
Molecule從我們的日常開發工作中沉澱而來，是一個“專用於一線開發人員實際開發場景”的UI框架，而我們相信開源之後，它會在提高廣大開發同仁工作效率，提升開發體驗的同時，也能在實際使用中暴露出它還可以繼續改良優化的問題。我們真誠歡迎同社區的朋友進行交流和探索，我們做分享，也在分享中不斷向強者學習。數棧惟願和社區的研發者共同進步，繁榮國內開源的生態圈