TUhjnbcbe - 2022/6/21 14:26:00
经历近年时间，在蚂蚁集团及阿里巴巴集团共建小组的努力下，OpenSumi作为国内首个强定制性、高性能，兼容VSCode插件体系的IDE研发框架，今天正式对外开源。一OpenSumi是什么？OpenSumi是一款面向垂直领域，低门槛、高性能、高定制性的双端（Web及Electron）IDE研发的框架。框架早期由蚂蚁集团体验技术部、研发效能团队，阿里集团淘系工程团队联合发起，共同研发的IDE标准化研发框架。它基于TypeScript+React进行编码，实现了包含资源管理器、编辑器、调试、Git面板、搜索面板等核心功能模块，开发者只要基于我们的起步项目进行简单配置，便可以快速地搭建属于自己的本地或云端IDE产品，框架自身兼容VSCode插件生态，主流VSCode插件均可无缝在基于OpenSumi研发的产品中运行，同时，框架也为开发者提供多种低成本，高定制的视图定制能力，能满足IDE场景下绝大多数的视图定制场景。对于IDE研发，现今市面上已有了code-server、Theia等开源方案，我们为什么选择自研实现？自年开始，蚂蚁集团及阿里集团内部已经有了许多IDE产品，大部分产品对于IDE产品的前期建设大抵相同，但是这部分前期建设工作占用的时间周期较长，而在部分团队使用开源方案的过程中，大家也或多或少遇到了一些问题，如定制能力有限、源码依赖深、维护困难、无法满足内部能力需求等问题。最终通过各方的协作，走上了自研实现的道路。二OpenSumi有什么优势？正如前面所说的，OpenSumi是一款面向垂直领域，低门槛、高性能、高定制性的双端（Web及Electron）IDE研发的框架。它的特点主要体现在下面几点内容：1全面的视图定制能力除了与主流浏览器相近的性能及编码体验外，在面向业务的垂直领域，我们拥有远超于同类框架的定制能力，基于我们的基础框架，你可以自由的通过模块或插件定制你的IDE产品，能达到真正意义上的“全视图定制”能力。在许多内部产品实现阶段，我们会自然地通过模块去实现基础能力获得更好的维护性，而通过插件去实现业务上的视图或能力上的定制，达到更高的定制性。以阿里内部的部分研发场景为例，结构分层如下：丰富的垂直领域研发支撑经验OpenSumi在正式开源之前，在蚂蚁集团及阿里集团内部已持续性孵化了两年之久，期间沉淀落地了一系列具有代表意义的垂直领域下的研发案例，大部分你能想到的研发实践场景，可能都可以在OpenSumi中找到实践经验。1.小程序研发场景针对小程序研发场景，支付宝小程序开发者工具以及淘宝小程序开发者工具便是使用了OpenSumi作为核心框架进行实现，截至目前，月服务开发者数量已达到W+。通过我们的Toolbar贡献点及额外的sumiAPI，我们能通过插件实现进一步的视图定制。如：1）定制不同的Toolbar展示）实现独立可通信的窗口调度（如模拟器）同时，共享的底层及插件能力，也让端到端的快速移植成为可能，通过对支付宝小程序开发者工具相关插件的移植，我们在短短1个月的时间内就完成了对功能相近，但使用场景不同的淘宝小程序开发者工具初期版本的支持，同时孵化出内部使用的O客户端。.云端一体化研发链路在云端一体化研发链路上，我们在外部有阿里云云开发平台，内部则有O、AntCodespaces等产品。常规的研发链路如下图上半部分所示。我们在开始一个项目研发前往往都需要经历一些或简单或繁琐的环境配置工作，你的编码环境也与云上环境存在割裂，借助阿里云等云产品的容器能力，我们可以通过OpenSumi搭建属于企业或团队的云端编码环境，让开发者真正省去环境配置问题，在云端完成一切的开发工作。通过深度的流程定制，能让开发者快捷地进入开发状态。通过和内部研发平台打通，可以一站式完成开发、测试、部署等工作。.纯前端搭建纯前端搭建能力是OpenSumi在蚂蚁及阿里集团内应用的最为广泛的一块能力，它提供了一种不需要依赖服务端去提供编辑器启动所需的Node.js服务，直接通过纯前端资源及静态接口定义便能搭建起来一个具备编辑器基本界面的能力。其实现核心是通过对文件、Git等原本依赖Node的服务进行了一层服务层抽象，让开发者可以手动定义文件读写等服务的具体逻辑，同时基于OpenSumi提供的WebWorkerAPI,将语言服务运行于浏览器的WebWorker环境中，从而实现了框架的去Node化，达到纯前端搭建的效果。基于这层实现，你完全可以基于GitHubRestAPI去实现一个纯前端编辑器，可以从上面直接进行GitHub代码的查看、编辑及提交等操作，后续我们会考虑做一个相应的案例出来。而在内部，典型的应用是如下一些场景：1.代码评审.代码展示.远程笔试我们在OpenSumi代码仓库中也提供了一个简易的入门案例opensumi/ide-startup-lite[1],你也可以直接通过预览页面[]直接查看Demo效果。完整的VSCode的插件能力支持相信