经历近3年时间，在蚂蚁集团及阿里巴巴集团共建小组的努力下，OpenSumi作为国内首个强定制性、高性能，兼容 VS Code插件体系的IDE研发框架，今天正式对外开源。
一 OpenSumi 是什么？
OpenSumi是一款面向垂直领域，低门槛、高性能、高定制性的双端（Web 及 Electron）IDE研发的框架。
框架早期由蚂蚁集团体验技术部、研发效能团队，阿里集团淘系工程团队联合发起，共同研发的IDE标准化研发框架。它基于TypeScript + React进行编码，实现了包含资源管理器、编辑器、调试、Git 面板、搜索面板等核心功能模块，开发者只要基于我们的起步项目进行简单配置，便可以快速地搭建属于自己的本地或云端IDE产品，框架自身兼容VS Code插件生态，主流VS Code插件均可无缝在基于OpenSumi研发的产品中运行，同时，框架也为开发者提供多种低成本，高定制的视图定制能力，能满足IDE场景下绝大多数的视图定制场景。
对于IDE研发，现今市面上已有了code-server、Theia等开源方案，我们为什么选择自研实现？自2019年开始，蚂蚁集团及阿里集团内部已经有了许多 IDE产品，大部分产品对于IDE产品的前期建设大抵相同，但是这部分前期建设工作占用的时间周期较长，而在部分团队使用开源方案的过程中，大家也或多或少遇到了一些问题，如定制能力有限、源码依赖深、维护困难、无法满足内部能力需求等问题。最终通过各方的协作，走上了自研实现的道路。
二 OpenSumi 有什么优势？
正如前面所说的，OpenSumi 是一款面向垂直领域，低门槛、高性能、高定制性的双端（Web 及 Electron）IDE研发的框架。它的特点主要体现在下面几点内容：
1 全面的视图定制能力
除了与主流浏览器相近的性能及编码体验外，在面向业务的垂直领域，我们拥有远超于同类框架的定制能力，基于我们的基础框架，你可以自由的通过模块或插件定制你的IDE产品，能达到真正意义上的 “全视图定制” 能力。在许多内部产品实现阶段，我们会自然地通过模块去实现基础能力获得更好的维护性，而通过插件去实现业务上的视图或能力上的定制，达到更高的定制性。以阿里内部的部分研发场景为例，结构分层如下：
2 丰富的垂直领域研发支撑经验
OpenSumi在正式开源之前，在蚂蚁集团及阿里集团内部已持续性孵化了两年之久，期间沉淀落地了一系列具有代表意义的垂直领域下的研发案例，大部分你能想到的研发实践场景，可能都可以在OpenSumi中找到实践经验。1. 小程序研发场景
针对小程序研发场景， 支付宝小程序开发者工具以及淘宝小程序开发者工具便是使用了OpenSumi作为核心框架进行实现，截至目前，月服务开发者数量已达到 2W +。通过我们的Toolbar贡献点及额外的sumi API，我们能通过插件实现进一步的视图定制。如：
同时，共享的底层及插件能力，也让端到端的快速移植成为可能，通过对支付宝小程序开发者工具相关插件的移植，我们在短短1个月的时间内就完成了对功能相近，但使用场景不同的淘宝小程序开发者工具初期版本的支持，同时孵化出内部使用的O2 客户端。2. 云端一体化研发链路
在云端一体化研发链路上，我们在外部有阿里云云开发平台 ，内部则有O2、Ant Codespaces 等产品。
我们在开始一个项目研发前往往都需要经历一些或简单或繁琐的环境配置工作，你的编码环境也与云上环境存在割裂，借助阿里云等云产品的容器能力， 我们可以通过 OpenSumi搭建属于企业或团队的云端编码环境，让开发者真正省去环境配置问题，在云端完成一切的开发工作。
通过深度的流程定制，能让开发者快捷地进入开发状态。通过和内部研发平台打通，可以一站式完成开发、测试、部署等工作。3. 纯前端搭建
纯前端搭建能力是OpenSumi在蚂蚁及阿里集团内应用的最为广泛的一块能力，它提供了一种不需要依赖服务端去提供编辑器启动所需的Node.js服务，直接通过纯前端资源及静态接口定义便能搭建起来一个具备编辑器基本界面的能力。
其实现核心是通过对文件、Git 等原本依赖Node的服务进行了一层服务层抽象，让开发者可以手动定义文件读写等服务的具体逻辑，同时基于OpenSumi 提供的Web Worker API , 将语言服务运行于浏览器的Web Worker环境中，从而实现了框架的去Node化，达到纯前端搭建的效果。
基于这层实现，你完全可以基于GitHub Rest API去实现一个纯前端编辑器，可以从上面直接进行GitHub代码的查看、编辑及提交等操作，后续我们会考虑做一个相应的案例出来。而在内部，典型的应用是如下一些场景：
我们在OpenSumi 代码仓库中也提供了一个简易的入门案例 opensumi/ide-startup-lite [1], 你也可以直接通过 预览页面 [2]直接查看 Demo 效果。
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， 进度可见 适配计划 。三 OpenSumi 与市面主流框架的区别
我们在设计初期便对VS Code 、Theia的源码进行了深入的学习，实现过程中，为了兼容VS Code插件生态，同时兼容主流编辑器的一些功能及体验，部分设计及实现上我们有部分源码也参考了两位老师的实现，对应代码区块已标注了版权头信息。
1 与 VS Code 的关系
VS Code作为市场占用率较大的IDE，其核心为一个IDE产品，本质上与我们的框架属性存在区别，整体上是一个ToC的产品，开发者进行定制的门槛及成本较高，可自定义的内容也比较有限，大部分是通过插件的形式进行有限拓展。
而我们的框架主要是服务用户为ToB用户，对那些需要通过IDE框架搭建自有的 CloudIDE / 本地 IDE 产品而又没有充足技术研发能力的中小企业是一个简单、便捷的开发选项之一。
2 与 Theia 的关系
Theia作为后起之秀，借鉴VS Code的一些设计理念，经过近几年的发展逐步成熟，社区也相对繁荣，背靠Eclipse基金会，也是IDE开发者一个不错的开发选项，与我们的OpenSumi框架是存在竞争关系的。
Theia本身提供了一种模块化构建 IDE产品的能力，大部分视图上的定制绝大部分可通过模块的方式去进行拓展的（这点在我们的 OpenSumi 中也有借鉴相应思路），在插件能力上兼容了大部分的VS Code 插件，提供了一份VS Code插件API的子集能力，部分插件API（如 debug、language 等）并没有完全实现且也无后续持续性的跟进计划。
基于上面这些点上， OpenSumi框架不仅支持了基础的模块方式拓展，在插件层面上，我们有持续性跟进VS Code标准API的规划 （当前已实现 VS Code 1.16.0 版本 API），同时，我们基于实现了一个前端沙箱，提供了一系列的sumi API用于通过插件的方式自由地拓展我们的视图能力，熟悉React的前端同学可以直接上手进行前端组件的编写，通过我们提供的丰富的API去实现相应的功能视图。四 为什么要开源？
IDE产品的研发，一直以来都是一件门槛较高，费时费力的事情，我们希望通过开源 OpenSumi帮助对IDE有兴趣的开发者更好的了解并掌握IDE研发这项技术，让更多的开发者可以以一种低门槛的方式去研发自己的IDE产品，通过社区中开发者的使用，也可以帮助我们更好的改进我们的框架，获得更多的需求场景输入，同时，通过社区的影响力让框架获得更加长远的发展。五 后续规划
1 版本发布
框架目前每两至三周会进行一次迭代发布任务，由版本管理员统一维护合入相关功能及问题修复等内容，每次迭代过程中我们都会安排两名 “版本校验员” 进行版本检验，在测试通过后，我们才会升级一位minor版本后发布，我们会持续性保证最新的两个minor版本的有效性，即 “如果发现了影响功能的问题，我们会向最新的两个minor版本同步修复，发布patch版本 ”。版本示意如图所示：以最近2022年1月份的迭代计划为例，版本发布的计划可见：Iteration Plan for v2.14.0[3]
2 Roadmap
当前对于OpenSumi2022年的Roadmap已有初步雏形，见OpenSumi2022 Roadmap[4]讨论，后续会根据社区反馈及讨论在2-3月份正式确定。
我们会持续性地完成VS Code API的适配、编码/调试体验优化、性能优化工作，同时积极收集社区中反馈的功能需求，以双周迭代的方式选择性吸收进框架计划中。
同时，对于框架，我们也设定了一些基础的长期目标，如下图所示：
如果你对OpenSumi有相应的兴趣，你也可以来opensumi/core[5]仓库转转，也非常欢迎各位为我们的框架贡献代码和意见。
项目地址：https://github.com/opensumi/core官网地址：http://opensumi.com/❤️ H5-Dooring，让H5制作更简单
❤️ 谢谢支持
以上便是本次分享的全部内容，希望对你有所帮助^_^
喜欢的话别忘了 分享、点赞、收藏 三连哦~。
