阿里&螞蟻自研IDE研發框架OpenSumi正式開源

經歷近 3 年時間，在阿里集團及螞蟻集團共建小組的努力下，OpenSumi 作為國內首個強定製性、高效能，相容 VS Code 外掛體系的 IDE 研發框架，今天正式對外開源。

一 OpenSumi 是什麼？

OpenSumi 是一款面向垂直領域，低門檻、高效能、高定製性的雙端（Web 及 Electron）IDE 研發的框架。

框架早期由阿里集團淘系工程團隊及螞蟻集團體驗技術部、研發效能團隊聯合發起，共同研發的 IDE 標準化研發框架。它基於 TypeScript + React 進行編碼，實現了包含資源管理器、編輯器、除錯、Git 面板、搜尋面板等核心功能模組，開發者只要基於我們的起步專案進行簡單配置，便可以快速地搭建屬於自己的本地或雲端 IDE 產品，框架自身相容 VS Code 外掛生態，主流 VS Code 外掛均可無縫在基於 OpenSumi 研發的產品中執行，同時，框架也為開發者提供多種低成本，高定製的檢視定製能力，能滿足 IDE 場景下絕大多數的檢視定製場景。

對於 IDE 研發，現今市面上已有了 code-server、Theia 等開源方案，我們為什麼選擇自研實現？自 2019 年開始，我們便發現了阿里及螞蟻集團內部已經有了許多 IDE 產品，大部分產品對於 IDE 產品的前期建設大抵相同，但是這部分前期建設工作佔用的則是一個團隊少則幾個月，多則半年一年的時間，存在著大量的重複勞動問題，而在部分團隊使用開源方案的過程中，大家也或多或少遇到了一些問題，如定製能力有限、原始碼依賴深、維護困難、無法滿足內部能力需求等問題。最終，我們決心集合多個團隊的力量走上自研實現的道路。

二 OpenSumi 有什麼優勢？

正如前面所說的，OpenSumi 是一款面向垂直領域，低門檻、高效能、高定製性的雙端（Web 及 Electron）IDE 研發的框架。它的特點主要體現在下面幾點內容：

1 全面的檢視定製能力

除了與主流瀏覽器相近的效能及編碼體驗外，在面向業務的垂直領域，我們擁有遠超於同類框架的定製能力，基於我們的基礎框架，你可以自由的透過模組或外掛定製你的 IDE 產品，能達到真正意義上的 “全檢視定製” 能力。

在許多內部產品實現階段，我們會自然的透過模組去實現基礎能力獲得更好的維護性，而透過外掛去實現業務上的檢視或能力上的定製，達到更高的定製性。以阿里內部的部分研發場景為例，結構分層如下：

2 豐富的垂直領域研發支撐經驗

OpenSumi 在正式開源之前，在阿里及螞蟻集團內部已持續性孵化了兩年之久，期間沉澱落地了一系列具有代表意義的垂直領域下的研發案例，大部分你能想到的研發實踐場景，可能都可以在 OpenSumi 中找到實踐經驗。

1. 小程式研發場景

針對小程式研發場景，支付寶小程式開發者工具以及淘寶小程式開發者工具便是使用了 OpenSumi 作為核心框架進行實現，截止目前，月服務開發者數量已達到 2W +。

透過我們的 Toolbar貢獻點及額外的 sumi API，我們能透過外掛實現進一步的檢視定製。如：

1）定製不同的 Toolbar 展示

2）實現獨立可通訊的視窗排程（如模擬器）

同時，共享的底層及外掛能力，也讓端到端的快速移植成為可能，透過對支付寶小程式開發者工具相關外掛的移植，我們在短短 1 個月的時間內就完成了對功能相近，但使用場景不同的淘寶小程式開發者工具初期版本的支援，同時孵化出內部使用的 O2 客戶端。

2. 雲端一體化研發鏈路

在雲端一體化研發鏈路上，我們在外部有阿里云云開發平臺，內部則有 O2、Ant Codespaces 等產品。

常規的研發鏈路如下圖上半部分所示。

我們在開始一個專案研發前往往都需要經歷一些或簡單或繁瑣的環境配置工作，你的編碼環境也與雲上環境存在割裂，藉助阿里雲等雲產品的容器能力，我們可以透過 OpenSumi 搭建屬於企業或團隊的雲端編碼環境，讓開發者真正省去環境配置問題，在雲端完成一切的開發工作。

透過深度的流程定製，能讓開發者快捷的進入開發狀態。

透過和內部研發平臺打通，可以一站式的完成開發、測試、部署等工作。

3. 純前端搭建

純前端搭建能力是 OpenSumi 在阿里及螞蟻集團內應用的最為廣泛的一塊能力，它提供了一種不需要依賴服務端去提供編輯器啟動所需的 Node.js 服務，直接透過純前端資源及靜態介面定義便能搭建起來一個具備編輯器基本介面的能力。

其實現核心是透過對檔案、Git 等原本依賴 Node 的服務進行了一層服務層抽象，讓開發者可以手動定義檔案讀寫等服務的具體邏輯，同時基於 OpenSumi 提供的 Web Worker API , 將語言服務運行於瀏覽器的 Web Worker 環境中，從而實現了框架的去 Node 化，達到純前端搭建的效果。

基於這層實現，你完全可以基於 GitHub Rest API 去實現一個純前端編輯器，可以從上面直接進行 GitHub 程式碼的檢視、編輯及提交等操作，後續我們會考慮做一個相應的案例出來。而在內部，典型的應用是如下一些場景：

1.程式碼評審

2.程式碼展示

3.遠端筆試

我們在 OpenSumi 程式碼倉庫中也提供了一個簡易的入門案例 opensumi/ide-startup-lite [1], 你也可以直接透過預覽頁面 [2]直接檢視 Demo 效果。

3 完整的 VS Code 的外掛能力支援

相信關注過 IDE 框架的同學對 Theia 一定不陌生，Theia 作為一款相容 VS Code 外掛的 IDE 框架，確實相容了一部分 VS Code 外掛能力，但對於後續 VS Code API 的相容已經越來越少，基本依賴社群開發者的發現貢獻。

OpenSumi 設計之初就是要相容 VS Code 外掛生態，故我們對於框架會有持續性的要求，開源之後，我們計劃每三個月時間去完成一次 VS Code 外掛 API 的適配工作，適配計劃的制定，將會由相應的版本管理人員組織在討論區進行，當前已適配至 VS Code v1.60.0 版本標準 API，進度可見適配計劃。

三 OpenSumi 與市面主流框架的區別

我們在設計初期便對 VS Code 、Theia 的原始碼進行了深入的學習，實現過程中，為了相容 VS Code 外掛生態，同時相容主流編輯器的一些功能及體驗，部分設計及實現上我們有部分原始碼也參考了兩位老師的實現，對應程式碼區塊已標註了版權頭資訊。

1 與 VS Code 的關係

VS Code 作為市場佔用率較大的 IDE，其核心為一個 IDE 產品，本質上與我們的框架屬性存在區別，整體上是一個 ToC 的產品，開發者進行定製的門檻及成本較高，可自定義的內容也比較有限，大部分是透過外掛的形式進行有限拓展。

而我們的框架主要是服務使用者為 ToB 使用者，對那些需要透過 IDE 框架搭建自有的 CloudIDE / 本地 IDE 產品而又沒有充足技術研發能力的中小企業是一個簡單、便捷的開發選項之一。

2 與 Theia 的關係

Theia 作為後起之秀，借鑑 VS Code 的一些設計理念，經過近幾年的發展逐步成熟，社群也相對繁榮，背靠 Eclipse 基金會，也是 IDE 開發者一個不錯的開發選項，與我們的 OpenSumi 框架是存在競爭關係的。

Theia 本身提供了一種模組化構建 IDE 產品的能力，大部分檢視上的定製絕大部分可透過模組的方式去進行拓展的（這點在我們的 OpenSumi 中也有借鑑相應思路），在外掛能力上相容了大部分的 VS Code 外掛，提供了一份 VS Code 外掛 API 的子集能力，部分外掛 API （如 debug、language 等）並沒有完全實現且也無後續持續性的跟進計劃。

基於上面這些點上， OpenSumi 框架不僅支援了基礎的模組方式拓展，在外掛層面上，我們有持續性跟進 VS Code 標準 API 的規劃（當前已實現 VS Code 1.16.0 版本 API），同時，我們基於實現了一個前端沙箱，提供了一系列的 sumi API 用與透過外掛的方式自由地拓展我們的檢視能力，熟悉 React 的前端同學可以直接上手進行前端元件的編寫，透過我們提供的豐富的 API 去實現相應的功能檢視。

四為什麼要開源？

IDE 產品的研發，一直以來都是一件門檻較高，費時費力的事情，我們希望透過開源 OpenSumi 幫助對 IDE 有興趣的開發者更好的瞭解並掌握 IDE 研發這項技術，讓更多的開發者可以以一種低門檻的方式去研發自己的 IDE 產品，透過社群中開發者的使用，也可以幫助我們更好的改進我們的框架，獲得更多的需求場景輸入，同時，透過社群的影響力讓框架獲得更加長遠的發展。

五後續規劃

1 版本釋出

框架目前每兩至三週會進行一次迭代釋出任務，由版本管理員統一維護合入相關功能及問題修復等內容，每次迭代過程中我們都會安排兩名 “版本校驗員” 進行版本檢驗，在測試通過後，我們才會升級一位 minor 版本後釋出，我們會持續性保證最新的兩個 minor 版本的有效性，即 “如果發現了影響功能的問題，我們會向最新的兩個 minor 版本同步修復，釋出 patch 版本 ”。版本示意如圖所示：