OpenSumi Lite: Pure Front-End IDE Solution for Easy Code Viewing and Editing

General Introduction

OpenSumi Lite is a pure front-end IDE solution based on the OpenSumi project, which aims to provide code viewing and editing capabilities without the need for a Node.js environment. Co-developed by Alibaba Group and Ant Group, and open-sourced under the MIT license, OpenSumi Lite realizes relatively complete IDE capabilities in a pure browser environment through a simple B/S architecture for specific scenarios such as code viewing and code review. Users can experience the project directly through the online preview page, or run it locally by cloning the GitHub repository.

Function List

• Code View: Support for viewing code files and directory structures in GitHub repositories.
• code editor: Provides basic code editing features, including syntax highlighting and code hints.
• Plug-in Support: Support for Web extension plug-ins allows users to add customized plug-ins to enhance the editor's functionality.
• Multi-language support: Built-in syntax highlighting and code hinting plug-ins for multiple programming languages.
• Online Preview: An online preview page is provided so that users can experience the IDE functionality without having to install it.
• Branching and tagging support: Supports opening a repository with a specified branch or tagged version.

Using Help

Installation and operation

1. cloning project::

   git clone https://github.com/opensumi/ide-startup-lite.git
cd ide-startup-lite

2. Installation of dependencies::

   yarn

3. Initiation of projects::

   yarn start

post-launch access http://127.0.0.1:8081 You can preview the IDE.

Function Operation Guide

Code View

• Open your browser and visit http://127.0.0.1:8081The
• Enter the GitHub repository address in the address bar, using the # No. Add the warehouse address, for example:http://127.0.0.1:8081#https://github.com/opensumi/coreThe
• The browser will display the code files and directory structure of the repository.

code editor

• On the Code View page, click on any code file to enter edit mode.
• The editor provides syntax highlighting and code hints, and supports multiple programming languages.
• When you are done editing, click the Save button to synchronize the changes to the server.

Plug-in Management

• show (a ticket) web-lite/extension/index.ts file to add or modify the plugin list.
• The plugin list is formatted as follows:

  const extensionList = [
{ id: "OpenSumi.vsicons-slim", version: "1.0.4" },
{ id: "tao.o2-cr-theme", version: "2.6.3" },
{ id: "alex.typescript-language-features-worker", version: "1.0.0-beta.2" },
];

• After saving the file, restart the project to load the new plugin configuration.

Multi-language support

• show (a ticket) web-lite/grammar/index.contribution.ts file to add or modify the language support list.
• The language support list is formatted as follows:

  const languages = [
"html",
"css",
"javascript",
"less",
"markdown",
"typescript",
];

• After saving the file, restart the project to load the new language support configuration.

Online Preview

• Visit the online preview page:OpenSumi Lite Online PreviewThe
• In the preview page, users can experience the code viewing and editing features directly without installing any software.

OpenSumi Lite Open Source Introduction

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

What is OpenSumi?

OpenSumi is a vertical-oriented, low-threshold, high-performance, highly customizable dual-end (Web and Electron) IDE development framework.

Framework early by the Ali Group Tao system engineering team and Ant Group experience technology department, R & D performance team jointly initiated the joint development of IDE standardized research and development framework. It is based on TypeScript + React Coding, the realization of the core functional modules including resource manager, editor, debugging, Git panel, search panel, etc., developers just based on our starting project for a simple configuration, you can quickly build their own local or cloud IDE products, the framework itself is compatible with the ecosystem of VS Code plug-ins, mainstream VS Code plug-ins can be seamlessly in the products based on the development of OpenSumi. The framework is compatible with the VS Code plug-in ecosystem, and all major VS Code plug-ins can be seamlessly run in OpenSumi-based products. At the same time, the framework also provides developers with a variety of low-cost, highly customizable view customization capabilities, which meets most of the view customization scenarios in the IDE scene.

For IDE development, there are already code-server, Theia and other open source solutions on the market, why do we choose to self-research and realize? Since the beginning of 2019, we have found that there are already many IDE products within Ali and Ant Group, and most of the products have the same pre-construction for IDE products, but this part of the pre-construction work takes up a team less than a few months, more than half a year, there is a lot of duplication of labor, and in the process of using the open-source solution for some teams, we have also more or less encountered some problems, such as limited customization capabilities, deep source dependencies, maintenance, and so on. In the process of using the open source solution in some teams, we have more or less encountered some problems, such as limited customization ability, deep dependence on the source code, difficulty in maintenance, and inability to meet the internal capacity requirements. In the end, we decided to gather the strength of multiple teams to embark on the road of self-research and realization.

What are the advantages of OpenSumi?

As mentioned earlier, OpenSumi is a vertical-oriented, low-threshold, high-performance, highly customizable dual-end (Web and Electron) IDE development framework. Its features are mainly reflected in the following points :

1. Comprehensive view customization capabilities

In addition to similar performance and coding experience with mainstream browsers, in business-oriented verticals, we have far more than similar frameworks for customization, based on our basic framework, you can freely customize your IDE products through modules or plug-ins, which can achieve the true meaning of the "full-view customization" capabilities.

In many internal product implementation phases, we will naturally go through the module to implement the basic capabilities to get better maintainability, and through the plug-in to implement the business view or capability customization to achieve a higher degree of customization. Taking some of Ali's internal R&D scenarios as an example, the structure is layered as follows:

2. Extensive experience in vertical R&D support

OpenSumi before the official open source, in Ali and Ant Group has been continuously incubated for two years, during which precipitation landing a series of representative vertical areas under the R & D cases, most of the R & D practice scenarios that you can think of, you may be able to find practical experience in OpenSumi.

• Small program development scenarios

For small program development scenarios, the Alipay Small Program Developer Tool and the Taobao Small Program Developer Tool are implemented using OpenSumi as the core framework, and up to now, the number of developers served has reached 2W+ per month.

With our Toolbar contribution points and the additional sumi API, we are able to enable further view customization through plugins. Such as:

1) Customize different Toolbar displays

2) Implement independently communicable window scheduling (e.g., simulators)

At the same time, the shared underlying layer and plug-in capabilities also make end-to-end rapid transplantation possible. Through the transplantation of plug-ins related to Alipay's applet developer tool, we completed support for the initial version of Taobao's applet developer tool, which has similar functionality but different usage scenarios, and incubated the O2 client for internal use in a short period of 1 month.

• Cloud-integrated R&D links

In terms of cloud-integrated R&D links, we have the AliCloud development platform externally and O2, Ant Codespaces and other products internally.

The regular R&D link is shown in the top half of the figure below.

We often need to go through some simple or cumbersome environment configuration work before starting a project research and development, your coding environment and the cloud environment there is a split, with the help of AliCloud and other cloud products, container capabilities, we can build through the OpenSumi belonging to the enterprise or the team's cloud coding environment, so that developers can really save the environment to configure the problem of completing the development of all the work in the cloud.

With deep process customization, it enables developers to get into development quickly.

By connecting with the internal R&D platform, development, testing and deployment can be accomplished in a one-stop manner.

• Pure front-end build

Pure front-end building capability is the most widely used piece of OpenSumi in Ali and Ant Group, it provides a kind of Node.js service without relying on the server to provide the editor startup required, directly through the pure front-end resources and static interface definitions can be built with the ability to have the basic interface of the editor.

The core of its implementation is through the file , Git and other services that originally rely on Node for a layer of service layer abstraction , so that developers can manually define the specific logic of the file read and write services , while based on the Web Worker API provided by OpenSumi , the language services running in the browser's Web Worker environment , thereby realizing the framework of the de-Node , to achieve the effect of pure front-end construction. To achieve the effect of pure front-end construction.

Based on this layer of implementation, you can completely based on the GitHub Rest API to realize a pure front-end editor, you can directly from the top of the GitHub code view, edit and submit operations, we will consider doing a corresponding case out. Internally, the typical applications are the following scenarios:

1.Code Review

2.Code display

3. Remote written examination

We've also provided an easy way to get started in the OpenSumi repository at opensumi/ide-startup-lite [1], or you can check out the demo directly on the preview page [2].

3. Full VS Code plug-in capability support

I believe that students who have paid attention to the IDE framework of Theia must not be unfamiliar with Theia, Theia as a VS Code plug-in compatible IDE framework, is indeed compatible with some of the VS Code plug-in capabilities, but for the subsequent VS Code API compatibility has become less and less, basically relying on the community to contribute to the discovery of the developer.

OpenSumi was designed to be compatible with the VS Code plugin ecosystem, so we have ongoing requirements for the framework. After open-sourcing, we plan to complete the adaptation of the VS Code plugin APIs every three months, and the adaptation plan will be organized by the corresponding version managers in the discussion forum. Currently, the standard API has been adapted to VS Code v1.60.0, and the progress can be seen in the Adaptation Plan.

Difference between OpenSumi and the mainstream frameworks in the market

We have studied the source code of VS Code and Theia at the early stage of design, and in the process of realization, in order to be compatible with the ecology of VS Code plug-in, and at the same time, compatible with the mainstream editor's functions and experience, some of the design and implementation of some of the source code also refer to the two teachers' implementations, and the corresponding code block has been marked with the header of the copyright information.

1. Relationship with VS Code

VS Code as a market occupancy rate of the IDE, its core for an IDE product, the essence of the framework with our attributes there is a difference, the overall is a ToC product, the developer to customize the threshold and the cost of higher, customizable content is also relatively limited, most of the plug-ins through the form of limited expansion.

Our framework mainly serves ToB users, and is a simple and convenient development option for small and medium-sized enterprises that need to build their own CloudIDE/native IDE products through the IDE framework but do not have sufficient technical R&D capabilities.

2. Relationship with Theia

Theia as a newcomer, drawing on some of the design concepts of VS Code, after nearly a few years of development and maturity, the community is relatively prosperous, backed by the Eclipse Foundation, but also IDE developers a good development options, and our OpenSumi framework is competitive.

Theia itself provides a modular construction of IDE products, most of the view on the customization of the vast majority of the way to go through the module to expand (this point in our OpenSumi also draw on the corresponding ideas), in the plug-in capabilities compatible with most of the VS Code plug-ins, provides a subset of the VS Code plug-in API capabilities, some plug-in APIs (such as debugging language, etc.) is not fully implemented and there is no plan to follow up. （Some of the plugin APIs (such as debug, language, etc.) are not fully realized and there is no follow-up plan.

Based on the above points, OpenSumi framework not only supports the basic modular expansion, in the plug-in level, we have continued to follow up on the planning of VS Code standard API (currently implemented VS Code 1.16.0 version of the API), and at the same time, we realized a front-end sandbox based on the provision of a series of sumi APIs with plug-ins to expand our view capabilities in a free way. At the same time, we have implemented a front-end sandbox based on which we provide a series of sumi APIs that can be used to freely expand our view capabilities through plug-ins, so that front-end students who are familiar with React can directly start writing front-end components, and realize the corresponding functionality of the view through the rich APIs that we provide.