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框架，而我們相信開源之後，它會在提高廣大開發同仁工作效率，提升開發體驗的同時，也能在實際使用中暴露出它還可以繼續改良優化的問題。我們真誠歡迎同社群的朋友進行交流和探索，我們做分享，也在分享中不斷向強者學習。數棧惟願和社群的研發者共同進步，繁榮國內開源的生態圈