Molecule ， 一個輕量的 Web IDE UI 框架

https://github.com/DTStack/molecule?github.com/DTStack/molecule

簡介

Molecule?是一個受?VS Code?啟發，使用?React.js?構建的?Web IDE UI?框架。通過一種類似 VS Code 擴展機制（Extension），可快速、輕松搭建一個高度抽象的?Web IDE UI?系統。同時基于 Monaco Editor，內置集成了 QuickAccess 和 Keybinding 等功能，并提供了簡單的 API 以供使用。

得益于擴展機制和?React 組件化技術，Molecule 可以針對例如?Workbench UI、?ColorTheme?、自定義熱鍵、快捷訪問等功能進行自定義擴展。另外，開發者可將業務代碼和 IDE UI 架構解耦，在保持業務高速迭代的同時，產品交互體驗依然保持良好的可持續進化能力。

自定義 Workbench

動機

數棧（DTInsight）?中例如離線、實時任務開發，算法開發等產品，它們的直接使用人員大部分都是開發者，需要在 Web 上完成代碼編寫，調試等工作。所以，我們也希望給開發人員創造一個良好的在線 IDE 開發體驗。

早期的數棧開發平臺

上圖中的 RD-OS 是我們數棧開發平臺早期的版本，當時產品功能本身比較簡單。前端在初期的實現上，基于 React + Ant Design + Codemirror 來搭建的整個 IDE UI 界面。另外，由于當時我們多個產品都有這個 Workbench 的場景，我們還抽象了一個簡單且單純 的 IDE Workbench UI 的 React 組件，以供其他產品復用。

當前的 Web IDE 版本

隨著業務發展，產品不斷的迭代，整個頁面的功能也變得十分密集和復雜。產品布局、視覺、交互等一直在更新和變化，上圖已經是我們最新的版本設計。然而，在面對這些新的交互、視覺上的訴求時，早期簡單堆疊的技術架構就會顯得有些捉襟見肘了。設計師新出的方案，由于改造成本很高，比較難以實施。

大約 2019 年左右，團隊和產品交流了市面上做的比較好的 Web IDE 產品，如?Cloud9 IDE、VS Code、Eclipse Theia?等。這些產品都有非常好的 UI 抽象，擴展性很好，定制主題等功能也比較方便。但是這些產品功能比較完整的 IDE，應用到我們產品，就顯得有點重，而且對團隊技術挑戰較大，最重要的是技術遷移成本也比較高，自定義 UI 也不夠靈活。

基于這些問題的考慮，團隊試圖尋找出一種平衡方案。我們希望這個方案有很好的?UI 抽象便于新增功能、UI 可自定義、定制 ColorTheme 簡單、React 項目無縫銜接，讓產品交互有比較方便的持續進化能力。在對 VS Code 源碼研究了一番之后，我們便萌生了 Molecule 這個項目的想法。

核心功能

我們參考了 VS Code 的設計，對 UI 抽象、編輯器、顏色主題等等重新進行了梳理，Molecule 目前的核心功能如下：

• 內置 React 版本的 Visual Studio Code?Workbench?UI
• 基本兼容 Visual Studio Code 的?ColorTheme
• 支持使用 React 組件自定義?Workbench?UI 樣式
• 內置 Monaco Editor?Command Palette、Keybinding等模塊，并支持擴展
• 支持?i18n，內置簡體中文、English 等兩種語言
• 內置一個簡單的?Settings?模塊，支持在線編輯修改以及擴展
• 內置默認的?Explorer,?Search?等組件，并支持擴展
• Typescript

Workbench 布局

上圖是重新抽象的 Workbench UI。基于一個簡單的擴展（Extension），如?Workbench、ColorTheme、QuickAccess、Keybinding、i18n、Settings?等等功能，通過 Molecule 內置的服務，可以輕松的使用和擴展。

與其他開源的 Web IDE 的區別？

• React.js 應用無縫接入
• 基于 React.js 的組件庫，更好的?UI 自定義能力
• 基本兼容了 VS Code 上千種 ColorTheme 擴展
• Molecule 只是一個單純的?Web IDEUI 交互框架，不涉及例如文件系統、版本管理、?LSP、DAP、Terminal?等更復雜的 IDE 功能，需要開發者自己手動實現。

如何使用?

請閱讀快速開始文檔。

接下來的規劃

Molecule 當前還是一個?Beta?版本，很多 API 還不夠穩定。早期參考了一些 VS Code 的設計概念，API 設計不夠簡單；目前默認的 Workbench 是 VS Code 版本的布局，后期會考慮豐富布局（Layout）系統；Color Theme 交互還有很多細節需要優化。

總結

以上是生活随笔為你收集整理的我们开源了一个轻量的 Web IDE UI 框架 - Molecule的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。