經歷近 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 中找到實踐經驗。

• 小程序研發場景

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

通過我們的 Toolbar貢獻點及額外的 sumi API，我們能通過插件實現進一步的視圖定制。如：

1）定制不同的 Toolbar 展示

2）實現獨立可通信的窗口調度（如模擬器）

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

• 云端一體化研發鏈路

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

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

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

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

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

• 純前端搭建

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

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

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

1）代碼評審

2）代碼展示

3）遠程筆試

我們在 OpenSumi 代碼倉庫中也提供了一個簡易的入門案例 opensumi/ide-startup-lite , 你也可以直接通過 預覽頁面 直接查看 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 去實現相應的功能視圖。

四、寫在最后

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

最后，如果你對 OpenSumi 有相應的興趣，你也可以來 opensumi/core 倉庫轉轉，為我們的框架貢獻一點你的代碼和意見，這將是是我們莫大的榮幸。

• 項目地址：

https://github.com/opensumi/core

• 官網地址：

http://opensumi.com