作者 | OpenSumi

本文整理自 OpenSumi/CodeBlitz 负责人王兴龙在 2024 外滩大会创新舞台的主题演讲。

TL；DR 太长不看版本

CodeBlitz 是基于 OpenSumi 的纯浏览器 IDE 框架，支持在无容器的情况下在浏览器中进行代码浏览、代码编写，并可运行 OpenSumi Worker 插件 /VS Code For Web 插件，常见使用场景有代码阅读、代码评审、解决冲突、原型开发、在线评测等，已经在国内头部代码服务平台中广泛使用，例如 CCF Gitlink、开放原子 AtomGit、阿里云云效 Codeup、Gitee 等。CodeBlitz 2.0 在 2024 外滩大会正式发布，核心亮点有 AI 原生升级、支持多实例模式、新增 DiffViewerRenderer 组件，未来还会开放 WebContainer 能力、交互式教程组件，并探索与 WebGPU 深度结合的可能，愿景是实现 WebIDE + WebContainer + WebGPU 的 “Web 原生开发环境”。

01 前情回顾

CodeBlitz 是蚂蚁研发效能云研发团队在 2023 年 9 月开源的基于 OpenSumi 的纯浏览器 IDE 框架。

与OpenSumi 不同的是，CodeBlitz 无需容器资源，仅需浏览器即可拥有代码阅读、语法高亮、代码编写、代码提交 等能力，并通过开放的插件体系，支持 Git Graph、Git Blame 等 Git 辅助能力、多语言服务在线索引、基于 wasm 的代码运行能力。

2023 年 9 月外滩大会 CodeBlitz 正式开源

CodeBlitz 的起源：OpenSumi

CodeBlitz 的起源是 OpenSumi，OpenSumi 是阿里集团和蚂蚁集团共建的开源的、高性能和高度可定制的 IDE 研发框架。与 VS Code 和 IntelliJ IDEA 等 IDE 产品不同的是，OpenSumi 定位是可扩展的 IDE 框架，着重于降低定制难度，使开发者能够轻松组合功能模块，以满足特定的业务需求。OpenSumi 主要里程碑如下：

2019 年：由阿里集团和蚂蚁集团联合发起，并开始封闭开发 2020 年：发布 1.0 版本，引入插件机制并实现了对 VS Code 插件的兼容 2021 年：发布 2.0 版本，提供了基于 React 组件的侧边面板插件机制，定制 UI 界面更加方便 2022 年 3 月：项目正式开源，被应用于支付宝小程序 IDE、支付宝小程序云 Codespaces、飞书开发者工具、钉钉开发者工具等多个产品中 2023 年 9 月：发布了纯浏览器 IDE 解决方案 CodeBlitz 2024 年 5 月：发布 3.0 版本，是业界首款 AI 原生 IDE 框架

OpenSumi 为开发者提供了一套工具和组件，用以构建双端（客户端或 Cloud IDE）的集成开发环境。

不是所有场景都需要容器

蚂蚁研发效能云研发团队通过 OpenSumi 打造的 Cloud IDE 产品在内部对接了很多研发场景，但在对接的过程中发现，并不是所有场景都需要研发容器。需要带研发容器的场景一般依赖运行、调试等能力，但读代码、简单写代码等轻量场景则没必要挂载容器。而且，依赖容器可能会有以下几个问题：

启动较慢：冷启动容器一般较慢，即便做了预热优化，也并不能覆盖所有场景 资源浪费：容器是需要消耗计算资源和存储资源的，根据不同的容器规格，如果按照阿里云按量计费的 ECS 参考价格来计算，这中间产生的资源费用可能在 6 元到 80 元不等，显然这造成了极大的浪费 网络耗时：因为 Cloud IDE 通过 WebSocket 进行浏览器和容器的通信，那就必然决定了使用 Cloud IDE 就必须要有网络，而且网速好坏也会很大程度上印象研发体验。在无网情况下 Cloud IDE 是不可用状态

为了解决上述问题，CodeBlitz 应用而生。

IDE 的第四种形态

如果按照 IDE 前后端分离的架构组合，IDE 的无非有以下几种：

OpenSumi 重点支持前三种场景，而 CodeBlitz 则全力支持最后一种场景。

CodeBlitz 常见场景

代码阅读

代码阅读是 CodeBlitz 最常见的应用场景，通常此类场景不需要运行 / 调试代码，所以也无需容器环境，内部常见的场景有代码阅读、代码扫描报告查看等场景，可以说需要代码阅读的场景就有 CodeBlitz 的身影。

各种各样的代码阅读场景

代码提交

传统的代码托管平台修改代码只能单文件修改提交，CodeBlitz 让 WebIDE 拥有了 WebSCM 能力，可以在 Web IDE 中新建分支，修改代码后在 SCM 面板看到变更文件列表，写完 commit message 后提交到代码服务上。如果想快速修改一些文件可以不用在本地修改，直接通过 Web IDE 修改代码一次性提交，并可以一键创建轻量级 PR。

浏览器监听到变更文件，可查看 Diff 并提交变更代码

原型开发

CodeBlitz 非常适合开发类似 CodesandBox 之类的前端原型开发工具，配合 CodeBlitz 的代码补全能力、插件机制可以非常方便的针对组件、库、框架做出对应的 Playground 产品，方便分享与协作。

蚂蚁内部前端原型开发产品

代码评审

传统代码评审交互一般为代码 Diff 组件流式展示，对于一些变更文件多、文件内部较大的场景 Review 体验不佳，常常要等待很久；在浏览时缺少语言服务提示，阅读效率低；并且代码 Diff 组件只有只读功能，无法快速修改一些拼写或 lint 错误，需要在本地找到对应文件后修改提交针对于上述需求。CodeBlitz 提供了 IDE 模式的代码评审组件，让用户用熟悉的 IDE 看代码方式去评审。

Gitlink 通过集成 CodeBlitz 支持评审代码、修改代码

解决冲突

解决冲突是研发同学经常会遇到的问题之一，多人协作的情况下极易出现冲突。每一次在 Cloud IDE 上解冲冲突都需要启动一个容器，而高峰期则意味着很容易短时间内出现资源不足的问题。同时仓库 clone 往往耗时 20 秒以上，这导致许多同学解决冲突时使用体验都不佳。CodeBlitz 使用无容器的技术方案，既满足了需求，又节省了成本。

CodeBlitz 3-way merge editor 模式

在线笔试

在线笔试也是 CodeBlitz 非常受欢迎的场景之一，提供实施协同可以看到候选人和面试官的编辑动作，使用过阿里伯乐系统的同学应该已经体验过 CodeBlitz 提供的编辑器及编辑器内的协同能力。

阿里伯乐在线笔试系统

近一年接入情况

CodeBlitz 持续和国内头部代码托管平台进行合作，除了之前接入的中国计算机学会 CCF Gitlink、开放原子 AtomGit 以外，新接入的产品包含阿里云云效 Codeup、Gitee，众多企业内部的代码托管平台（如美团）也是用 CodeBlitz 升级了浏览代码的交互。

OpenSumi/CodeBlitz 也联合了 OpenEuler 社区和龙蜥社区成立 IDE SIG 组，加强项目生态系统建设。

CodeBlitz 近一年的接入情况

02 CodeBlitz 2.0 特性

CodeBlitz 2.0 主要有三大特性：AI 原生、多实例和开箱即用的 DiffViewerRenderer 提供。

CodeBlitz 2.0 三大特性

AI 原生

得益于 OpenSumi 3.0 的发布（我们用大模型给 IDE 升了个级，这是我们总结的万字心得），CodeBlitz 同样迎来了 AI 技术的升级。CodeBlitz 不仅延续了其在“阅读”代码方面的强大能力（例如在阅读代码时解释当前代码，这在代码服务平台非常有用），而且通过 AI 扩展了代码编写的能力，之前只能在前端语言进行补全（例如 HTML/CSS/JS/TS/Markdown），现在即便是 Java、Go、C++ 等后端语言上也拥有了强大的 AI 代码补全功能，弥补了 CodeBlitz 在代码编辑的先天不足。

AI 功能展示

以下是部分 AI 代码编辑相关的功能：

无需下载插件插件，可接入任意模型的补全能力

已关注

关注

重播分享赞

关闭

观看更多

更多

退出全屏

视频加载失败，请刷新页面再试

通过自然语言与编辑器进行 AI 交互，Diff 级片段采纳

AI 通过上下文和历史经验给出重命名名称

可定制的知识问题侧边栏

已关注

关注

重播分享赞

关闭

观看更多

更多

退出全屏

视频加载失败，请刷新页面再试

通过模型识别冲突并自动解决

对接任意模型

CodeBlitz 同样是支持自定义 prompt 能力，并支持任意模型的接入。

可更具业务场景自定义 prompt

可支持补全及问答的模型接口对接

多实例

CodeBlitz 1.0 只支持在页面出现一个 Editor 区域，无法满足一个页面可能出现多个编辑器的场景。

例如上述代码评审场景，需要点击变更文件来切换文件，对于一些单个文件变更内容少但是变更文件个数多的场景来说会多出很多点击操作。

CodeBlitz 2.0 支持在页面任意地方实例化出 Editor 组件，以满足需要一屏浏览所有 Diff 代码的场景。

一个页面可展示多个 CodeBlitz Editor

DiffViewerRenderer

随着 GitHub Copilot Workspace（https://githubnext.com/projects/copilot-workspace）的问世，代码智能体应用蕴含着未来让自然语言成为编程第一语言的潜力，蚂蚁集团研发效能部门也使用 CodeBlitz 在做类似的的代码智能体应用。AI 生成代码后需要有一个方便的方式来采纳或者快捷修改，我们将 CodeBlitz DiffViewerRenderer 组件开源出来，供业内有类似需求的产品来快速集成。

已关注

关注

重播分享赞

关闭

观看更多

更多

退出全屏

视频加载失败，请刷新页面再试

支持流式输出及 Diff 及采纳

DiffViewerRenderer 的集成方式也非常简单：

DiffViewerRenderer 组件集成方式

至此，CodeBlitz 目前提供的组件共有三种：

03 未来展望

WebContainer

2021 年 Google I/O 大会上，StackBlitz 团队分享了 WebContainer《Introducing WebContainers: Run Node.js natively in your browser》（https://blog.stackblitz.com/posts/introducing-webcontainers/），它提供了一种可以将 Node.js 跑到浏览器中的技术，更大的愿景是基于 WASI（WebAssembly System Interface），可以让更多语言通过 WebAssambly 跑在浏览器上，形成真正意义的“Web 容器”。

StackBlitz 关于 WebContaner 的介绍

除了在浏览器上运行代码的场景以外，还有利用 WebAssambly 将图片转为更加适合网页加载的 webp 格式的工具（https://dub.sh/webp），在线裁剪音频 / 视频的工具（https://ffmpeg-online.vercel.app），WebAssambly 的能力不需要下载软件，打开浏览器就能完成工具需求；又很好地保护了用户的隐私，无需将图片 / 音频 / 视频上传到远程服务上，本地就能处理，WebAssambly 在边缘计算的应用前景非常广泛。

基于 WebContainer 的在线图片转换工具

StackBlitz WebContainer 目前还是一个闭源的技术，OpenSumi 团队也一直在探索相关方案，因为 WebContainer 补齐了 CodeBlitz 不能运行后端语言的短板。我们完成了 WebContainer 的初步建设：

可以在浏览器环境运行 Node.js 环境：可运行 npm、Webpack、Vite 等前端基建，通过 npmmirror.com 下载和安装 npm 依赖，甚至可以运行完整 OpenSumi 插件进程，让 CodeBlitz 对于 TS/JS 的语言服务可以和本地 IDE 媲美 使用 Service Worker 完成请求代理：利用 Service Worker 对于请求的代理转发能力，可以像本地服务一样预览页面、接口等 基于 WebAssembly 提供文件系统及多语言支持：自研了一款基于 WebAssembly 技术的 POSIX 运行时，提供高性能的文件系统，并且支持更多语言的运行，目前除了 Node.js 以外，还支持 Python 的运行（基于 pyodide）

WebContainer 代码运行的关键流程

WebContainer 在蚂蚁集团应用场景有：

在支付宝云开发的在线编辑场景中，使用 CodeBlitz + WebContainer + OpenSumi 插件进程来满足 FaaS 函数研发体验，支持了 npm 依赖的语言服务提示（WebContainer 在支付宝云开发的实践） 前端原型开发工具，用 WebContainer 运行前端构建工具 交互式 Python 学习工具，用 WebContainer 运行 python 代码，提供 Python 的语言服务 ...

WebContainer 常见的应用场景

在 WebContainer 技术比较成熟后，我们会考虑将此技术开源出去回馈社区。

交互式教程组件

上文提到的交互式教程是 CodeBlitz 团队成员参加蚂蚁黑客松比赛的作品。当初想做这个项目的起因很简单，就是因为大模型时代 Python 逐渐变成第一编程语言，甚至很多研发平台、中间件都开始优先支持 Python，所以想学一下 Python。最开始学习的时候在社区找到了一个不错的开源教程 「GitHub - jackfrued/Python-100-Days: Python - 100 天从新手到大师」（https://github.com/jackfrued/Python-100-Days）。这个教程将 Python 学习按照天维度分组，每天花一点时间学一学，坚持一百天，就能将 Python 这么语言及其生态掌握，课程也提供了丰富的代码示例，但是在学习的过程中，经常要将课程中的代码复制到 IDE 中运行一下看看，或者修改修改跑一跑，然后再切回教程继续学，整体体验还是比较割裂的，所以冒出来一个想法：教程学习能不能在一个页面搞定？包含文档教程、在线运行，最好还能由 AI 来辅助学习 Python，这样学习效率就会高一点。

上述想法其实也有理论支撑，就是《学习金字塔》（https://baike.baidu.com/item/%E5%AD%A6%E4%B9%A0%E9%87%91%E5%AD%97%E5%A1%94/9515094）理论。如果只是阅读，那么两周后只能记住 10% 的知识，如果加上动手操作，加上模拟、实战，两周后能记住 90% 的知识。边学习文字教程、边动手实践代码，从被动参与转变到主动参与，学习效率自然会翻倍！

学习金字塔理论

在线交互式教程工具在业内也非常火爆，以下是业界知名框架基于 StackBlitz 做的三款交互式学习工具：

SvelteKit： https://learn.svelte.dev/tutorial/welcome-to-svelte Angular： https://angular.dev/tutorials/learn-angular Nuxt： https://content.nuxt.com/playground

通过 CodeBlitz + WebContainer 也能非常容易构建出上述类似的交互式教程工具：

蚂蚁黑客松作品《Python 100 天》

导航区：教程内容及翻页按钮 教程区：教程内容，教程的代码块可以直接插入到 IDE 区，用户可以修改或者运行 编辑区：支持对教程代码进行编辑，编写代码时会有语言服务提示 预览区：支持教程代码运行，也支持 Web 页面的预览 对话区：支持当前 Python 教程的问答，支持 AI 伴学 端智能 WebGPU 是一种新的现代 API，用于在 Web 应用中访问 GPU 的功能。WebGPU 可以支持高级的渲染技术，例如光线追踪、阴影、反射、环境光遮蔽等。开发人员可以利用现代 GPU 的强大功能在 Web 上创建令人惊叹的视觉效果和复杂模拟仿真。 WebGPU 在图形上的应用 除了渲染之外，WebGPU 还可以释放 GPU 用于执行通用、高度并行工作负载的潜力。这些计算着色器可以独立使用（无需任何渲染组件），也可以作为渲染流水线紧密集成的一部分使用。WebGPU 可以处理大量数据的并行计算，例如粒子系统、流体动力学、物理引擎、机器学习、LLM 等。

陈天奇团队发布的基于 WebGPU 的 WebLLM 项目

（https://github.com/mlc-ai/web-llm）

WebGPU 有零云服务成本、更加保护隐身等特点，Chrome 近期也实验性的内置了 Gemini 模型，当端模型技术更加成熟时，CodeBlitz 也会和端模型有更深度的结合，或许那时候就该发布 CodeBlitz 3.0 了 :)

未来可能的端智能 IDE

愿景：Web 原生开发环境

OpenSumi 团队以前通过 OpenSumi 打造“客户端开发环境”、“云原生开发环境”，现在正在探索“AI 原生开发环境”的 OpenSumi 3.0，CodeBlitz 是我们想探索的另外一种模式：“Web 原生开发环境”：

Web 原生开发环境的畅想

在这种模式下，所有的代码使用 WebIDE 编写、运行环境由支持各种语言的 WebContainer 提供、AI 算力由 WebGPU 提供，未来的 Web 将比以往任何时候都更普惠、更强大和更开放。