Molecule ， 一個(gè)輕量的 Web IDE UI 框架

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

簡(jiǎn)介

Molecule?是一個(gè)受?VS Code?啟發(fā)，使用?React.js?構(gòu)建的?Web IDE UI?框架。通過(guò)一種類似 VS Code 擴(kuò)展機(jī)制（Extension），可快速、輕松搭建一個(gè)高度抽象的?Web IDE UI?系統(tǒng)。同時(shí)基于 Monaco Editor，內(nèi)置集成了 QuickAccess 和 Keybinding 等功能，并提供了簡(jiǎn)單的 API 以供使用。

得益于擴(kuò)展機(jī)制和?React 組件化技術(shù)，Molecule 可以針對(duì)例如?Workbench UI、?ColorTheme?、自定義熱鍵、快捷訪問(wèn)等功能進(jìn)行自定義擴(kuò)展。另外，開發(fā)者可將業(yè)務(wù)代碼和 IDE UI 架構(gòu)解耦，在保持業(yè)務(wù)高速迭代的同時(shí)，產(chǎn)品交互體驗(yàn)依然保持良好的可持續(xù)進(jìn)化能力。

自定義 Workbench

動(dòng)機(jī)

數(shù)棧（DTInsight）?中例如離線、實(shí)時(shí)任務(wù)開發(fā)，算法開發(fā)等產(chǎn)品，它們的直接使用人員大部分都是開發(fā)者，需要在 Web 上完成代碼編寫，調(diào)試等工作。所以，我們也希望給開發(fā)人員創(chuàng)造一個(gè)良好的在線 IDE 開發(fā)體驗(yàn)。

早期的數(shù)棧開發(fā)平臺(tái)

上圖中的 RD-OS 是我們數(shù)棧開發(fā)平臺(tái)早期的版本，當(dāng)時(shí)產(chǎn)品功能本身比較簡(jiǎn)單。前端在初期的實(shí)現(xiàn)上，基于 React + Ant Design + Codemirror 來(lái)搭建的整個(gè) IDE UI 界面。另外，由于當(dāng)時(shí)我們多個(gè)產(chǎn)品都有這個(gè) Workbench 的場(chǎng)景，我們還抽象了一個(gè)簡(jiǎn)單且單純 的 IDE Workbench UI 的 React 組件，以供其他產(chǎn)品復(fù)用。

當(dāng)前的 Web IDE 版本

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

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

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

核心功能

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

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

Workbench 布局

上圖是重新抽象的 Workbench UI。基于一個(gè)簡(jiǎn)單的擴(kuò)展（Extension），如?Workbench、ColorTheme、QuickAccess、Keybinding、i18n、Settings?等等功能，通過(guò) Molecule 內(nèi)置的服務(wù)，可以輕松的使用和擴(kuò)展。

與其他開源的 Web IDE 的區(qū)別？

• React.js 應(yīng)用無(wú)縫接入
• 基于 React.js 的組件庫(kù)，更好的?UI 自定義能力
• 基本兼容了 VS Code 上千種 ColorTheme 擴(kuò)展
• Molecule 只是一個(gè)單純的?Web IDEUI 交互框架，不涉及例如文件系統(tǒng)、版本管理、?LSP、DAP、Terminal?等更復(fù)雜的 IDE 功能，需要開發(fā)者自己手動(dòng)實(shí)現(xiàn)。

如何使用?

請(qǐng)閱讀快速開始文檔。

接下來(lái)的規(guī)劃

Molecule 當(dāng)前還是一個(gè)?Beta?版本，很多 API 還不夠穩(wěn)定。早期參考了一些 VS Code 的設(shè)計(jì)概念，API 設(shè)計(jì)不夠簡(jiǎn)單；目前默認(rèn)的 Workbench 是 VS Code 版本的布局，后期會(huì)考慮豐富布局（Layout）系統(tǒng)；Color Theme 交互還有很多細(xì)節(jié)需要優(yōu)化。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。