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

作者 | OpenSumi

來(lái)源 | 阿里技術(shù)公眾號(hào)

經(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)域，低門(mén)檻、高性能、高定制性的雙端（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)域，低門(mén)檻、高性能、高定制性的雙端（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)。

1. 小程序研發(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 客戶端。

2. 云端一體化研發(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è)試、部署等工作。

3. 純前端搭建

純前端搭建能力是 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)定義文件讀寫(xiě)等服務(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)易的入門(mén)案例 opensumi/ide-startup-lite [1], 你也可以直接通過(guò) 預(yù)覽頁(yè)面 [2]直接查看 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)行定制的門(mé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)行前端組件的編寫(xiě)，通過(guò)我們提供的豐富的 API 去實(shí)現(xiàn)相應(yīng)的功能視圖。

四 為什么要開(kāi)源？

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

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

1 版本發(fā)布

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

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

2 Roadmap

當(dāng)前對(duì)于 OpenSumi 2022 年的 Roadmap 已有初步雛形，見(jiàn) 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)，如下圖所示：

六 寫(xiě)在最后

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

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

原文鏈接

本文為阿里云原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。?

總結(jié)

以上是生活随笔為你收集整理的阿里 蚂蚁自研 IDE 研发框架 OpenSumi 正式开源的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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