Alibaba & Ant's self-developed IDE development framework OpenSumi is officially open source

After nearly 3 years, with the efforts of Alibaba Group and Ant Group's co-construction team, OpenSumi, as the first IDE development framework with strong customization, high performance and compatibility with the VS Code plug-in system, is officially open sourced today.

【IDE development framework OpenSumi is open source】What is OpenSumi?


OpenSumi is a framework for the development of dual-end (Web and Electron) IDEs with low threshold, high performance, and high customization for vertical fields.
In the early days, the framework was jointly initiated by the Tao Department engineering team of Alibaba Group, the experience technology department and R&D efficiency team of Ant Group, and jointly developed the IDE standardized R&D framework. It is coded based on TypeScript + React, and implements core functional modules including resource manager, editor, debugging, Git panel, search panel, etc. Developers can quickly build their own as long as they perform simple configuration based on our starter project. Local or cloud IDE products, the framework itself is compatible with the VS Code plug-in ecosystem, and mainstream VS Code plug-ins can run seamlessly in products developed based on OpenSumi. At the same time, the framework also provides developers with a variety of low-cost, highly customized view customization capabilities , which can meet the vast majority of view customization scenarios in IDE scenarios.
For IDE development, there are already open source solutions such as code-server and Theia on the market. Why did we choose to develop and implement it by ourselves? Since 2019, we have found that Alibaba and Ant Group already have many IDE products. Most of the products have the same pre-construction for IDE products, but this part of the pre-construction work takes as little as a few months for a team. , for half a year and a year, there are a lot of duplication of labor problems, and in the process of using open source solutions for some teams, everyone has encountered some problems more or less, such as limited customization capabilities, deep source code dependencies, and maintenance difficulties. , the inability to meet internal capacity needs and other issues. In the end, we are determined to gather the strength of multiple teams to embark on the road of self-research and realization.

【IDE development framework OpenSumi is open source】2. What are the advantages of OpenSumi?


As mentioned earlier, OpenSumi is a framework for the development of vertical-oriented, low-entry, high-performance, and highly customizable dual-end (Web and Electron) IDEs. Its characteristics are mainly reflected in the following points:
1 Comprehensive view customization capabilities
In addition to the performance and coding experience similar to mainstream browsers, in business-oriented vertical fields, we have far more customization capabilities than similar frameworks. Based on our basic framework, you can freely customize your IDE products through modules or plug-ins. , can achieve the true "full view customization" capability.

In many internal product implementation stages, we will naturally achieve basic capabilities through modules to achieve better maintainability, and use plug-ins to achieve business view or capability customization to achieve higher customization. Taking part of Alibaba's internal R&D scenarios as an example, the structure is layered as follows:

【IDE development framework OpenSumi is open source】2 Rich experience in R&D support in vertical fields


Before OpenSumi was officially open sourced, it had been incubated within Alibaba and Ant Group for two years. During this period, a series of R&D cases in representative vertical fields were settled. Most of the R&D practice scenarios you can think of may be Practical experience can be found in OpenSumi.
1. Mini Program R&D Scenario
For the mini-program development scenario, Alipay mini-program developer tools and Taobao mini-program developer tools are implemented using OpenSumi as the core framework. Up to now, the number of monthly service developers has reached 2W+.

Through our Toolbar contribution points and additional sumi API, we can achieve further view customization through plugins. Such as:
1) Customize different Toolbar displays

2) Implement independent communicable window scheduling (such as simulators)

At the same time, the shared bottom layer and plug-in capabilities also make end-to-end rapid porting possible. Through the porting of related plug-ins for Alipay applet developer tools, we have completed similar functions in just one month. Support for the initial version of the Taobao applet developer tools with different usage scenarios, and at the same time hatch the O2 client for internal use.
2. Cloud-integrated R&D link
On the cloud-integrated R&D link, we have Alibaba Cloud cloud development platform externally, and products such as O2 and Ant Codespaces internally.
The general R&D link is shown in the upper part of the figure below.

Before we start a project, we often need to go through some simple or tedious environment configuration work. Your coding environment is also separated from the cloud environment. With the container capabilities of cloud products such as Alibaba Cloud, we can use OpenSumi to build enterprise-owned projects. Or the team's cloud coding environment, allowing developers to truly eliminate the problem of environment configuration and complete all development work in the cloud.

Through in-depth process customization, developers can quickly enter the development state.

By connecting with the internal R&D platform, development, testing, deployment and other work can be completed in one-stop.
3. Pure front-end construction
The pure front-end construction capability is the most widely used capability of OpenSumi in Ali and Ant Group. It provides a Node.js service that does not need to rely on the server to provide the editor startup, directly through pure front-end resources and static The interface definition can build a capability with the basic interface of the editor.
The core of its implementation is to abstract a layer of service layer for services such as files and Git that originally depended on Node, so that developers can manually define the specific logic of services such as file reading and writing. At the same time, based on the Web Worker API provided by OpenSumi, language services It runs in the Web Worker environment of the browser, thereby realizing the de-Nodeization of the framework and achieving the effect of pure front-end construction.
Based on this layer of implementation, you can completely implement a pure front-end editor based on the GitHub Rest API. You can directly view, edit, and submit GitHub code from above. We will consider making a corresponding case later. Internally, typical applications are the following scenarios:
1. Code Review

2. Code display

3. Remote written test

We also provide a simple start-up case opensumi/ide-startup-lite [1] in the OpenSumi code repository. You can also view the demo effect directly through the preview page [2].
3Complete VS Code plug-in capability support
I believe that students who have paid attention to IDE frameworks must be familiar with Theia. As an IDE framework compatible with VS Code plug-ins, Theia is indeed compatible with some VS Code plug-in capabilities, but the compatibility with subsequent VS Code APIs has become less and less, and the basic dependence Discovery contributions from community developers.
OpenSumi was designed to be compatible with the VS Code plug-in ecosystem, so we have continuous requirements for the framework. After open source, we plan to complete the VS Code plug-in API adaptation every three months, and formulate the adaptation plan , it will be organized by the corresponding version management personnel in the discussion area. It has been adapted to the standard API of VS Code v1.60.0, and the progress can be seen in the adaptation plan.
Three differences between OpenSumi and mainstream frameworks in the market
In the early stage of design, we conducted in-depth study on the source code of VS Code and Theia. In the implementation process, in order to be compatible with the VS Code plug-in ecosystem and some functions and experiences of mainstream editors, we have some source code for part of the design and implementation. Referring to the implementation of the two teachers, the corresponding code block has been marked with the copyright header information.
1 Relationship with VS Code
As an IDE with a large market occupancy, VS Code is an IDE product at its core, which is essentially different from our framework attributes. It is a ToC product as a whole. The threshold and cost for developers to customize are high, and it can be customized. The content is also relatively limited, and most of them are limited in the form of plug-ins.
Our framework mainly serves ToB users. It is a simple and convenient development option for small and medium-sized enterprises that need to build their own CloudIDE/local IDE products through the IDE framework but do not have sufficient technical research and development capabilities.
2 Relationship with Theia
As a rising star, Theia draws on some design concepts of VS Code. After several years of development, the community is relatively prosperous. Backed by the Eclipse Foundation, Theia is also a good development option for IDE developers, competing with our OpenSumi framework. Relationship.
Theia itself provides an ability to build IDE products in a modular way. Most of the customizations on most views can be extended through modules (this is also a reference in our OpenSumi). In terms of plug-in capabilities Compatible with most VS Code plug-ins, it provides a subset of VS Code plug-in API capabilities. Some plug-in APIs (such as debug, language, etc.) have not been fully implemented and there is no continuous follow-up plan.
Based on the above points, the OpenSumi framework not only supports the expansion of basic modules, but at the plug-in level, we have plans to continuously follow up on the VS Code standard API (currently, the VS Code 1.16.0 API has been implemented). Based on the realization of a front-end sandbox, a series of sumi APIs are provided to freely expand our view capabilities through plug-ins. Front-end students who are familiar with React can directly start writing front-end components. Through the rich API we provide to implement the corresponding functional view.
Four Why open source?
The development of IDE products has always been a high threshold, time-consuming and labor-intensive task. We hope that through open source OpenSumi, developers who are interested in IDEs can better understand and master the technology of IDE development, so that more developers can develop Developers can develop their own IDE products in a low-threshold way. Through the use of developers in the community, they can also help us better improve our framework and obtain more input from demand scenarios. At the same time, through the influence of the community Make the framework more long-term development.
Five follow-up plans
1 version released
Currently, the framework will carry out an iterative release task every two to three weeks, and the version manager will maintain and integrate related functions and problem fixes. After the test is passed, we will upgrade a minor version and release it, and we will continue to ensure the validity of the latest two minor versions, that is, "if any problems affecting the function are found, we will update the latest two minor versions to the latest two minor versions. Sync fixes, release patch version". The version diagram is shown in the figure:

Take the latest iteration plan in January 2022 as an example, the version release plan can be seen: Iteration Plan for v2.14.0[3]
2 Roadmap
At present, the Roadmap of OpenSumi in 2022 has a preliminary prototype, see the discussion of OpenSumi 2022 Roadmap [4], and the follow-up will be officially confirmed in February-March based on community feedback and discussions.
We will continue to complete the VS Code API adaptation, coding/debugging experience optimization, and performance optimization. At the same time, we will actively collect functional requirements feedback from the community, and selectively incorporate them into the framework plan in a bi-weekly iteration.
At the same time, for the framework, we also set some basic long-term goals, as shown in the following figure:

six at the end
Today's open sourcing of OpenSumi is just one small step for us. We look forward to your feedback and welcome to use OpenSumi to build your own IDE product.
Finally, if you are interested in OpenSumi, you can also visit the opensumi/core [5] repository and contribute your code and opinions to our framework, which will be our great honor.
Project address: https://github.com/opensumi/core
Official website address: http://opensumi.com/
[1] https://github.com/opensumi/ide-startup-lite/
[2] https://opensumi.github.io/ide-startup-lite/
[3] https://github.com/opensumi /core/issues/333
[4] https://github.com/opensumi/core/discussions/316[5
] https://github.com/opensumi/core
Copyright statement: The content of this article is contributed by Alibaba Cloud's real-name registered users. The copyright belongs to the original author. The Alibaba Cloud developer community does not own the copyright and does not assume the corresponding legal responsibility. For specific rules, please refer to the " Alibaba Cloud Developer Community User Service Agreement " and " Alibaba Cloud Developer Community Intellectual Property Protection Guidelines ". If you find any content suspected of plagiarism in this community, fill out the infringement complaint form to report it. Once verified, this community will delete the allegedly infringing content immediately.

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00