阿里 & 蚂蚁自研 IDE

Posted 2022-10-14 师兄白泽

经历近 3 年时间，在阿里集团及蚂蚁集团共建小组的努力下，OpenSumi 作为国内首个强定制性、高性能，兼容 VS Code 插件体系的 IDE 研发框架，今天正式对外开源。

一、什么是opensumi？

OpenSumi 框架旨在解决阿里经济体内部 IDE 产品研发的重复建设问题，满足 IDE 在更多垂直场景的定制能力，同时实现 Web 与本地客户端共用底层，让 IDE 研发从早期的“刀耕火种”时代向“机器化大生产”时代迈进。
框架早期由阿里集团淘系工程团队及蚂蚁集团体验技术部、研发效能团队联合发起，共同研发的 IDE 标准化研发框架。它基于 TypeScript + React 进行编码，实现了包含资源管理器、编辑器、调试、Git 面板、搜索面板等核心功能模块，开发者只要基于我们的起步项目进行简单配置，便可以快速地搭建属于自己的本地或云端 IDE 产品，框架自身兼容 VS Code 插件生态，主流 VS Code 插件均可无缝在基于 OpenSumi 研发的产品中运行，同时，框架也为开发者提供多种低成本，高定制的视图定制能力，能满足 IDE 场景下绝大多数的视图定制场景。

二、整体架构

为了保证框架可以同时在 Web 和 Electron 环境下运行，OpenSumi 采用了一套前后端分离、通过一层抽象的通信层进行相互调用的项目结构。

在 Web 上，我们使用 WebSocket 来作为通信的实现。

在Electron 上，我们则是 IPC 通信。

每一个通信的连接对应前后端一个独立的 DI (Dependence Inject) 容器，所以 OpenSumi 的后端实现是无状态的，不同连接之间是严格隔离的。

在 OpenSumi 内主要有三个核心进程：

插件进程 （Extension Process）
后端进程 （Node Process）
前端进程 （Browser Process）
为了保证插件的问题不会影响 IDE 的性能表现，插件能力上 OpenSumi 采用了跟 VS Code 类似的方案，通过独立的插件进程去启动插件，插件进程再通过后端进程与前端进程进行通信。

OpenSumi整体架构

OpenSumi 的不同能力实现被拆分到了不同的模块内，这些模块通过 贡献点机制 (Contribution Point)、DI 机制 (Dependence Inject) 互相之间有较弱的依赖关系，对于一些比较核心的基础模块，如主题服务、布局服务等，也会被其他模块直接依赖。

因此，在集成开发过程中需要保证一些模块的引入顺序。

整体启动的生命周期如下图所示：

三、opensumi优势

1 全面的视图定制能力
除了与主流浏览器相近的性能及编码体验外，在面向业务的垂直领域，我们拥有远超于同类框架的定制能力，基于我们的基础框架，你可以自由的通过 模块 或 插件 定制你的 IDE 产品，能达到真正意义上的 “全视图定制” 能力。

在许多内部产品实现阶段，我们会自然的通过 模块 去实现基础能力获得更好的维护性，而通过 插件 去实现业务上的视图或能力上的定制，达到更高的定制性。以阿里内部的部分研发场景为例，结构分层如下：

2 丰富的垂直领域研发支撑经验
OpenSumi 在正式开源之前，在阿里及蚂蚁集团内部已持续性孵化了两年之久，期间沉淀落地了一系列具有代表意义的垂直领域下的研发案例，大部分你能想到的研发实践场景，可能都可以在 OpenSumi 中找到实践经验。

1. 小程序研发场景

针对小程序研发场景， 支付宝小程序开发者工具 以及 淘宝小程序开发者工具 便是使用了 OpenSumi 作为核心框架进行实现，截止目前，月服务开发者数量已达到 2W +。

通过我们的 Toolbar贡献点及额外的 sumi API，我们能通过插件实现进一步的视图定制。如：

1）定制不同的 Toolbar 展示

2）实现独立可通信的窗口调度（如模拟器）

同时，共享的底层及插件能力，也让端到端的快速移植成为可能，通过对 支付宝小程序开发者工具 相关插件的移植，我们在短短 1 个月的时间内就完成了对功能相近，但使用场景不同的 淘宝小程序开发者工具 初期版本的支持，同时孵化出内部使用的 O2 客户端。

2. 云端一体化研发链路

在云端一体化研发链路上，我们在外部有 阿里云云开发平台 ，内部则有 O2、Ant Codespaces 等产品。

常规的研发链路如下图上半部分所示。

我们在开始一个项目研发前往往都需要经历一些或简单或繁琐的环境配置工作，你的编码环境也与云上环境存在割裂，借助阿里云等云产品的容器能力， 我们可以通过 OpenSumi 搭建属于企业或团队的云端编码环境，让开发者真正省去环境配置问题，在云端完成一切的开发工作。

通过深度的流程定制，能让开发者快捷的进入开发状态。
通过和内部研发平台打通，可以一站式的完成开发、测试、部署等工作。

3. 纯前端搭建

纯前端搭建能力是 OpenSumi 在阿里及蚂蚁集团内应用的最为广泛的一块能力，它提供了一种不需要依赖服务端去提供编辑器启动所需的 Node.js 服务，直接通过纯前端资源及静态接口定义便能搭建起来一个具备编辑器基本界面的能力。

其实现核心是通过对文件、Git 等原本依赖 Node 的服务进行了一层服务层抽象，让开发者可以手动定义文件读写等服务的具体逻辑，同时基于 OpenSumi 提供的 Web Worker API , 将语言服务运行于浏览器的 Web Worker 环境中，从而实现了框架的去 Node 化，达到纯前端搭建的效果。

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， 进度可见 适配计划 。