重磅：國(guó)產(chǎn)IDE發(fā)布，由阿里研發(fā)，完全開(kāi)源！高性能，高定制性！

2022-07-13 10:49:35

OpenSumi 作為國(guó)內(nèi)首個(gè)強(qiáng)定制性、高性能，兼容 VS Code 插件體系的 IDE 研發(fā)框架，正式對(duì)外開(kāi)源。

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

一、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 面板、搜索面板等核心功能模塊，開(kāi)發(fā)者只要基于我們的起步項(xiàng)目進(jìn)行簡(jiǎn)單配置，便可以快速地搭建屬于自己的本地或云端 IDE 產(chǎn)品，框架自身兼容 VS Code 插件生態(tài)，主流 VS Code 插件均可無(wú)縫在基于 OpenSumi 研發(fā)的產(chǎn)品中運(yùn)行，同時(shí)，框架也為開(kāi)發(fā)者提供多種低成本，高定制的視圖定制能力，能滿足 IDE 場(chǎng)景下絕大多數(shù)的視圖定制場(chǎng)景。

對(duì)于 IDE 研發(fā)，現(xiàn)今市面上已有了 code-server、Theia 等開(kāi)源方案，我們?yōu)槭裁催x擇自研實(shí)現(xiàn)？自 2019 年開(kāi)始，我們便發(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)問(wèn)題，而在部分團(tuán)隊(duì)使用開(kāi)源方案的過(guò)程中，大家也或多或少遇到了一些問(wèn)題，如定制能力有限、源碼依賴深、維護(hù)困難、無(wú)法滿足內(nèi)部能力需求等問(wèn)題。最終，我們決心集合多個(gè)團(tuán)隊(duì)的力量走上自研實(shí)現(xiàn)的道路。

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

正如前面所說(shuō)的，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ǔ)框架，你可以自由的通過(guò) 模塊或插件定制你的 IDE 產(chǎn)品，能達(dá)到真正意義上的 “全視圖定制” 能力。

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

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

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

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

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

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

1）定制不同的 Toolbar 展示

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

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

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

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

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

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

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

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

純前端搭建

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

其實(shí)現(xiàn)核心是通過(guò)對(duì)文件、Git 等原本依賴 Node 的服務(wù)進(jìn)行了一層服務(wù)層抽象，讓開(kāi)發(fā)者可以手動(dòng)定義文件讀寫等服務(wù)的具體邏輯，同時(shí)基于 OpenSumi 提供的 Web Worker API , 將語(yǔ)言服務(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)的案例出來(lái)。而在內(nèi)部，典型的應(yīng)用是如下一些場(chǎng)景：

1）代碼評(píng)審

2）代碼展示

3）遠(yuǎn)程筆試

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

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

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

OpenSumi 設(shè)計(jì)之初就是要兼容 VS Code 插件生態(tài)，故我們對(duì)于框架會(huì)有持續(xù)性的要求，開(kāi)源之后，我們計(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)度可見(jiàn) 適配計(jì)劃。

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

我們?cè)谠O(shè)計(jì)初期便對(duì) VS Code 、Theia 的源碼進(jìn)行了深入的學(xué)習(xí)，實(shí)現(xiàn)過(guò)程中，為了兼容 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)品，開(kāi)發(fā)者進(jìn)行定制的門檻及成本較高，可自定義的內(nèi)容也比較有限，大部分是通過(guò) 插件的形式進(jìn)行有限拓展。

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

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

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

Theia 本身提供了一種模塊化構(gòu)建 IDE 產(chǎn)品的能力，大部分視圖上的定制絕大部分可通過(guò) 模塊的方式去進(jìn)行拓展的（這點(diǎn)在我們的 OpenSumi 中也有借鑒相應(yīng)思路），在插件能力上兼容了大部分的 VS Code 插件，提供了一份 VS Code 插件 API 的子集能力，部分插件 API （如 debug、language 等）并沒(méi)有完全實(shí)現(xiàn)且也無(wú)后續(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 用與通過(guò) 插件的方式自由地拓展我們的視圖能力，熟悉 React 的前端同學(xué)可以直接上手進(jìn)行前端組件的編寫，通過(guò)我們提供的豐富的 API 去實(shí)現(xiàn)相應(yīng)的功能視圖。