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

作者 | OpenSumi

来源 | 阿里技术公众号

经历近 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)定制不同的 Toolbar 展示

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

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

2. 云端一体化研发链路

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

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

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

通过深度的流程定制,能让开发者快捷的进入开发状态。

通过和内部研发平台打通,可以一站式的完成开发、测试、部署等工作。

3. 纯前端搭建

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

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

基于这层实现,你完全可以基于 GitHub Rest API 去实现一个纯前端编辑器,可以从上面直接进行 GitHub 代码的查看、编辑及提交等操作,后续我们会考虑做一个相应的案例出来。而在内部,典型的应用是如下一些场景:

1.代码评审

2.代码展示

3.远程笔试

我们在 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

当前对于 OpenSumi 2022 年的 Roadmap 已有初步雏形,见 OpenSumi 2022 Roadmap [4]讨论,后续会根据社区反馈及讨论在 2-3 月份正式确定。

我们会持续性的完成 VS Code API 的适配、编码/调试体验优化、性能优化工作,同时积极收集社区中反馈的功能需求,以双周迭代的方式选择性吸收进框架计划中。

同时,对于框架,我们也设定了一些基础的长期目标,如下图所示:

六 写在最后

今天 OpenSumi 的开源只是我们迈出的一小步。我们非常期待得到您的反馈,也欢迎使用 OpenSumi 打造一款属于你自己的 IDE 产品。

最后,如果你对 OpenSumi 有相应的兴趣,你也可以来 opensumi/core [5]仓库转转,为我们的框架贡献一点你的代码和意见,这将是是我们莫大的荣幸。

原文链接

本文为阿里云原创内容,未经允许不得转载。

阿里 & 蚂蚁自研 IDE 研发框架 OpenSumi 正式开源的更多相关文章

  1. 微博轻量级RPC框架Motan正式开源:支撑千亿调用

    支撑微博千亿调用的轻量级 RPC 框架 Motan 正式开源了,项目地址为https://github.com/weibocom/motan. 微博轻量级RPC框架Motan正式开源 Motan 是微 ...

  2. SmartIDE v0.1.16 已经发布 - 支持阿里&蚂蚁开源的国产 IDE OpenSumi

    SmartIDE v0.1.16 (Build 3137) 已经在2022年4月19日发布到稳定版通道,我们在这个版本中增加了阿里和蚂蚁发布的国产IDE OpenSumi的支持,以及其他一些改进.Sm ...

  3. uniapp之uni-starter小程序多端研发框架搭建与项目实践

    随着移动互联网的飞速发展,无数移动APP琳琅满目:在移动App的发展的基础上,衍生了小程序.轻应用技术,它随时可用,但又无需安装卸载.小程序是一种不需要下载安装即可使用的应用,它实现了应用" ...

  4. 阿里CEO张勇:阿里蚂蚁20亿元扶持开发者

    https://bbs.taobao.com/catalog/thread/508895-318032179.htm?spm=a21bo.7724922.8439-0.2.tkjSOl 阿里CEO张勇 ...

  5. 前阿里云CTO章文嵩:怎样做开源才有意义?

    阿里云CTO章文嵩已于昨日离职,据传加盟滴滴.可靠消息透露,章文嵩在滴滴出行担任的是技术高级副总裁的职位.这样一个身价上亿的技术大牛,是怎么看待开源项目的?InfoQ:关于淘宝-阿里系的开源进程,我们 ...

  6. 阿里宣布Atlas正式开源:带你重返App开发的田园时代

    继Weex之后,阿里在移动技术领域又有开源大动作. 3月13日,手机淘宝安卓客户端容器化框架Atlas正式宣布开源(https://github.com/alibaba/atlas ).Atlas由阿 ...

  7. 一步一步使用ABP框架搭建正式项目系列教程之本地化详解

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 本篇目录 扯扯本地化 ABP中的本地化 小结 扯扯本地化 本节来说说本地化,也有叫国际化.全球化的,不管怎么个叫法,反正道理都是一 ...

  8. Spark之路 --- Scala IDE Maven配置(使用开源中国的Maven库)和使用

    为什么要使用Maven 摘自百度百科的介绍 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具.Maven 除了以程序构建能力为特色之外,还提 ...

  9. THINKPHP框架的优秀开源系统推荐

    THINKPHP框架的优秀开源系统推荐 众所周知,国内众多优秀的开源框架,ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性.并且拥有众多的原创功能 ...

  10. 阿里技术一面,Java研发岗

    之前过了个简单的简历面,过了几天后没打来以为凉了,然后昨晚又接到了电话,括号内容是回答说的,理解有限,不一定都对,欢迎纠正-加油每一个牛友们! 阿里一面: 1.学过哪些技术知识呢? 2.说说接口和抽象 ...

随机推荐

  1. 大年学习linux(第一节)

    Linux学习笔记 一.常用命令 终端快键键: Ctrl+a/home 切换到命令行开始 Ctrl+e/end 切换到命令行末尾 Ctrl+i 清除屏幕内容,效果等同于clear Ctrl + u 清 ...

  2. Vue中组件和插件有什么区别?

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.组件是什么 回顾以前对组件的定义: 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个. ...

  3. 记录-JS 基础知识大全

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 1.通过javascript向文档中输出文本 document是javascript的内置对象,代表浏览器的文档部分 document.w ...

  4. 《Go程序设计语言》学习笔记之map

    <Go程序设计语言>学习笔记之map 一. 环境 Centos8.5, go1.17.5 linux/amd64 二. 概念 1) 散列表,是一个拥有键值对元素的无序集合.在这个集合中,键 ...

  5. SMASH:经典One-Shot神经网络搜索,仅需单卡 | ICLR 2018

    SMASH方法使用辅助网络生成次优权重来支持网络的快速测试,从结果来看,生成的权重与正常训练的权重在准确率上存在关联性,整体搜索速度很快,仅需要单卡进行搜索,提供了一个很好的新思路.   来源:晓飞的 ...

  6. Java 中的异常处理机制的简单原理和应用。

    Java 中的异常处理机制的简单原理和应用. 异常是指 java 程序运行时(非编译)所发生的非正常情况或错误. Java 对异常进行了分类,不同类型的异常分别用不同的 Java 类表示,所有异常的根 ...

  7. Make It Equal 题解

    Problem Link 简要题意 翻译很清楚. 思路 提供一种简单直接的思路. 可以发现最多会操作 \(n\) 次. 那么就可以每次直接枚举切的高度 \(h\),检查更改是否超过 \(k\),之后暴 ...

  8. 战码先锋直播预告丨参与ArkUI,共建OpenHarmony繁荣生态

    OpenAtom OpenHarmony(以下简称"OpenHarmony")工作委员会首度发起「OpenHarmony开源贡献者计划」,旨在鼓励开发者参与OpenHarmony开 ...

  9. Python 学习路线:介绍、基础语法、数据结构、算法、高级主题、框架及异步编程详解

    Python 介绍 Python 是一种 高级 的.解释型 的.通用 的编程语言.其设计哲学强调代码的可读性,使用显著的缩进.Python 是 动态类型 和 垃圾收集 的. 基本语法 设置 Pytho ...

  10. 上传文件附件时判断word、excel、txt等是否含有敏感词如身份证号,手机号等

    上传附件判断word.excel.txt等文档中是否含有敏感词如身份证号,手机号等,其它检测如PDF,图片(OCR)等可以自行扩展. 互联网项目中,展示的数据中不能包含个人信息等敏感信息.判断word ...