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

袋鼠雲數棧前端發表於2021-12-21
WebIDEUI框架

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 互動還有很多細節需要優化。

相關文章