我們開源了一個輕量的 Web IDE UI 框架

Molecule

---

一個輕量的 Web IDE UI 框架

簡介

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 架構解耦，在保持業務高速迭代的同時，產品交互體驗依然保持良好的可持續進化能力。

動機

數棧（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 UI。基於一個簡單的擴展（Extension），如 Workbench、ColorTheme、QuickAccess、Keybinding、i18n、Settings 等等功能，通過 Molecule 內置的服務，可以輕松的使用和擴展。

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

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

如何使用?

請閱讀快速開始文檔。‣

接下來的規划

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