Introduction: After nearly 3 years, with the efforts of alibaba Group and Ant Group, OpenSumi, as the first IDE development framework with strong customization, high performance and compatibility with VS Code plug-in system in China, is officially open source today.

The author | | ali OpenSumi source technology public number

After nearly 3 years, with the efforts of ali Group and Ant Group, OpenSumi, as the first IDE development framework with strong customization, high performance and compatibility with VS Code plug-in system, is officially open source today.

What is OpenSumi?

OpenSumi is a vertical domain oriented, low threshold, high performance, high customization two-ended (Web and Electron) IDE development framework.

In the early stage, the IDE standardization RESEARCH and development framework was jointly developed by the Tao Engineering team of Ali Group, the Experience technology department of Ant Group and the R&D efficiency team. It is encoded based on TypeScript + React and realizes core function modules including resource manager, editor, debugging, Git panel, search panel and so on. Developers can quickly build their own local or cloud IDE products with simple configuration based on our initial project. The framework is compatible with the VS Code plug-in ecosystem. Mainstream VS Code plug-ins can run seamlessly in openSumi-based products. At the same time, the framework also provides developers with a variety of low-cost, highly customized view customization capabilities, which can meet the majority of view customization scenarios in IDE scenarios.

For IDE research and development, there are open source solutions such as code-Server and Theia on the market. Why do we choose to develop our own solutions? Since 2019, we have found that There are many IDE products in Ali and Ant Group, most of which are almost the same in the preliminary construction of IDE products, but this part of the preliminary construction takes a team at least a few months, at most six months and a year, and there are a lot of repetitive labor problems. In the process of using open source solutions, some teams have more or less encountered some problems, such as limited customization ability, deep reliance on source code, difficult maintenance, and inability to meet internal ability requirements. Finally, we decided to gather the strength of multiple teams to embark on the road of self-development and implementation.

What are the advantages of OpenSumi?

As mentioned earlier, OpenSumi is a framework for vertical domain, low threshold, high performance, high customization, two-ended (Web and Electron) IDE development. Its characteristics are mainly reflected in the following aspects:

Comprehensive view customization capability

In addition to the performance and coding experience similar to mainstream browsers, in the business-oriented vertical field, 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, which can achieve the true sense of “full view customization” capability.

In many internal product implementation phases, we will naturally achieve better maintainability through modules for basic capabilities, and achieve higher customization through plug-ins for business views or capabilities. Taking part of ali’s internal R & D scenarios as an example, the structure is stratified as follows:

2. Rich experience in vertical r&d support

Before the official open source, OpenSumi has been incubated continuously in Ali and Ant Group for two years, during which a series of representative research and development cases in vertical fields have been settled. Most of the research and development practice scenarios that you can think of can be found in OpenSumi.

1. Small program development scenario

For the small program development scenario, Alipay small program developer tools and Taobao small program developer tools are realized by using OpenSumi as the core framework. Up to now, the number of monthly service developers has reached 2W +.

With our Toolbar contribution points and additional SUMi APIS, we were able to achieve further view customization through plug-ins. Such as:

1) Customize different Toolbar displays

2) Realize independent communicable window scheduling (such as simulator)

At the same time, the shared underlying layer and plug-in capabilities also make it possible to quickly transplant end-to-end. Through the transplantation of plug-ins related to Alipay small program developer tools, we completed the support for the early version of Taobao small program developer tools with similar functions but different use scenarios in just one month. Incubate the O2 client for internal use.

2. Cloud integrated R&D link

In the cloud integrated R&D link, we have Aliyun cloud development platform externally, and O2, Ant Codespaces and other products internally.

A typical R&D link is shown in the upper half of the figure below.

Before we start a project in the research and development, often need to experience some simple or complicated environment configuration, your coding environment also exist with the cloud environment, with the aid of ali cloud cloud products such as container capacity, we can through OpenSumi building belongs to the company or team cloud coding environment, let developers really save environment configuration problems, Do everything in the cloud.

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

Through the internal RESEARCH and development platform through, can one-stop complete development, testing, deployment and other work.

3. Pure front-end construction

Pure front-end building capability is the most widely used capability of OpenSumi in Ali and Ant Group. It provides node.js service required for editor startup without relying on the server, and directly builds a basic editor interface through pure front-end resources and static interface definition.

The core of its implementation is to carry out a layer of service layer abstraction for files, Git and other services that originally rely on Node, so that developers can manually define the specific logic of file reading and writing services. At the same time, based on the Web Worker API provided by OpenSumi, the language service is run in the Web Worker environment of the browser, so as to realize the de-nodeization of the framework and achieve the effect of pure front-end construction.

GitHub Rest API allows you to view, edit, and submit GitHub code directly from the GitHub Rest API. We will consider doing a case study later. Internally, typical applications are the following scenarios:

Code review

2. Code presentation

3. Remote written test

We also provide an easy introduction to OpenSumi/IDE-startup-Lite [1] in the OpenSumi repository, and you can view the Demo directly from the preview page [2].

3 Complete VS Code plug-in capability support

I believe those 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 part of VS Code plug-in capabilities, but compatibility with THE subsequent VS Code API has become less and less. Basically rely on discovery contributions from community developers.

OpenSumi is designed to be compatible with VS Code plug-in ecosystem, so we have continuous requirements for the framework. After open source, we plan to complete the adaptation of VS Code plug-in API every three months, and the adaptation plan will be organized by the corresponding version management personnel in the discussion forum. Currently, it has been adapted to VS Code V1.60.0 standard API. The progress can be seen in the adaptation plan.

Differences between OpenSumi and mainstream frameworks in the market

We studied the source Code of VS Code and Theia in depth at the early stage of design. In the implementation process, in order to be compatible with VS Code plug-in ecology and some functions and experiences of mainstream editors, we also referred to the implementation of some source codes of the two teachers in part of design and implementation. The corresponding code block has been marked with copyright header information.

1 Relationship with VS Code

As an IDE with a large market share, VS Code is an IDE product at its core, which is essentially different from our framework. Overall, it is a ToC product, with high threshold and cost for developers to customize, and limited content for customization. Most of it is limited expansion in the form of plug-ins.

Our framework mainly serves ToB users, which is one of the simple and convenient development options for small and medium enterprises who need to build their own CloudIDE/native IDE products through IDE framework and do not have sufficient technology development capabilities.

2. Relationship with Theia

Theia, as an up-and-comer, uses VS Code’s design philosophy for reference. After years of development, Theia has gradually matured and its community is relatively prosperous. Backed by the Eclipse Foundation, Theia is also a good development option for IDE developers, which is in competition with our OpenSumi framework.

Theia itself provides the ability to modularize IDE products. Most of the customization of views can be extended by modules (this is also used for reference in our OpenSumi). It is compatible with most VS Code plug-ins in terms of plug-in capabilities. Provides a subset of VS Code plug-in API capabilities, some of the plug-in apis (debug, language, etc.) are not fully implemented and have no ongoing follow-up plans.

Based on the above points, The OpenSumi framework not only supports the basic module expansion, but also at the plug-in level, we continue to follow up the VS Code standard API planning (currently VS Code 1.16.0 VERSION API has been implemented). Meanwhile, Based on the implementation of a front-end sandbox, we provided a series of SUMI APIS and plug-ins to freely expand our view capabilities. Students familiar with React front-end components can directly get started to write front-end components and realize corresponding functional views through the rich apis provided by us.

Why open source?

IDE product research and development has always been a high threshold, time-consuming and laborious thing, we hope that through open source OpenSumi to help developers interested in IDE better understand and master IDE research and development technology, so that more developers can develop their OWN IDE products in a low threshold way. Through the use of developers in the community, it can also help us better improve our framework, get more input of demand scenarios, and at the same time, make the framework get more long-term development through the influence of the community.

V. Follow-up Planning

1 Version Release

At present, the framework carries out an iteration release every two to three weeks, which is maintained by the version manager and integrated with related functions and bug fixes. During each iteration, we will arrange two “version vercheckers” to conduct version check. After passing the test, we will upgrade one minor version and release it. We will continue to ensure that the last two minor releases are valid. “If we find a problem that affects the functionality, we will sync the fixes to the last two minor releases and release patches.” Version schematic diagram is shown in the figure:

Take the latest Iteration Plan for January 2022 as an example. Iteration Plan for V2.14.0 can be seen here. [3]

2 Roadmap

See OpenSumi 2022 Roadmap [4] for discussion. The Roadmap will be finalized in February and March based on community feedback and discussion.

We will continue to work on VS Code API adaptation, coding/debugging experience optimization, and performance optimization. We will also actively collect feedback from the community on functional requirements and selectively incorporate them into the framework plan through bi-weekly iterations.

We also set some basic long-term goals for the framework, as shown below:

Write six at the end

OpenSumi’s open source today is just one small step. We look forward to hearing from you and welcome to build your own IDE using OpenSumi.

Finally, if you are interested in OpenSumi, we would be honored if you could visit the OpenSumi/Core [5] repository and contribute your code and ideas to our framework.

The original link

This article is the original content of Aliyun and shall not be reproduced without permission.