CodeBlitz 2.0发布：AI原生、多实例、无容器Web IDE 框架

AI原生、多实例、无容器，Web IDE 框架 CodeBlitz 2.0 发布

OpenSumi InfoQ

作者 | 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 的代码运行能力。

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 的无非有以下几种：

客户端 IDE：如 VS Code、IntelliJ IDEA
Cloud IDE：如 AWS Cloud9、GitHub Codespaces
Web IDE：如 VS Codefor the Web、OpenSumi
纯浏览器 IDE：如 CodeBlitz

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

CodeBlitz 常见场景

代码阅读：代码阅读是 CodeBlitz 最常见的应用场景，通常此类场景不需要运行 / 调试代码，所以也无需容器环境，内部常见的场景有代码阅读、代码扫描报告查看等场景，可以说需要代码阅读的场景就有 CodeBlitz 的身影。
代码提交：传统的代码托管平台修改代码只能单文件修改提交，CodeBlitz 让 WebIDE 拥有了 WebSCM 能力，可以在 Web IDE 中新建分支，修改代码后在 SCM 面板看到变更文件列表，写完 commit message 后提交到代码服务上。如果想快速修改一些文件可以不用在本地修改，直接通过 Web IDE 修改代码一次性提交，并可以一键创建轻量级 PR。
*原型开发：CodeBlitz 非常适合开发类似 CodesandBox 之类的前端原型开发工具，配合 CodeBlitz 的代码补全能力、插件机制可以非常方便的针对组件、库、框架做出对应的 Playground 产品，方便分享与协作。
代码评审：传统代码评审交互一般为代码 Diff 组件流式展示，对于一些变更文件多、文件内部较大的场景 Review 体验不佳，常常要等待很久；在浏览时缺少语言服务提示，阅读效率低；并且代码 Diff 组件只有只读功能，无法快速修改一些拼写或 lint 错误，需要在本地找到对应文件后修改提交。针对于上述需求。CodeBlitz 提供了 IDE 模式的代码评审组件，让用户用熟悉的 IDE 看代码方式去评审。
解决冲突：解决冲突是研发同学经常会遇到的问题之一，多人协作的情况下极易出现冲突。每一次在 Cloud IDE上解冲冲突都需要启动一个容器，而高峰期则意味着很容易短时间内出现资源不足的问题。同时仓库 clone 往往耗时 20 秒以上，这导致许多同学解决冲突时使用体验都不佳。CodeBlitz 使用无容器的技术方案，既满足了需求，又节省了成本。
在线笔试：在线笔试也是 CodeBlitz 非常受欢迎的场景之一，提供实施协同可以看到候选人和面试官的编辑动作，使用过阿里伯乐系统的同学应该已经体验过 CodeBlitz 提供的编辑器及编辑器内的协同能力。

近一年接入情况

CodeBlitz 持续和国内头部代码托管平台进行合作，除了之前接入的中国计算机学会 CCF Gitlink、开放原子 AtomGit 以外，新接入的产品包含阿里云云效 Codeup、Gitee，众多企业内部的代码托管平台（如美团）也是用 CodeBlitz升级了浏览代码的交互。OpenSumi/CodeBlitz 也联合了 OpenEuler 社区和龙蜥社区成立 IDE SIG 组，加强项目生态系统建设。

02 CodeBlitz 2.0 特性

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

AI 原生

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

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

无需下载插件插件，可接入任意模型的补全能力
通过自然语言与编辑器进行 AI 交互，Diff 级片段采纳
AI 通过上下文和历史经验给出重命名名称
可定制的知识问题侧边栏
通过模型识别冲突并自动解决

对接任意模型

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

多实例

CodeBlitz 1.0 只支持在页面出现一个 Editor 区域，无法满足一个页面可能出现多个编辑器的场景。例如上述代码评审场景，需要点击变更文件来切换编辑器，CodeBlitz 2.0 则支持在一个页面打开多个编辑器，并可以方便地进行切换和管理。

DiffViewerRenderer

CodeBlitz 2.0 新增了 DiffViewerRenderer 组件，可以方便地将代码 Diff 展示在 Web IDE 中，并支持代码高亮、行号显示、折叠等功能。

03 未来展望

CodeBlitz 团队表示，未来会继续开发更多功能，例如：

*WebContainer 能力：支持在浏览器中运行代码，并提供调试功能。
* 交互式教程组件：方便用户学习使用 CodeBlitz。
* 与 WebGPU 深度结合：探索 WebGPU 的潜力，为 Web IDE 提供更强大的图形渲染能力。

CodeBlitz 团队的目标是打造一个真正意义上的“Web 原生开发环境”，让开发者能够在任何地方、任何设备上进行开发工作。

总结

CodeBlitz 2.0 的发布标志着 Web IDE 框架发展进入了一个新的阶段。AI 原生、多实例、无容器等特性，让CodeBlitz 更加强大、灵活、易用，为开发者提供了更加便捷、高效的开发体验。相信随着 CodeBlitz 团队的不断努力，CodeBlitz 会在未来成为 Web IDE 领域的领导者。

>>> Read more <<<