Heavyweight: the domestic ide was released, developed by Alibaba, and is completely open source! (high performance + high customization)

Experience close to 3 Year time , With the joint efforts of Alibaba group and ant group ,OpenSumi As the first strong customization in China 、 High performance , compatible VS Code Of plug-in system IDE R & D framework , Today, it is officially open to the outside world .

1.OpenSumi What is it? ？

OpenSumi  Is a vertical field oriented , Low threshold 、 High performance 、 Highly customizable dual ended （Web And Electron）IDE R & D framework .

In the early stage of the framework, the Amoy department engineering team of Alibaba group and the experience Technology Department of ant group 、 The R & D effectiveness team jointly initiated , Jointly developed IDE Standardized R & D framework . It's based on TypeScript + React Encoding , The implementation includes the resource manager 、 Editor 、 debugging 、Git panel 、 Search panel and other core function modules , Developers just need to make simple configuration based on our starting project , You can quickly build your own local or cloud IDE product , The framework itself is compatible VS Code Plug in Ecology , Main stream VS Code Plug ins can be seamlessly based on OpenSumi Run in developed products , meanwhile , The framework also provides developers with a variety of low-cost services , Highly customized view customization capability , To meet the IDE The vast majority of views in the scene are customized .

about IDE Research and development , Now there are code-server、Theia And so on , Why do we choose self-development to realize ？ since 2019 Year begins , We found that Alibaba and ant group already have many IDE product , Most products are for IDE The preliminary construction of products is basically the same , However, this part of the preliminary construction work takes up a team, at least a few months , More than half a year , There are a lot of problems of repetitive work , In the process of some teams using open source solutions , We also encountered some problems more or less , If the customization ability is limited 、 Source code dependence is deep 、 Difficult to maintain 、 Problems such as inability to meet internal capability requirements . Final , We are determined to gather the strength of multiple teams and embark on the road of self-development and realization .

2.OpenSumi What are the advantages ？

As I said before ,OpenSumi Is a vertical field oriented , Low threshold 、 High performance 、 Highly customizable dual ended （Web And Electron）IDE R & D framework . Its characteristics are mainly reflected in the following points ：

1.  Comprehensive view customization capability

In addition to the performance and coding experience similar to that of mainstream browsers , In the business oriented vertical , We have much more customization capabilities than similar frameworks , Based on our basic framework , You are free to pass modular or plug-in unit Customize your IDE product , Can achieve a real sense of “ Full view customization ” Ability .

In many internal product realization stages , We will naturally pass modular To achieve basic capabilities and better maintainability , And by plug-in unit To achieve business view or capability customization , Achieve higher customization . Take some R & D scenarios inside Alibaba as an example , The structure is layered as follows ：

2. Rich R & D support experience in vertical field

OpenSumi Before the official open source , It has been incubated continuously within Alibaba and ant group for two years , During this period, a series of representative R & D cases in the vertical field were settled , Most of the R & D practice scenarios you can think of , May be in OpenSumi Find practical experience in .

• Applet development scenario

For applet development scenarios , Alipay small program developer tool as well as Taobao applet developer tool It's the use of OpenSumi As the core framework , So far , The number of service developers per month has reached 2W +.

Through our Toolbar Contribution points and additional sumi API, We can further customize the view through plug-ins . Such as ：

1） Customize different Toolbar Exhibition

2） Independent communication window can be realized （ Such as Simulator ）

meanwhile , Shared underlying and plug-in capabilities , It also makes end-to-end rapid migration possible , Through to   Alipay small program developer tool Transplantation of related plug-ins , We are in a short time 1 Completed the similar functions within months , But the use scenario is different   Taobao applet developer tool Early version support , At the same time, it incubates O2 client .

• Cloud integrated R & D link

On the cloud integrated R & D link , We have... Outside Alicloud cloud cloud development platform , Inside there are O2、Ant Codespaces Products such as .

The conventional R & D link is shown in the upper part of the figure below .

We often need to go through some simple or cumbersome environmental configuration before starting a project R & D , Your coding environment is also separated from the cloud environment , With the container capabilities of Alibaba cloud and other cloud products , We can go through OpenSumi Build a cloud coding environment belonging to the enterprise or team , Let developers really save the problem of environment configuration , Complete all development work in the cloud .

Through in-depth process customization , It allows developers to quickly enter the development state .

Get through with the internal R & D platform , You can complete the development in a one-stop way 、 test 、 Deployment, etc .

• Pure front-end construction

The pure front-end building capability is OpenSumi The most widely used capability in Alibaba and ant group , It provides a method that does not need to rely on the server to provide the editor to start Node.js service , Directly through the pure front-end resources and static interface definition, we can build a basic interface with the ability of the editor .

The core of its implementation is through the file 、Git Wait for the original dependence Node The services of are abstracted from the service layer , Allow developers to manually define the specific logic of file reading and writing services , At the same time, it is based on OpenSumi Provided Web Worker API , Run the language service in the browser Web Worker Environment , So as to realize the de Node turn , Achieve the effect of pure front-end construction .

Based on this layer , You can be based on GitHub Rest API To implement a pure front-end editor , You can do it directly from above GitHub Code view 、 Edit and submit , In the future, we will consider making a corresponding case . And inside , Typical applications are the following scenarios ：

1. Code review

2. Code display

3. Remote written test

We are OpenSumi A simple introductory case is also provided in the code warehouse  opensumi/ide-startup-lite , You can also go straight through Preview page Direct view Demo effect .

3.  complete VS Code Plug in capability support

I believe I have paid attention IDE The students of the framework are right Theia It must be no stranger ,Theia As a compatible VS Code The plug-in IDE frame , It is indeed compatible with some VS Code Plug in capabilities , But for the follow-up VS Code API Compatibility has become less and less , It basically depends on the discovery contribution of community developers .

OpenSumi The beginning of the design is to be compatible VS Code Plug in Ecology , Therefore, we will have continuous requirements for the framework , After open source , We plan to finish it every three months VS Code plug-in unit API Adaptation of , Development of adaptation plan , It will be organized by the corresponding version managers in the discussion area , Currently adapted to VS Code v1.60.0 Version standard API, Progress is visible Adaptation program .

3. OpenSumi The difference from the mainstream market framework

We were right at the beginning of the design VS Code 、Theia In-depth study of the source code of , In the process of implementation , For compatibility VS Code Plug in Ecology , At the same time, it is compatible with some functions and experiences of mainstream editors , Part of the design and implementation, we have some source code, also refer to the implementation of the two teachers , The corresponding code block has been marked with copyright header information .

1.  And VS Code The relationship between

VS Code As a with a large market share IDE, Its core is a IDE product , Essentially with our frame There are differences in properties , On the whole, it's a ToC Products , The threshold and cost for developers to customize are high , The customizable content is also relatively limited , Mostly through plug-in unit Limited expansion in the form of .

Our framework mainly serves users as ToB user , For those who need to pass IDE Own framework CloudIDE / Local IDE Small and medium-sized enterprises without sufficient technology R & D capacity are a simple 、 One of the convenient development options .

2.  And Theia The relationship between

Theia As a rising star , reference VS Code Some design concepts of , After development in recent years, it has gradually matured , The community is also relatively prosperous , Back to back Eclipse The foundation , It's also IDE A good development option for developers , With our OpenSumi The framework is competitive .

Theia Itself provides a modular build IDE Product capabilities , Most customizations on most views can be made through modular The way to expand （ This is in our OpenSumi There are also corresponding ideas for reference ）, stay plug-in unit Compatible with most VS Code plug-in unit , A copy was provided VS Code plug-in unit API Subset capabilities , Some plug-ins API （ Such as debug、language etc. ） There is no fully realized and continuous follow-up plan .

Based on the above points , OpenSumi The framework not only supports the basic modular Ways to expand , stay plug-in unit On the level , We have continuous follow-up VS Code standard API The planning （ Currently realized VS Code 1.16.0 edition API）, meanwhile , We implemented a front-end sandbox based on , A series of sumi API Use and pass plug-in unit Freely expand our view ability in a way , be familiar with React The front-end students can write the front-end components directly , Through our rich API To implement the corresponding functional view .

4. At the end

today OpenSumi Open source is just a small step for us . We are looking forward to your feedback , Welcome to OpenSumi Create your own IDE product .

Last , If you are right about  OpenSumi  Have corresponding interest , You can come, too  opensumi/core  Warehouse transfer , Contribute some of your code and comments to our framework , It will be our great honor .

• Project address ：

https://github.com/opensumi/core

• Official website address ：

http://opensumi.com

author ： Alibaba cloud technology

https://developer.aliyun.com/article/873828

official account “Java selected ” The published content indicates the source of , All rights reserved （ Those whose copyright cannot be verified or whose source is not indicated all come from the Internet , Reprinted , The purpose of reprinting is to convey more information , The copyright belongs to the original author . If there is any infringement , Please contact the , The author will delete the first time ！

Many people have asked recently , Is there any readers Communication group ！ The way to join is simple , official account Java selected , reply “ Add group ”, You can join the group ！

Java Interview questions （ Wechat applet ）：3000+ The road test questions , contain Java Basics 、 Concurrent 、JVM、 Threads 、MQ series 、Redis、Spring series 、Elasticsearch、Docker、K8s、Flink、Spark、 Architecture design, etc , Brush questions online at any time ！

------ Special recommendation ------

Special recommendation ： Focus on the most cutting-edge information and technology sharing , Official account for preparing for overtaking on curves and various open source projects and efficient software ,「 Big coffee notes 」, Focus on finding good things , It's worth your attention . Click the official account card below to follow .

If the article helps , Click to see , Forward! ！