Ali & ant self developed IDE

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 .

One 、 What is? opensumi？

OpenSumi The framework aims to solve the problems within Alibaba economy IDE Repeated construction of product research and development , Satisfy IDE Customization ability in more vertical scenes , At the same time to realize Web Share the bottom layer with local clients , Give Way IDE R & D from the early “ slash-and-burn cultivation ” Time is on the way “ Mechanized mass production ” The times are moving forward .
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 .

Two 、 The overall architecture

In order to ensure that the framework can be in Web and Electron Operation in environment ,OpenSumi A set of front and rear end separation is adopted 、 The project structure that calls each other through an abstract communication layer .

stay Web On , We use WebSocket As the realization of communication .

stay Electron On , We are IPC signal communication .

Each communication connection corresponds to an independent connection at the front and rear ends DI (Dependence Inject) Containers , therefore OpenSumi The backend implementation of is stateless , Different connections are strictly isolated .

stay OpenSumi There are three main core processes ：

Plug in process （Extension Process）
Back end process （Node Process）
Front end process （Browser Process）
To ensure that the plug-in problem will not affect IDE Performance of , Plug in capability OpenSumi With VS Code Similar scheme , Start the plug-in through an independent plug-in process , The plug-in process communicates with the front-end process through the back-end process .

OpenSumi The overall architecture

OpenSumi The implementation of different capabilities has been split into different modules , These modules pass through Contribution point mechanism (Contribution Point)、DI Mechanism (Dependence Inject) There are weak dependencies on each other , For some core basic modules , Such as theme services 、 Layout services, etc , It will also be directly dependent on other modules .

therefore , In the process of integrated development, it is necessary to ensure the introduction sequence of some modules .

The life cycle of the overall startup is shown in the figure below ：

3、 ... and 、opensumi advantage

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 .

1. 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 .

2. 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 .

3. 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 .

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 .