Skip to main content
Version: 1.1.0

WebIDE

WebIDE Background​

Traditional code hosting platforms provide Git/SVN management for code repositories, enabling code browsing, code review, defect management, CI pipeline, and other code-related activities on the platform. The editor components used for code browsing and code review generally use CodeMirror, with code highlighting using highlight.js, often only providing code reading scenarios. Through the self-developed OpenSumi framework and the high-speed version Web IDE framework specifically designed for Web IDE (without remote container) scenarios, Ant Group's R&D Efficiency Cloud Development team has created innovative, browser-only, IDE-style code reading, writing, submitting, running, and reviewing scenarios, greatly improving user efficiency in code reading, code review, and light development scenarios on the code hosting platform. The Ant Group R&D Efficiency Cloud Development team has collaborated with CCF (China Computer Federation) GitLink code hosting platform to apply the internal high-speed version Web IDE to the GitLink platform, addressing many long-standing user experience issues.

Web IDE Core Capabilities​

Compared to the standard version with containers, the high-speed version IDE mainly explores reading, writing, running, and submitting aspects:

1. Reading:

  • a. Adapted to various code hosting platforms such as GitLink, Github, Gitlab, etc., making it very convenient for businesses to use code service capabilities
  • b. Built-in syntax highlighting support for dozens of common languages including Java, TS/JS, C++, Go, Python, Rust, etc.
  • c. Support for code reading auxiliary plugins such as Git Blame, GitGraph

2. Writing:

  • a. Support for online language service capabilities for HTML/CSS/JS/Markdown, with error diagnosis capability
  • b. Browser file system

3. Running:

  • a. Support for Skypack-based frontend code running solution
  • b. Support for Python running based on Pyodide

4. Submitting:

  • a. Support for WebSCM, providing branch switching/creation, code submission capabilities

If browser IDE components represented by CodeMirror and Monaco are Web IDE 1.0, then the high-speed version Web IDE with the above capabilities is Web IDE 2.0. The high-speed version Web IDE solution was launched internally at Ant Group in April 2021, handling multiple scenarios including code reading, code review, online testing, code inspection result feedback, and light online development. Compared to vscode.dev and github.dev launched in August of the same year, the high-speed version Web IDE utilizes OpenSumi framework's high extensibility, allowing businesses to more deeply customize modules and plugins, giving businesses more room for imagination.

Code Reading​

When reading code on the code hosting platform, users often need to check where the current method is referenced or where the current interface is implemented. The high-speed version Web IDE provides editor + plugin capabilities to solve these user needs.

Code Review​

Users have long reported the following issues with code review functionality:

    1. Lack of language services, low reading efficiency: Lack of code highlighting, prompts, navigation, reference viewing, and outline functionality
    1. Poor browsing experience for large PRs: Statistics show that GitLink PRs average 14-17 changed files
    1. Heavy code modification process, time-consuming: Code Diff component only has reading capability

Although GitLink's code reading scenario integrates the high-speed version IDE editor, the file tree, code search, shortcuts, IDE themes, etc., differ significantly from the IDE habits used in daily development.

1. Quick Experience​

Access from the Web IDE entry point on the GitLink repository homepage

2. Code Browsing Experience​

Consistent code browsing experience with traditional IDEs. File tree, theme styles, shortcuts all available.

3. Language Features​

    1. Support syntax highlighting for nearly 40 languages
    1. Support LSP (Language Server Protocol) language features for JavaScript/TypeScript, HTML, CSS, JSON, Markdown
    1. Provide online language service capabilities for Java, Go, Python, C++, PHP

4. Branch Creation and Switching​

Click the branch name in the lower left corner to create/switch branches.

Use CMD/Ctrl + P to bring up the file search panel

6. Line Highlighting​

Support single or multiple line highlighting

7. Blame​

Support viewing single line blame information

8. Graph​

Support graph view for viewing branch commit history

9. WebSCM​

Quick branch switching, modification, and submission through GitLink Web IDE

10. Online Code Running​

Currently supports running frontend code and Python code in the browser