前言

一直以來(lái)，我們對(duì) Cloud IDE 的期待都是隨時(shí)隨地、環(huán)境統(tǒng)一、釋放本地資源、一站式研發(fā)、安全可控等等，可以和各類研發(fā)平臺(tái)進(jìn)行場(chǎng)景對(duì)接。然而在越來(lái)越多的場(chǎng)景對(duì)接中我們發(fā)現(xiàn)，并不是所有場(chǎng)景都需要這么重的容器運(yùn)行環(huán)境，特別是對(duì)于一些非常輕量級(jí)的代碼查看、代碼編輯等場(chǎng)景，而且一旦涉及容器會(huì)帶來(lái)成本高、打開 IDE 慢、穩(wěn)定性不足、管理復(fù)雜度高等問(wèn)題。

螞蟻研發(fā)效能云研發(fā)團(tuán)隊(duì)在對(duì)接內(nèi)部這類場(chǎng)景的過(guò)程中，基于 OpenSumi 封裝了純前端、極速版 IDE 框架 CodeBlitz，無(wú)需容器資源，僅需瀏覽器即可擁有代碼閱讀、語(yǔ)法高亮、代碼編寫、WebSCM等能力，通過(guò)開放的插件體系，支持 Git Graph、Git Blame 等 Git 輔助能力、多語(yǔ)言服務(wù)在線索引、基于 wasm 的代碼運(yùn)行能力。CodeBlitz 在螞蟻集團(tuán)被廣泛應(yīng)用于代碼閱讀、代碼評(píng)審、解決沖突、在線筆試、代碼掃描報(bào)告查看、產(chǎn)物預(yù)覽、SQL 編輯等場(chǎng)景。此外，CCF Gitlink、Atom Git 及小程序云效能等代碼托管平臺(tái)也與 CodeBlitz 有深入合作。今天，CodeBlitz 正式對(duì)外開源！

Github 地址(點(diǎn)擊文末閱讀原文即可跳轉(zhuǎn))：

https://github.com/opensumi/codeblitz

Gitee 地址：

https://gitee.com/opensumi/codeblitz

官網(wǎng)地址：

https://codeblitz.cloud.alipay.com

全文目錄如下：

1. CodeBlitz 起源：OpenSumi

2. CodeBlitz 解決的問(wèn)題是什么?
2.1. 帶容器版本的問(wèn)題及背景
2.2. 去掉容器帶來(lái)新的問(wèn)題
2.3. CodeBlitz 解決方案
2.4. CodeBlitz 核心能力
2.5. CodeBlitz 與 OpenSumi 的關(guān)系

3. CodeBlitz 應(yīng)用實(shí)踐
3.1. 代碼閱讀
3.2. WebSCM

3.3. 代碼評(píng)審
3.4. 解決沖突
3.5. 在線筆試
3.6. 在線運(yùn)行
4. 誰(shuí)在使用 CodeBlitz ?
4.1. CCF Gitlink

4.2. 開放原子 Atom Git
4.3. 支付寶小程序云
5. 結(jié)語(yǔ)

01

CodeBlitz 起源：OpenSumi

OpenSumi 是國(guó)內(nèi)首個(gè)低門檻、高性能、高定制性的雙端（Web 及 Electron）IDE 研發(fā)的框架，主要里程碑如下：

2019 年由螞蟻集團(tuán)及阿里集團(tuán)聯(lián)合發(fā)起并封閉開發(fā)

2020 年發(fā)布 1.0 版本，提供插件機(jī)制并兼容 VS Code 插件

2021 年發(fā)布 2.0，先于 VS Code、Theia 提供基于 React 組件的側(cè)部面板插件，供業(yè)務(wù)更加方便的自定義 UI 界面

2022 年 3 月正式開源，目前有支付寶小程序 IDE、支付寶小程序云 Codespaces、飛書開發(fā)者工具、釘釘開發(fā)者工具等產(chǎn)品使用

為了讓上層產(chǎn)品能更好的定制出自己的 IDE 形態(tài)，OpenSumi 在架構(gòu)上主要考慮了三點(diǎn)設(shè)計(jì)：

組合能力：OpenSumi 默認(rèn)提供了 56 個(gè)基礎(chǔ) IDE 模塊包和豐富的 IDE 風(fēng)格組件，集成方可以自由組合自己的業(yè)務(wù)場(chǎng)景，形成不同的 IDE 形態(tài)

定制能力：集成方可以通過(guò)自定義模塊的方式，調(diào)用 IDE 各個(gè)實(shí)例方法，實(shí)現(xiàn)自身復(fù)雜業(yè)務(wù)邏輯；通過(guò)貢獻(xiàn)點(diǎn)機(jī)制，深度參與到 IDE 的各個(gè)生命周期。

替換能力：通過(guò)自研的依賴注入容器（IOC），整體框架代碼都遵循依賴倒置原則（DIP），集成方可以非常方便的可替換掉框架默認(rèn)的視圖、邏輯的實(shí)現(xiàn)。

▲支付寶小程序云效能 Cloud IDE

為了保證框架可以同時(shí)在 Web 和 Electron 環(huán)境下運(yùn)行，OpenSumi 采用了一套前后端分離、通過(guò)抽象的通信層進(jìn)行相互調(diào)用的項(xiàng)目結(jié)構(gòu)。

▲OpenSumi 技術(shù)架構(gòu)圖

OpenSumi 在螞蟻集團(tuán)及阿里集團(tuán)沉淀落地了一系列具有代表意義的研發(fā)實(shí)踐，大部分研發(fā)場(chǎng)景都可以在 OpenSumi 中找到實(shí)踐經(jīng)驗(yàn)：1. 小程序研發(fā)場(chǎng)景針對(duì)小程序研發(fā)場(chǎng)景， 支付寶小程序開發(fā)者工具以及淘寶小程序開發(fā)者工具此類桌面客戶端 IDE 便是使用了 OpenSumi 作為核心框架進(jìn)行實(shí)現(xiàn)，截止目前，月服務(wù)開發(fā)者數(shù)量已達(dá)到 2W +。

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

針對(duì)于云端研發(fā)場(chǎng)景，支付寶小程序云 Codespaces (https://ide.cloud.alipay.com) 提供一站式集成開發(fā)環(huán)境環(huán)境，其中一鍵部署至云托管插件便是利用 OpenSumi 視圖插件的能力。

02

CodeBlitz 解決的問(wèn)題是什么？

既然已經(jīng)有 OpenSumi 了，那么為什么還會(huì)封裝出 CodeBlitz 框架？

2.1. 帶容器版本的問(wèn)題及背景

螞蟻 Ant Codespaces 通過(guò) OpenSumi 的高擴(kuò)展性在內(nèi)部對(duì)接了很多研發(fā)場(chǎng)景，但過(guò)程中發(fā)現(xiàn)并不是所有場(chǎng)景都需要研發(fā)容器。需要帶研發(fā)容器的場(chǎng)景一般依賴運(yùn)行、調(diào)試等能力，但讀代碼、簡(jiǎn)單寫代碼等輕量場(chǎng)景則沒(méi)必要掛載容器。而且，依賴容器可能會(huì)有以下幾個(gè)問(wèn)題：

啟動(dòng)較慢：冷啟動(dòng)容器一般較慢，即便做了預(yù)熱優(yōu)化，也并不能覆蓋所有場(chǎng)景

資源浪費(fèi)：容器是需要消耗計(jì)算資源和存儲(chǔ)資源的，根據(jù)不同的容器規(guī)格，如果按照阿里云按量計(jì)費(fèi)的 ECS 參考價(jià)格來(lái)計(jì)算，這中間產(chǎn)生的資源費(fèi)用可能在 6 元到 80 元不等，顯然這造成了極大的浪費(fèi)

網(wǎng)絡(luò)耗時(shí)：因?yàn)?Cloud IDE 通過(guò) WebSocket 進(jìn)行瀏覽器和容器的通信，那就必然決定了使用 Cloud IDE 就必須要有網(wǎng)絡(luò)，而且網(wǎng)速好壞也會(huì)很大程度上印象研發(fā)體驗(yàn)。在無(wú)網(wǎng)情況下 Cloud IDE 是不可用狀態(tài)

對(duì)于整個(gè)研發(fā)活動(dòng)來(lái)說(shuō)，一些場(chǎng)景確實(shí)是無(wú)需容器：

2.2. 去掉容器帶來(lái)新的問(wèn)題

那去除容器是否就能滿足上述場(chǎng)景？實(shí)踐過(guò)程中，我們發(fā)現(xiàn)了去除容器后帶來(lái)新的問(wèn)題：

文件系統(tǒng)：在有容器的情況下，文件保存在了掛載到在容器的云盤中，但無(wú)容器的場(chǎng)景下如何存儲(chǔ)文件？

語(yǔ)言服務(wù)：在有容器的情況下，不同語(yǔ)言的語(yǔ)言服務(wù)能力是通過(guò)插件實(shí)現(xiàn)語(yǔ)言服務(wù)協(xié)議（LSP）來(lái)完成索引計(jì)算的，在無(wú)容器的場(chǎng)景下這些語(yǔ)言服務(wù)誰(shuí)來(lái)提供？

前端模塊復(fù)用：如果去除掉容器，意味著需要改變前端模塊調(diào)用后端模塊方式，是否能在通信層面進(jìn)行磨平，如果要替換后端實(shí)現(xiàn)直接替換實(shí)現(xiàn)即可，無(wú)需針對(duì)于前端代碼進(jìn)行修改？

好在現(xiàn)代瀏覽器的能力越來(lái)越強(qiáng)，可以通過(guò)瀏覽器的特性來(lái)解決上述問(wèn)題。如果說(shuō)有容器的是比較常見(jiàn)的 Cloud IDE 標(biāo)準(zhǔn)版，那么將容器替換為瀏覽器那就是 Cloud IDE 提供的另一種方式：極速版。

▲標(biāo)準(zhǔn)版到極速版的改造

2.3. CodeBlitz 解決方案

針對(duì)不掛載容器帶來(lái)的 3 個(gè)典型問(wèn)題，CodeBlitz 做了以下能力建設(shè)：

文件系統(tǒng)：利用 BrowserFS 的能力，在瀏覽器實(shí)現(xiàn)了七種文件讀寫策略，可以應(yīng)對(duì)不同的業(yè)務(wù)場(chǎng)景；如果內(nèi)置的文件系統(tǒng)不能滿足需求，集成方也可以提供 FileSystemProvider 自己實(shí)現(xiàn)文件系統(tǒng)接口

語(yǔ)言服務(wù)：通過(guò)和螞蟻代碼分析團(tuán)隊(duì)的合作，CodeBlitz 支持了 Java、TS、JS 三種語(yǔ)言的離線語(yǔ)言服務(wù)索引（LSIF）服務(wù)，可在代碼提交時(shí)離線計(jì)算當(dāng)前代碼索引用于語(yǔ)言服務(wù)的展示；同時(shí)借助于 Tree-sitter 技術(shù)，對(duì)于 Python、Go 、Rust、C++、Php 幾種語(yǔ)言也支持簡(jiǎn)單的定義跳轉(zhuǎn)、查找引用等功能。同時(shí)，CodeBlitz 正在嘗試將 OpenSumi Node.js 插件進(jìn)程運(yùn)行在瀏覽器 WASM 環(huán)境，提供與有容器版本一致的 TS/JS 語(yǔ)言服務(wù)能力，進(jìn)一步增強(qiáng)語(yǔ)言服務(wù)體驗(yàn)

通信方式改造：將之前基于 WebSocket 調(diào)用的方式改造為前端 Function 直接的調(diào)用，前端無(wú)需感知環(huán)境的變化，調(diào)用后端無(wú)需修改替換前端 Provider 實(shí)現(xiàn)，直接通過(guò) DI 方式替換后端模塊實(shí)現(xiàn)即可

2.4. CodeBlitz 核心能力

對(duì)標(biāo)有容器的標(biāo)準(zhǔn)版，CodeBlitz 主要在讀、寫、運(yùn)行、提交等方面進(jìn)行了探索：

讀：

適配了多種代碼托管平臺(tái)，例如 Github、Gitlab、Gitlink、AtomGit 等代碼托管平臺(tái)，業(yè)務(wù)可以非常方便的使用代碼服務(wù)的能力

內(nèi)置了包括 Java、TS/JS、C++、Go、Python、Rust 等幾十種常見(jiàn)語(yǔ)言的語(yǔ)法高亮支持

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

寫：

支持 HTML/CSS/JS/Markdown 等在線語(yǔ)言服務(wù)能力，支持錯(cuò)誤診斷能力

瀏覽器文件系統(tǒng)

運(yùn)行

支持基于 Skypack 的前端代碼運(yùn)行方案

支持基于 Pyodide 的 Python 運(yùn)行

正在探索 WebContainer 能力

提交

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

2.5. CodeBlitz 與 OpenSumi 的關(guān)系

CodeBlitz 為 OpenSumi 的下游項(xiàng)目，是 OpenSumi 在純前端領(lǐng)域場(chǎng)景實(shí)踐出來(lái)的解決方案框架。在 OpenSumi 之上對(duì)文件系統(tǒng)、通信系統(tǒng)、插件機(jī)制等模塊進(jìn)行了擴(kuò)展，更好的應(yīng)用在沒(méi)有容器、本地客戶端環(huán)境的純?yōu)g覽器環(huán)境上，為此類場(chǎng)景提供多套解決方案。

如果說(shuō)以 CodeMirror、Monaco 為代表的瀏覽器 IDE 組件為 Web IDE 1.0，那擁有上述能力的 CodeBlitz 就是 Web IDE 2.0。CodeBlitz 在螞蟻內(nèi)部于 2021 年 4 月上線，承接了代碼閱讀、代碼評(píng)審、在線筆試、代碼檢查結(jié)果反饋、輕量在線研發(fā)等眾多場(chǎng)景，同年 8 月 vscode.dev 和 github.dev 上線，與之相比，CodeBlitz 利用 OpenSumi 框架的高擴(kuò)展性，業(yè)務(wù)可以更加深度的定制模塊與插件，讓業(yè)務(wù)有多的想象空間。

03

CodeBlitz 應(yīng)用實(shí)踐

3.1. 代碼閱讀

代碼閱讀是 CodeBlitz 最常見(jiàn)的應(yīng)用場(chǎng)景，通常此類場(chǎng)景不需要運(yùn)行/調(diào)試代碼，所以也無(wú)需容器環(huán)境，內(nèi)部常見(jiàn)的場(chǎng)景有代碼閱讀、代碼掃描報(bào)告查看等場(chǎng)景，可以說(shuō)需要代碼閱讀的場(chǎng)景就有 CodeBlitz 的身影。

3.2. WebSCM

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

3.3. 代碼評(píng)審

代碼評(píng)審功能用戶長(zhǎng)久以來(lái)一直反饋以下幾個(gè)問(wèn)題：

語(yǔ)言服務(wù)缺失，閱讀效率低：缺少代碼高亮、提示、跳轉(zhuǎn)、查看引用及大綱功能

大 PR 瀏覽體驗(yàn)不佳：統(tǒng)計(jì)顯示 Gitlink PR 平均有 14-17 個(gè)變更文件，傳統(tǒng)代碼評(píng)審交互一般為代碼 Diff 組件流式展示，對(duì)于一些變更文件多、文件內(nèi)部較大的場(chǎng)景 Review 體驗(yàn)不佳，常常要等待很久。

代碼修改流程重，耗時(shí)久：代碼 Diff 組件只有讀能力，無(wú)法快速修改一些拼寫或 lint 錯(cuò)誤，需要在本地找到對(duì)應(yīng)文件后修改提交

針對(duì)于上述需求，CodeBlitz 提供了 IDE 風(fēng)格的代碼評(píng)審場(chǎng)景：

IDE 模式的代碼評(píng)審場(chǎng)景主要模塊如下：

變更樹

提供平鋪和樹狀兩種瀏覽方式

變更樹使用 OpenSumi Recycle 組件，對(duì)于大 PR 也能通過(guò)虛擬滾動(dòng)高性能的查看變更文件

工具欄

提供 IDE 編輯器基礎(chǔ)設(shè)置，如字體大小、編碼、忽略收尾空格等

快速切換當(dāng)前分支歷史版本與基線的對(duì)比

變更文件快速定位、設(shè)置已查看，并支持快捷鍵快速執(zhí)行

編輯器

通過(guò) monaco fold 能力完成非變更內(nèi)容的折疊

自定義評(píng)論組件嵌入編輯器

插件

復(fù)用代碼瀏覽 Blame 插件能力進(jìn)行代碼行 Git 信息查看

3.4. 解決沖突

解決沖突是研發(fā)同學(xué)經(jīng)常會(huì)遇到的問(wèn)題之一，多人協(xié)作的情況下極易出現(xiàn)沖突。與之前提到的一樣，每一次在 Cloud IDE 上解沖沖突都需要啟動(dòng)一個(gè)容器，而高峰期則意味著很容易短時(shí)間內(nèi)出現(xiàn)資源不足的問(wèn)題。同時(shí)倉(cāng)庫(kù) clone 往往耗時(shí) 20 秒以上，這導(dǎo)致許多同學(xué)解決沖突時(shí)使用體驗(yàn)都不佳。通過(guò) CodeBlitz 可以實(shí)現(xiàn)秒級(jí)還原沖突、解決沖突。

針對(duì)于 Java 同學(xué)對(duì)于 IntelliJ IDEA 使用習(xí)慣，OpenSumi 提供了 3-way merge editor，讓 Java 同學(xué)解決沖突更加絲滑。

3.5. 在線筆試

在線筆試也是 CodeBlitz 非常受歡迎的場(chǎng)景之一，使用過(guò)阿里伯樂(lè)系統(tǒng)的同學(xué)應(yīng)該已經(jīng)體驗(yàn)過(guò) CodeBlitz 提供的編輯器及編輯器內(nèi)的協(xié)同能力。

3.6. 在線運(yùn)行

對(duì)于一些項(xiàng)目體驗(yàn)場(chǎng)景來(lái)說(shuō)，無(wú)需復(fù)雜的語(yǔ)言服務(wù)能力，簡(jiǎn)單修改，遠(yuǎn)程運(yùn)行，螞蟻鏈智能合約使用 CodeBlitz 作為 Web IDE 編輯器，對(duì)接螞蟻鏈中心化服務(wù)實(shí)現(xiàn)編譯合約、部署合約

體驗(yàn)地址： https://openlab.antchain.antgroup.com/ide

04

誰(shuí)在使用 CodeBlitz ？

除了螞蟻、阿里內(nèi)部的一些實(shí)踐以外，CodeBlitz 在正式開源前也已經(jīng)和 CCF Gitlink、Atom Git 等外部產(chǎn)品展開合作。

4.1. CCF Gitlink

在代碼托管平臺(tái)上進(jìn)行代碼閱讀時(shí)經(jīng)常需要查看當(dāng)前方法在哪里被引用、當(dāng)前接口在哪里被實(shí)現(xiàn)，CodeBlitz 為 Gitlink 提供編輯器 + 插件的能力，解決了上述用戶需求：

Gitlink 通過(guò)實(shí)現(xiàn) Blame 插件，完成了編輯器 Blame 查看的能力：

Gitlink 通過(guò)集成 CodeBlitz，也支持用 IDE 模式評(píng)審代碼，甚至能一鍵修改：

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

基于這個(gè)洞察，Gitlink 與螞蟻研發(fā)效能云研發(fā)團(tuán)隊(duì)合作，集成 CodeBlitz 并推出 Gitlink Web IDE，可以一鍵快速打開 Web IDE 訪問(wèn)閱讀項(xiàng)目倉(cāng)庫(kù)代碼，實(shí)現(xiàn)項(xiàng)目與 IDE 的無(wú)縫銜接，保持研發(fā)同學(xué)的日常偏好習(xí)慣，同時(shí)完美兼容 Gitlink 代碼托管平臺(tái)。更重要的是，通過(guò)無(wú)容器在瀏覽器上直接運(yùn)行 Web IDE，確保「秒開」的即時(shí)體驗(yàn)。

體驗(yàn)地址： https://www.gitlink.org.cn/Gitlink/forgeplus/webIDE/tree/master

更多 CodeBlitz 與 Gitlink 合作詳見(jiàn) GitLink 如何使用 OpenSumi 突破代碼托管平臺(tái)3大體驗(yàn)瓶頸？

4.2. 開放原子 Atom Git

Atom Git 是開放原子開源基金會(huì)代碼托管平臺(tái)，CodeBlitz 為 Atom Git 提供 Web IDE 應(yīng)用，用戶在倉(cāng)庫(kù)安裝應(yīng)用后即可體驗(yàn) CodeBlitz 提供的 Web IDE 能力

體驗(yàn)地址： https://atomgit.com/opensumi/codeblitz

更多 CodeBlitz 與 Atom Git 合作詳見(jiàn)吧 OpenSumi X AtomGit：WebIDE 與代碼托管的合作實(shí)踐

4.3. 支付寶小程序云

支付寶云開發(fā)是基于 Serverless 的一站式小程序后端服務(wù)開發(fā)平臺(tái)，其中函數(shù)在線編輯 IDE 使用 CodeBlitz。

體驗(yàn)地址：https://cloudbase.cloud.alipay.com

螞蟻研發(fā)效能已將內(nèi)部產(chǎn)品陸續(xù)上架到支付寶小程序云，其中代碼閱讀、Web IDE、解決沖突等場(chǎng)景已可以通過(guò)云效能來(lái)體驗(yàn) CodeBlitz 的能力。

體驗(yàn)地址：https://code.cloud.alipay.com

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

CodeBlitz 在常規(guī)的 Cloud IDE、客戶端 IDE 之外，探索出了只需要瀏覽器環(huán)境即可擁有 IDE 體驗(yàn)的場(chǎng)景，與 github.dev、vscode.dev 不同的是，CodeBlitz 作為框架可以讓上層產(chǎn)品通過(guò) OpenSumi 模塊、插件的方式定制出屬于自己業(yè)務(wù)場(chǎng)景的 Web IDE，如果您有此類需求，不妨試試 CodeBlitz。

審核編輯：彭菁