阿里 & 螞蟻?zhàn)匝?IDE 研發(fā)框架 OpenSumi 正式開源

經(jīng)歷近 3 年時(shí)間，在阿里集團(tuán)及螞蟻集團(tuán)共建小組的努力下，OpenSumi 作為國(guó)內(nèi)首個(gè)強(qiáng)定制性、高性能，兼容 VS Code 插件體系的 IDE 研發(fā)框架，今天正式對(duì)外開源。

一? OpenSumi 是什么？

OpenSumi 是一款面向垂直領(lǐng)域，低門檻、高性能、高定制性的雙端（Web 及 Electron）IDE 研發(fā)的框架。

框架早期由阿里集團(tuán)淘系工程團(tuán)隊(duì)及螞蟻集團(tuán)體驗(yàn)技術(shù)部、研發(fā)效能團(tuán)隊(duì)聯(lián)合發(fā)起，共同研發(fā)的 IDE 標(biāo)準(zhǔn)化研發(fā)框架。它基于?TypeScript?+?React?進(jìn)行編碼，實(shí)現(xiàn)了包含資源管理器、編輯器、調(diào)試、Git 面板、搜索面板等核心功能模塊，開發(fā)者只要基于我們的起步項(xiàng)目進(jìn)行簡(jiǎn)單配置，便可以快速地搭建屬于自己的本地或云端 IDE 產(chǎn)品，框架自身兼容 VS Code 插件生態(tài)，主流 VS Code 插件均可無縫在基于 OpenSumi 研發(fā)的產(chǎn)品中運(yùn)行，同時(shí)，框架也為開發(fā)者提供多種低成本，高定制的視圖定制能力，能滿足 IDE 場(chǎng)景下絕大多數(shù)的視圖定制場(chǎng)景。

對(duì)于 IDE 研發(fā)，現(xiàn)今市面上已有了?code-server、Theia?等開源方案，我們?yōu)槭裁催x擇自研實(shí)現(xiàn)？自 2019 年開始，我們便發(fā)現(xiàn)了阿里及螞蟻集團(tuán)內(nèi)部已經(jīng)有了許多 IDE 產(chǎn)品，大部分產(chǎn)品對(duì)于 IDE 產(chǎn)品的前期建設(shè)大抵相同，但是這部分前期建設(shè)工作占用的則是一個(gè)團(tuán)隊(duì)少則幾個(gè)月，多則半年一年的時(shí)間，存在著大量的重復(fù)勞動(dòng)問題，而在部分團(tuán)隊(duì)使用開源方案的過程中，大家也或多或少遇到了一些問題，如定制能力有限、源碼依賴深、維護(hù)困難、無法滿足內(nèi)部能力需求等問題。最終，我們決心集合多個(gè)團(tuán)隊(duì)的力量走上自研實(shí)現(xiàn)的道路。

二? OpenSumi 有什么優(yōu)勢(shì)？

正如前面所說的，OpenSumi 是一款面向垂直領(lǐng)域，低門檻、高性能、高定制性的雙端（Web 及 Electron）IDE 研發(fā)的框架。它的特點(diǎn)主要體現(xiàn)在下面幾點(diǎn)內(nèi)容：

1? 全面的視圖定制能力

除了與主流瀏覽器相近的性能及編碼體驗(yàn)外，在面向業(yè)務(wù)的垂直領(lǐng)域，我們擁有遠(yuǎn)超于同類框架的定制能力，基于我們的基礎(chǔ)框架，你可以自由的通過?模塊?或?插件?定制你的 IDE 產(chǎn)品，能達(dá)到真正意義上的 “全視圖定制” 能力。

在許多內(nèi)部產(chǎn)品實(shí)現(xiàn)階段，我們會(huì)自然的通過?模塊?去實(shí)現(xiàn)基礎(chǔ)能力獲得更好的維護(hù)性，而通過?插件?去實(shí)現(xiàn)業(yè)務(wù)上的視圖或能力上的定制，達(dá)到更高的定制性。以阿里內(nèi)部的部分研發(fā)場(chǎng)景為例，結(jié)構(gòu)分層如下：

2? 豐富的垂直領(lǐng)域研發(fā)支撐經(jīng)驗(yàn)

OpenSumi 在正式開源之前，在阿里及螞蟻集團(tuán)內(nèi)部已持續(xù)性孵化了兩年之久，期間沉淀落地了一系列具有代表意義的垂直領(lǐng)域下的研發(fā)案例，大部分你能想到的研發(fā)實(shí)踐場(chǎng)景，可能都可以在 OpenSumi 中找到實(shí)踐經(jīng)驗(yàn)。

1. 小程序研發(fā)場(chǎng)景

針對(duì)小程序研發(fā)場(chǎng)景，?支付寶小程序開發(fā)者工具?以及?淘寶小程序開發(fā)者工具?便是使用了 OpenSumi 作為核心框架進(jìn)行實(shí)現(xiàn)，截止目前，月服務(wù)開發(fā)者數(shù)量已達(dá)到 2W +。

通過我們的?Toolbar貢獻(xiàn)點(diǎn)及額外的?sumi API，我們能通過插件實(shí)現(xiàn)進(jìn)一步的視圖定制。如：

1）定制不同的?Toolbar?展示

2）實(shí)現(xiàn)獨(dú)立可通信的窗口調(diào)度（如模擬器）

同時(shí)，共享的底層及插件能力，也讓端到端的快速移植成為可能，通過對(duì)??支付寶小程序開發(fā)者工具?相關(guān)插件的移植，我們?cè)诙潭?1 個(gè)月的時(shí)間內(nèi)就完成了對(duì)功能相近，但使用場(chǎng)景不同的??淘寶小程序開發(fā)者工具?初期版本的支持，同時(shí)孵化出內(nèi)部使用的 O2 客戶端。

2. 云端一體化研發(fā)鏈路

在云端一體化研發(fā)鏈路上，我們?cè)谕獠坑?阿里云云開發(fā)平臺(tái)?，內(nèi)部則有 O2、Ant Codespaces 等產(chǎn)品。

常規(guī)的研發(fā)鏈路如下圖上半部分所示。

我們?cè)陂_始一個(gè)項(xiàng)目研發(fā)前往往都需要經(jīng)歷一些或簡(jiǎn)單或繁瑣的環(huán)境配置工作，你的編碼環(huán)境也與云上環(huán)境存在割裂，借助阿里云等云產(chǎn)品的容器能力， 我們可以通過 OpenSumi 搭建屬于企業(yè)或團(tuán)隊(duì)的云端編碼環(huán)境，讓開發(fā)者真正省去環(huán)境配置問題，在云端完成一切的開發(fā)工作。

通過深度的流程定制，能讓開發(fā)者快捷的進(jìn)入開發(fā)狀態(tài)。

通過和內(nèi)部研發(fā)平臺(tái)打通，可以一站式的完成開發(fā)、測(cè)試、部署等工作。

3. 純前端搭建

純前端搭建能力是 OpenSumi 在阿里及螞蟻集團(tuán)內(nèi)應(yīng)用的最為廣泛的一塊能力，它提供了一種不需要依賴服務(wù)端去提供編輯器啟動(dòng)所需的 Node.js 服務(wù)，直接通過純前端資源及靜態(tài)接口定義便能搭建起來一個(gè)具備編輯器基本界面的能力。

其實(shí)現(xiàn)核心是通過對(duì)文件、Git 等原本依賴 Node 的服務(wù)進(jìn)行了一層服務(wù)層抽象，讓開發(fā)者可以手動(dòng)定義文件讀寫等服務(wù)的具體邏輯，同時(shí)基于 OpenSumi 提供的?Web Worker API?, 將語言服務(wù)運(yùn)行于瀏覽器的?Web Worker?環(huán)境中，從而實(shí)現(xiàn)了框架的去 Node 化，達(dá)到純前端搭建的效果。

基于這層實(shí)現(xiàn)，你完全可以基于?GitHub Rest API?去實(shí)現(xiàn)一個(gè)純前端編輯器，可以從上面直接進(jìn)行 GitHub 代碼的查看、編輯及提交等操作，后續(xù)我們會(huì)考慮做一個(gè)相應(yīng)的案例出來。而在內(nèi)部，典型的應(yīng)用是如下一些場(chǎng)景：

1.代碼評(píng)審

2.代碼展示

3.遠(yuǎn)程筆試

我們?cè)?OpenSumi 代碼倉庫中也提供了一個(gè)簡(jiǎn)易的入門案例?opensumi/ide-startup-lite?[1], 你也可以直接通過?預(yù)覽頁面?[2]直接查看 Demo 效果。

3? 完整的 VS Code 的插件能力支持

相信關(guān)注過 IDE 框架的同學(xué)對(duì)?Theia?一定不陌生，Theia 作為一款兼容 VS Code 插件的 IDE 框架，確實(shí)兼容了一部分 VS Code 插件能力，但對(duì)于后續(xù) VS Code API 的兼容已經(jīng)越來越少，基本依賴社區(qū)開發(fā)者的發(fā)現(xiàn)貢獻(xiàn)。

OpenSumi 設(shè)計(jì)之初就是要兼容 VS Code 插件生態(tài)，故我們對(duì)于框架會(huì)有持續(xù)性的要求，開源之后，我們計(jì)劃每三個(gè)月時(shí)間去完成一次 VS Code 插件 API 的適配工作，適配計(jì)劃的制定，將會(huì)由相應(yīng)的版本管理人員組織在討論區(qū)進(jìn)行，當(dāng)前已適配至 VS Code v1.60.0 版本標(biāo)準(zhǔn) API， 進(jìn)度可見?適配計(jì)劃?。

三? OpenSumi 與市面主流框架的區(qū)別

我們?cè)谠O(shè)計(jì)初期便對(duì)?VS Code?、Theia?的源碼進(jìn)行了深入的學(xué)習(xí)，實(shí)現(xiàn)過程中，為了兼容 VS Code 插件生態(tài)，同時(shí)兼容主流編輯器的一些功能及體驗(yàn)，部分設(shè)計(jì)及實(shí)現(xiàn)上我們有部分源碼也參考了兩位老師的實(shí)現(xiàn)，對(duì)應(yīng)代碼區(qū)塊已標(biāo)注了版權(quán)頭信息。

1? 與 VS Code 的關(guān)系

VS Code 作為市場(chǎng)占用率較大的 IDE，其核心為一個(gè) IDE 產(chǎn)品，本質(zhì)上與我們的?框架?屬性存在區(qū)別，整體上是一個(gè) ToC 的產(chǎn)品，開發(fā)者進(jìn)行定制的門檻及成本較高，可自定義的內(nèi)容也比較有限，大部分是通過?插件?的形式進(jìn)行有限拓展。

而我們的框架主要是服務(wù)用戶為 ToB 用戶，對(duì)那些需要通過 IDE 框架搭建自有的 CloudIDE / 本地 IDE 產(chǎn)品而又沒有充足技術(shù)研發(fā)能力的中小企業(yè)是一個(gè)簡(jiǎn)單、便捷的開發(fā)選項(xiàng)之一。

2? 與 Theia 的關(guān)系

Theia 作為后起之秀，借鑒 VS Code 的一些設(shè)計(jì)理念，經(jīng)過近幾年的發(fā)展逐步成熟，社區(qū)也相對(duì)繁榮，背靠 Eclipse 基金會(huì)，也是 IDE 開發(fā)者一個(gè)不錯(cuò)的開發(fā)選項(xiàng)，與我們的 OpenSumi 框架是存在競(jìng)爭(zhēng)關(guān)系的。

Theia 本身提供了一種模塊化構(gòu)建 IDE 產(chǎn)品的能力，大部分視圖上的定制絕大部分可通過?模塊?的方式去進(jìn)行拓展的（這點(diǎn)在我們的 OpenSumi 中也有借鑒相應(yīng)思路），在?插件?能力上兼容了大部分的 VS Code 插件，提供了一份 VS Code 插件 API 的子集能力，部分插件 API （如 debug、language 等）并沒有完全實(shí)現(xiàn)且也無后續(xù)持續(xù)性的跟進(jìn)計(jì)劃。

基于上面這些點(diǎn)上， OpenSumi 框架不僅支持了基礎(chǔ)的?模塊?方式拓展，在?插件?層面上，我們有持續(xù)性跟進(jìn) VS Code 標(biāo)準(zhǔn) API 的規(guī)劃 （當(dāng)前已實(shí)現(xiàn) VS Code 1.16.0 版本 API），同時(shí)，我們基于實(shí)現(xiàn)了一個(gè)前端沙箱，提供了一系列的?sumi?API 用與通過?插件?的方式自由地拓展我們的視圖能力，熟悉?React?的前端同學(xué)可以直接上手進(jìn)行前端組件的編寫，通過我們提供的豐富的 API 去實(shí)現(xiàn)相應(yīng)的功能視圖。

四? 為什么要開源？

IDE 產(chǎn)品的研發(fā)，一直以來都是一件門檻較高，費(fèi)時(shí)費(fèi)力的事情，我們希望通過開源 OpenSumi 幫助對(duì) IDE 有興趣的開發(fā)者更好的了解并掌握 IDE 研發(fā)這項(xiàng)技術(shù)，讓更多的開發(fā)者可以以一種低門檻的方式去研發(fā)自己的 IDE 產(chǎn)品，通過社區(qū)中開發(fā)者的使用，也可以幫助我們更好的改進(jìn)我們的框架，獲得更多的需求場(chǎng)景輸入，同時(shí)，通過社區(qū)的影響力讓框架獲得更加長(zhǎng)遠(yuǎn)的發(fā)展。

五? 后續(xù)規(guī)劃

1? 版本發(fā)布

框架目前每?jī)芍寥軙?huì)進(jìn)行一次迭代發(fā)布任務(wù)，由版本管理員統(tǒng)一維護(hù)合入相關(guān)功能及問題修復(fù)等內(nèi)容，每次迭代過程中我們都會(huì)安排兩名 “版本校驗(yàn)員” 進(jìn)行版本檢驗(yàn)，在測(cè)試通過后，我們才會(huì)升級(jí)一位?minor?版本后發(fā)布，我們會(huì)持續(xù)性保證最新的兩個(gè)?minor?版本的有效性，即 “如果發(fā)現(xiàn)了影響功能的問題，我們會(huì)向最新的兩個(gè)?minor?版本同步修復(fù)，發(fā)布?patch?版本 ”。版本示意如圖所示：

以最近 2022 年 1 月份的迭代計(jì)劃為例，版本發(fā)布的計(jì)劃可見：Iteration Plan for v2.14.0[3]

2? Roadmap

當(dāng)前對(duì)于 OpenSumi 2022 年的 Roadmap 已有初步雛形，見?OpenSumi 2022 Roadmap [4]討論，后續(xù)會(huì)根據(jù)社區(qū)反饋及討論在 2-3 月份正式確定。

我們會(huì)持續(xù)性的完成 VS Code API 的適配、編碼/調(diào)試體驗(yàn)優(yōu)化、性能優(yōu)化工作，同時(shí)積極收集社區(qū)中反饋的功能需求，以雙周迭代的方式選擇性吸收進(jìn)框架計(jì)劃中。

同時(shí)，對(duì)于框架，我們也設(shè)定了一些基礎(chǔ)的長(zhǎng)期目標(biāo)，如下圖所示：

六? 寫在最后

今天 OpenSumi 的開源只是我們邁出的一小步。我們非常期待得到您的反饋，也歡迎使用 OpenSumi 打造一款屬于你自己的 IDE 產(chǎn)品。

最后，如果你對(duì) OpenSumi 有相應(yīng)的興趣，你也可以來?opensumi/core?[5]倉庫轉(zhuǎn)轉(zhuǎn)，為我們的框架貢獻(xiàn)一點(diǎn)你的代碼和意見，這將是是我們莫大的榮幸。

項(xiàng)目地址：https://github.com/opensumi/core

官網(wǎng)地址：http://opensumi.com/

[1]https://github.com/opensumi/ide-startup-lite/

[2]https://opensumi.github.io/ide-startup-lite/

[3]https://github.com/opensumi/core/issues/333[4]https://github.com/opensumi/core/discussions/316

[5]https://github.com/opensumi/core