简介：历经近3年，在阿里集团与蚂蚁集团联合建设团队的努力下，OpenSumi是首个强定制、高性能、兼容VSCode插件系统IDE开发框架今日正式开源。作者|OpenSumi来源|阿里科技公众号历经近3年，在阿里集团和蚂蚁集团的联合建设团队的努力下，OpenSumi作为国内首款强定制、高性能、兼容VSCode插件系统的IDE开发框架，正式发布今天开源。1什么是开住？OpenSumi是一个面向垂直、低门槛、高性能、高定制化的双端（Web和Electron）IDE开发框架。该框架前期由阿里巴巴集团淘系工程团队、体验技术部和蚂蚁集团研发效率团队共同发起，共同开发了IDE标准化研发框架。基于TypeScript+React编码，实现资源管理器、编辑器、调试、Git面板、搜索面板等核心功能模块，开发者基于我们的入门项目只需简单配置即可快速构建自己的本地或云端IDE产品，框架本身兼容VSCode插件生态，主流VSCode插件可以无缝运行在基于OpenSumi开发的产品中。同时，该框架还为开发者提供了多种低成本、高定制化的视图定制能力，可以满足IDE场景下的绝大部分视图定制场景。对于IDE的研发，市面上已经有code-server、Theia等开源方案。为什么我们选择自研实现？从2019年开始，我们发现阿里和蚂蚁集团已经有很多IDE产品了。大部分产品都有与IDE产品大致相同的预构建，但这部分预构建工作至少需要一个团队几个月的时间，只要半年或者一年，存在大量的重复劳动问题，而且在一些团队使用开源方案的过程中，大家或多或少都遇到过一些问题，比如定制能力有限，源代码深依赖、维护困难、无法满足内部容量需求等问题。最终，我们决心汇集多个团队的力量，走上自主发展之路。2OpenSumi有什么优势？前面提到，OpenSumi是一个面向垂直、低门槛、高性能、高定制化的双端（Web和Electron）IDE开发框架。其特点主要体现在以下几点：1.全面的视图定制能力除了与主流浏览器相似的性能和编码体验外，我们在面向业务的垂直领域拥有远超同类框架的定制能力。基于我们的基础框架，您可以通过模块或插件自由定制您的IDE产品，实现真正的“全视图定制”能力。在很多产品内部实现阶段，我们自然会使用模块来实现基础能力以实现更好的可维护性，使用插件来实现业务视图或能力的定制化以实现更高的定制化。以阿里内部的部分研发场景为例，分层结构如下：2丰富的垂直领域研发支持经验OpenSumi在正式开源之前，已经在阿里和蚂蚁集团持续孵化了两年一系列的研发代表性垂直领域案例，大部分你能想到的研发实践场景，你都可以在OpenSumi找到实践经验。1、小程序开发场景针对小程序开发场景，支付宝小程序开发者工具和淘宝小程序开发者工具都是以OpenSumi为核心框架实现的。截至目前，月服务开发者数量已达2W+。通过我们的Toolbar贡献点和附加的sumiAPI，我们可以通过插件实现进一步的视图自定义。例如：1）自定义不同的Toolbar显示2）实现独立可通信的窗口调度（如模拟器）同时共享底层和插件能力也让端到端的快速移植成为可能，通过支付宝小程序开发者工具相关插件的移植，我们在短短一个月内完成了对功能相似但使用场景不同的淘宝小程序开发者工具初始版本的支持，并孵化了内部使用的O2客户端同时。2、云集成研发环节在云集成研发环节，我们对外有阿里云开发平台，对内有O2、AntCodespaces等产品。常规研发环节如下图上半部分所示。我们在开始一个项目研发之前，往往需要经过一些简单或繁琐的环境配置工作。您的编码环境也与云环境分离。借助阿里云等云产品的容器能力，我们可以使用OpenSumi构建属于企业的业务环境。或者团队的云端编码环境，让开发者真正省去环境配置问题，在云端完成所有开发工作。通过深度流程定制，开发者可以快速进入开发状态。通过对接内部研发平台，一站式完成开发、测试、部署。3、纯前端构建纯前端构建能力是OpenSumi在阿里和蚂蚁集团使用最广泛的能力。它提供了一个不需要依赖服务端来启动编辑器的Node.js服务，直接通过纯前端资源和静态接口定义就可以构建一个具有编辑器基础界面的能力。其实现的核心是对原本依赖于Node的文件、Git等服务实现一层服务层抽象，让开发者可以手动定义文件读写等服务的具体逻辑。同时基于OpenSumi提供的WebWorkerAPI，将语言服务运行在浏览器的WebWorker环境中，从而实现了框架的去节点化，达到纯前端构建的效果。基于这一层实现，可以实现一个基于GitHubRestAPI的纯前端编辑器，可以直接从上面查看、编辑、提交GitHub代码。后面我们会考虑做一个相应的案例。在内部，典型的应用有以下几种场景：1.代码审查2.代码展示3.远程笔试我们在OpenSumi代码仓库中也提供了一个简单的入门案例opensumi/ide-startup-lite[1]，你也可以查看Demo效果直接通过预览页面[2]。3完整的VSCode插件能力支持相信关注过IDE框架的同学一定对Theia不陌生。作为一个兼容VSCode插件的IDE框架，Theia确实兼容了部分VSCode插件的能力，但是对于后续的VSCodeAPI的兼容越来越少，基本还是要靠社区开发者的发现和贡献。OpenSumi最初是为了兼容VSCode插件生态而设计的，所以我们对框架会有持续的需求。开源后，我们计划每三个月完成VSCode插件API的适配，并制定适配计划，由相应的版本管理员在讨论区组织。目前已经适配VSCodev1.60.0的标准API，适配计划中可以看到进度。3.OpenSumi与市场主流框架的区别我们在设计初期就深入研究了VSCode和Theia的源码。在实现上，部分源码我们也参考了两位老师的实现，对应的代码块已经标注了版权头信息。1与VSCode的关系VSCode作为市场占有率较大的IDE，其核心是IDE产品，与我们的框架属性有着本质的区别。整体是ToC产品，开发者定制的门槛和成本较高，可定制的内容比较有限，大部分是插件形式的有限扩展。我们的框架主要服务于ToB用户，对于需要通过IDE框架构建自己的CloudIDE/本地IDE产品，但没有足够的技术研发能力的中小企业来说，是简单方便的开发选择之一.2与Theia的关系Theia作为后起之秀，借鉴了VSCode的一些设计理念。经过几年的发展，逐渐成熟，社区也比较繁荣。由EclipseFoundation支持，它也是IDE开发人员的一个很好的开发选择。OpenSumi框架正在竞争。Theia本身提供了模块化构建IDE产品的能力。视图上的大部分自定义都可以通过模块来扩展（这一点也是借鉴了我们的OpenSumi）。在插件能力方面兼容绝大部分VSCode插件，提供部分VSCode插件API能力。部分插件API（如debug、language等）还没有完全实现，也没有后续跟进计划。基于以上几点，OpenSumi框架不仅支持基础模块方式的扩展，在插件层面，我们也持续跟进了VSCode标准API的规划（VSCode1.16.0版本API目前已经实现）。同时，我们基于一个前端沙箱的实现，它提供了一系列sumiAPI，通过插件的方式自由扩展我们的视图能力。熟悉React的前端同学可以直接通过我们提供的丰富API开始编写前端组件，实现相应的功能视图。四为什么开源？IDE产品的开发一直是一项耗时耗力、门槛高的工作。我们希望通过开源的OpenSumi，让对IDE感兴趣的开发者能够更好的了解和掌握IDE开发的技术，让更多的开发者能够低门槛的开发自己的IDE产品。通过社区开发者的使用，也可以帮助我们完善自己的框架，获得更多的需求场景输入。同时，通过社区的影响力让框架获得更长远的发展。五后续计划1版本发布框架目前每两到三周会进行一次迭代发布任务，由版本管理员统一维护并纳入相关功能和问题修复。在每次迭代中，我们会安排两次“版本验证”，测试通过后，我们会升级一个小版本并发布。我们会继续保证最新两个小版本的有效性，即“如果发现影响功能的问题，我们会发送给最新两个小版本进行同步修复，并发布一个补丁版本”。版本图如图：以2022年1月最新迭代计划为例，版本发布计划可见：IterationPlanforv2.14.0[3]2Roadmap目前，OpenSumi2022Roadmap已有初步原型，见OpenSumi2022Roadmap[4]讨论，后续将根据社区反馈和讨论在2-3月正式确定。我们将继续完成VSCodeAPI适配、编码/调试体验优化、性能优化。同时，我们会积极向社区收集功能需求，以双周迭代的方式有选择地吸纳到框架方案中。同时，对于框架，我们也设定了一些基本的长期目标，如下图所示：6写在最后今天OpenSumi的开源只是我们的一小步。我们期待您的反馈，欢迎使用OpenSumi来创建您自己的IDE产品。最后，如果您对OpenSumi感兴趣，也可以访问opensumi/core[5]仓库，为我们的框架贡献您的代码和意见。这将是我们莫大的荣幸。原文链接本文为阿里云原创内容，未经许可不得转载。
