比快更快，極速版 IDE 框架 CodeBlitz 開源！

支付寶小程序雲效能 Cloud IDE

為了保證框架可以同時在 Web 和 Electron 環境下運行，OpenSumi 採用了一套前後端分離、通過抽象的通信層進行相互調用的項目結構。

OpenSumi 技術架構圖

OpenSumi 在螞蟻集團及阿里集團沉澱落地了一系列具有代表意義的研發實踐，大部分研發場景都可以在 OpenSumi 中找到實踐經驗：

1. 小程序研發場景

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

2. 雲端一體化研發鏈路

針對於雲端研發場景，支付寶小程序雲 Codespaces (https://ide.cloud.alipay.com) 提供一站式集成開發環境環境，其中一鍵部署至雲託管插件便是利用 OpenSumi 視圖插件的能力。

2. CodeBlitz 解決的問題是什麼？

既然已經有 OpenSumi 了，那麼為什麼還會封裝出 CodeBlitz 框架？

2.1. 帶容器版本的問題及背景

螞蟻研發效能雲研發 Cloud IDE 通過 OpenSumi 的高擴展性在內部對接了很多研發場景，但過程中發現並不是所有場景都需要研發容器。需要帶研發容器的場景一般依賴運行、調試等能力，但讀代碼、簡單寫代碼等輕量場景則沒必要掛載容器。而且，依賴容器可能會有以下幾個問題：

• 啟動較慢：冷啟動容器一般較慢，即便做了預熱優化，也並不能覆蓋所有場景
• 資源浪費：容器是需要消耗計算資源和存儲資源的，根據不同的容器規格，如果按照阿里雲按量計費的 ECS 參考價格來計算，這中間產生的資源費用可能在 6 元到 80 元不等，顯然這造成了極大的浪費
• 網絡耗時：因為 Cloud IDE 通過 WebSocket 進行瀏覽器和容器的通信，那就必然決定了使用 Cloud IDE 就必須要有網絡，而且網速好壞也會很大程度上印象研發體驗。在無網情況下 Cloud IDE 是不可用狀態

對於整個研發活動來說，一些場景確實是無需容器：

2.2. 去掉容器帶來新的問題

那去除容器是否就能滿足上述場景？實踐過程中，我們發現了去除容器後帶來新的問題：

• 文件系統：在有容器的情況下，文件保存在了掛載到在容器的雲盤中，但無容器的場景下如何存儲文件？
• 語言服務：在有容器的情況下，不同語言的語言服務能力是通過插件實現語言服務協議（LSP）來完成索引計算的，在無容器的場景下這些語言服務誰來提供？
• 前端模塊復用：如果去除掉容器，意味著需要改變前端模塊調用後端模塊方式，是否能在通信層面進行磨平，如果要替換後端實現直接替換實現即可，無需針對於前端代碼進行修改？

好在現代瀏覽器的能力越來越強，可以通過瀏覽器的特性來解決上述問題。如果說有容器的是比較常見的 Cloud IDE 標準版，那麼將容器替換為瀏覽器那就是 Cloud IDE 提供的另一種方式：極速版

標準版到極速版的改造

2.3. CodeBlitz 解決方案

針對不掛載容器帶來的 3 個典型問題，CodeBlitz 做了以下能力建設：

• 文件系統：利用 BrowserFS 的能力，在瀏覽器實現了七種文件讀寫策略，可以應對不同的業務場景；如果內置的文件系統不能滿足需求，集成方也可以提供 FileSystemProvider 自己實現文件系統接口
• 語言服務：通過和螞蟻代碼分析團隊的合作，CodeBlitz 支持了 Java、TS、JS 三種語言的離線語言服務索引（LSIF）服務，可在代碼提交時離線計算當前代碼索引用於語言服務的展示；同時藉助於 Tree-sitter 技術，對於 Python、Go 、Rust、C++、Php 幾種語言也支持簡單的定義跳轉、查找引用等功能。同時，CodeBlitz 正在嘗試將 OpenSumi Node.js 插件進程運行在瀏覽器 WASM 環境，提供與有容器版本一致的 TS/JS 語言服務能力，進一步增強語言服務體驗
• 通信方式改造：將之前基於 WebSocket 調用的方式改造為前端 Function 直接的調用，前端無需感知環境的變化，調用後端無需修改替換前端 Provider 實現，直接通過 DI 方式替換後端模塊實現即可

2.4. CodeBlitz 核心能力

對標有容器的標準版，CodeBlitz 主要在讀、寫、運行、提交等方面進行了探索：

• 讀：

• 適配了多種代碼託管平台，例如 Github、Gitlab、Gitlink、AtomGit 等代碼託管平台，業務可以非常方便的使用代碼服務的能力

• 內置了包括 Java、TS/JS、C++、Go、Python、Rust 等幾十種常見語言的語法高亮支持

• 支持了如 Git Blame、GitGraph 等代碼閱讀輔助插件

• 寫：

• 支持 HTML/CSS/JS/Markdown 等在線語言服務能力，支持錯誤診斷能力

• 瀏覽器文件系統

• 運行

• 支持基於 Skypack 的前端代碼運行方案

• 支持基於 Pyodide 的 Python 運行

• 正在探索 WebContainer 能力

• 提交

• 支‍持 WebSCM，提供分支切換 / 新增、代碼提交等能力

讀：

• 適配了多種代碼託管平台，例如 Github、Gitlab、Gitlink、AtomGit 等代碼託管平台，業務可以非常方便的使用代碼服務的能力

• 內置了包括 Java、TS/JS、C++、Go、Python、Rust 等幾十種常見語言的語法高亮支持

• 支持了如 Git Blame、GitGraph 等代碼閱讀輔助插件

適配了多種代碼託管平台，例如 Github、Gitlab、Gitlink、AtomGit 等代碼託管平台，業務可以非常方便的使用代碼服務的能力

內置了包括 Java、TS/JS、C++、Go、Python、Rust 等幾十種常見語言的語法高亮支持

支持了如 Git Blame、GitGraph 等代碼閱讀輔助插件

寫：

• 支持 HTML/CSS/JS/Markdown 等在線語言服務能力，支持錯誤診斷能力

• 瀏覽器文件系統

支持 HTML/CSS/JS/Markdown 等在線語言服務能力，支持錯誤診斷能力

運行

• 支持基於 Skypack 的前端代碼運行方案

• 支持基於 Pyodide 的 Python 運行

• 正在探索 WebContainer 能力

支持基於 Skypack 的前端代碼運行方案

支持基於 Pyodide 的 Python 運行

正在探索 WebContainer 能力

提交

• 支‍持 WebSCM，提供分支切換 / 新增、代碼提交等能力

支‍持 WebSCM，提供分支切換 / 新增、代碼提交等能力

2.5. CodeBlitz 與 OpenSumi 的關係

CodeBlitz 為 OpenSumi 的下游項目，是 OpenSumi 在純前端領域場景實踐出來的解決方案框架。在 OpenSumi 之上對文件系統、通信系統、插件機制等模塊進行了擴展，更好的應用在沒有容器、本地客戶端環境的純瀏覽器環境上，為此類場景提供多套解決方案。

如果說以 CodeMirror、Monaco 為代表的瀏覽器 IDE 組件為 Web IDE 1.0，那擁有上述能力的 CodeBlitz 就是 Web IDE 2.0。CodeBlitz 在螞蟻內部於 2021 年 4 月上線，承接了代碼閱讀、代碼評審、在線筆試、代碼檢查結果反饋、輕量在線研發等眾多場景，同年 8 月 vscode.dev 和 github.dev 上線，與之相比，CodeBlitz 利用 OpenSumi 框架的高擴展性，業務可以更加深度的定製模塊與插件，讓業務有多的想像空間。

3. CodeBlitz 應用實踐

3.1. 代碼閱讀

代碼閱讀是 CodeBlitz 最常見的應用場景，通常此類場景不需要運行 / 調試代碼，所以也無需容器環境，內部常見的場景有代碼閱讀、代碼掃描報告查看等場景，可以說需要代碼閱讀的場景就有 CodeBlitz 的身影。

3.2. WebSCM

傳統的代碼託管平台修改代碼只能單文件修改提交，CodeBlitz 讓 WebIDE 擁有了 WebSCM 能力，可以在 Web IDE 中新建分支，修改代碼後在 SCM 面板看到變更文件列表，寫完 commit message 後提交到代碼服務上。如果想快速修改一些文件可以不用在本地修改，直接通過 Web IDE 修改代碼一次性提交。

3.3. 代碼評審

代碼評審功能用戶長久以來一直反饋以下幾個問題：

IDE 模式的代碼評審場景主要模塊如下：

3.4. 解決衝突

解決衝突是研發同學經常會遇到的問題之一，多人協作的情況下極易出現衝突。與之前提到的一樣，每一次在 Cloud IDE 上解沖衝突都需要啟動一個容器，而高峰期則意味著很容易短時間內出現資源不足的問題。同時倉庫 clone 往往耗時 20 秒以上，這導致許多同學解決衝突時使用體驗都不佳。通過 CodeBlitz 可以實現秒級還原衝突、解決衝突。

針對於 Java 同學對於 IntelliJ IDEA 使用習慣，OpenSumi 提供了 3-way merge editor，讓 Java 同學解決衝突更加絲滑。

3.5. 在線筆試

在線筆試也是 CodeBlitz 非常受歡迎的場景之一，使用過阿里伯樂系統的同學應該已經體驗過 CodeBlitz 提供的編輯器及編輯器內的協同能力。

3.6. 在線運行

對於一些項目體驗場景來說，無需複雜的語言服務能力，簡單修改，遠程運行，螞蟻鏈智能合約使用 CodeBlitz 作為 Web IDE 編輯器，對接螞蟻鏈中心化服務實現編譯合約、部署合約

體驗地址：https://openlab.antchain.antgroup.com/ide

體驗地址：https://openlab.antchain.antgroup.com/ide

4. 誰在使用 CodeBlitz ？

除了螞蟻、阿里內部的一些實踐以外，CodeBlitz 在正式開源前也已經和 CCF Gitlink、Atom Git 等外部產品展開合作

4.1. CCF Gitlink

在代碼託管平台上進行代碼閱讀時經常需要查看當前方法在哪裡被引用、當前接口在哪裡被實現，CodeBlitz 為 Gitlink 提供編輯器 + 插件的能力，解決了上述用戶需求：

Gitlink 通過實現 Blame 插件，完成了編輯器 Blame 查看的能力：

Gitlink 通過集成 CodeBlitz，也支持用 IDE 模式評審代碼，甚至能一鍵修改：

Gitlink 代碼閱讀場景雖然接入 CodeBlitz 編輯器，但文件樹、代碼搜索、快捷鍵、IDE 皮膚、等均和平時開發時使用習慣的 IDE 差異較大，更有大部分用戶僅僅是為了代碼閱讀將代碼克隆到本地，儘管保證了一致的體驗，但整個鏈路繁瑣費時。

基於這個洞察，Gitlink 與螞蟻研發效能雲研發團隊合作，集成 CodeBlitz 並推出 Gitlink Web IDE，可以一鍵快速打開 Web IDE 訪問閱讀項目倉庫代碼，實現項目與 IDE 的無縫銜接，保持研發同學的日常偏好習慣，同時完美兼容 Gitlink 代碼託管平台。更重要的是，通過無容器在瀏覽器上直接運行 Web IDE，確保「秒開」的即時體驗。

體驗地址：

https://www.gitlink.org.cn/Gitlink/forgeplus/webIDE/tree/master

體驗地址：

https://www.gitlink.org.cn/Gitlink/forgeplus/webIDE/tree/master

更多 CodeBlitz 與 Gitlink 合作詳見

GitLink 如何使用 OpenSumi 突破代碼託管平台 3 大體驗瓶頸？

4.2. 開放原子 Atom Git

Atom Git 是開放原子開源基金會代碼託管平台，CodeBlitz 為 Atom Git 提供 Web IDE 應用，用戶在倉庫安裝應用後即可體驗 CodeBlitz 提供的 Web IDE 能力

體驗地址：https://atomgit.com/opensumi/codeblitz

體驗地址：https://atomgit.com/opensumi/codeblitz

更多 CodeBlitz 與 Atom Git 合作詳見

OpenSumi X AtomGit：WebIDE 與代碼託管的合作實踐

4.3. 支付寶小程序雲

支付寶雲開發是基於 Serverless 的一站式小程序後端服務開發平台，其中函數在線編輯 IDE 使用 CodeBlitz。

體驗地址：https://cloudbase.cloud.alipay.com

體驗地址：https://cloudbase.cloud.alipay.com

螞蟻研發效能已將內部產品陸續上架到支付寶小程序雲，其中代碼閱讀、Web IDE、解決衝突等場景已可以通過雲效能來體驗 CodeBlitz 的能力

體驗地址：https://code.cloud.alipay.com

體驗地址：https://code.cloud.alipay.com

除了上述已接入的客戶以外，阿里雲效、Gitee 均正在接入 CodeBlitz 中。

5. 結語

CodeBlitz 在常規的 Cloud IDE、客戶端 IDE 之外，探索出了只需要瀏覽器環境即可擁有 IDE 體驗的場景，與 github.dev、vscode.dev 不同的是，CodeBlitz 作為框架可以讓上層產品通過 OpenSumi 模塊、插件的方式定製出屬於自己業務場景的 Web IDE，如果您有此類需求，不妨試試 CodeBlitz。

最後，也歡迎為 CodeBlitz 框架貢獻一點代碼和意見，這將是我們莫大的榮幸。

Github 地址：https://github.com/opensumi/codeblitz

Gitee 地址：https://gitee.com/opensumi/codeblitz

官網地址：https://codeblitz.cloud.alipay.com

大模型之戰，騰訊來了

面對一家年產值 500 萬噸的焦化廠，這家數科公司靠什麼賦能業務？

通貨膨脹由雲客戶買單？IBM 雲服務將全面漲價，最高達 29%

融資 7 億元後，Mojo 之父實名吐槽：Mojo 太好用了，顫抖吧 C++