gitlink_help_center/i18n/en/docusaurus-plugin-content-docs/current/第三方服务/WebIDE.md

sidebar_label	sidebar_position
WebIDE	9

WebIDE background

The traditional code hosting platform provides Git/SVN management of the code warehouse, which can do code browsing, code review, defect management, CI pipeline and other code-related activities on the platform. Among them, the editor component used for code browsing and code review is generally CodeMirror, and the code highlighting uses highlight.js, often providing only the scene of reading the code. Ant R & D performance Department cloud R & D team through self-developed OpenSumi framework and based on OpenSumi framework for the Web IDE (no remote container) scene of the fast version of the Web IDE framework, It collids with the internal code hosting platform to create innovative, browser-only, IDE style code reading, code writing, code submission, code running, code review and other scenarios, which greatly improves the efficiency of users' code reading, code review, light research and development and other scenarios on the code hosting platform. This Ant R & D efficiency cloud R & D team and CCF (China Computer Society) GitLink code hosting platform cooperation, the internal speed version of the Web IDE applied to the Gitlink code hosting platform, to solve a lot of experience problems that have been feedback by users for a long time.

Web IDE core competencies

The standard version marked with containers, the speed version IDE mainly read, write, run, submit and other aspects were explored:

1. Read:

• a. Adapted to a variety of code hosting platforms, such as Gitlink, Github, Gitlab and other code hosting platforms, businesses can easily use code services
• b. Built-in syntax highlighting support for dozens of common languages including Java, TS/JS, C++, Go, Python, Rust, and more
• c. Supports code reading aid plug-ins such as Git Blame and GitGraph

2. Write:

• a. Supports online language services such as HTML, CSS, JS, and Markdown, and supports error diagnosis -b. The browser file system

3. Run:

• a. Supports the front-end code running scheme based on Skypack
• b. Supports Python running based on Pyodide

4. Submit:

• a. Supports WebSCM and provides branch switching, adding, and code submission capabilities

If the browser IDE components represented by CodeMirror and Monaco are Web IDE 1.0, then the fastest version of the Web IDE with the above capabilities is Web IDE 2.0. The Super version Web IDE solution was launched in Ant in April 2021, and carried out many scenarios such as code reading, code review, online written test, code inspection result feedback, and lightweight online research and development. vscode.dev and github dev were launched in August of the same year. The super version of the Web IDE takes advantage of the high scalability of the OpenSumi framework, and the business can customize the modules and plug-ins more deeply, so that the business has more imagination space.

Code reading

When reading code on the code hosting platform, it is often necessary to see where the current method is referenced and where the current interface is implemented. The Super version Web IDE provides the ability of editor + plug-in to solve the above user needs:

Code Reference View Gitlink completes the ability to view the editor Blame by implementing the Blame plugin:

Current line author, modification date View

Code review

Users of the code review feature have long reported the following questions:

• 1. Lack of language services, low reading efficiency: lack of code highlighting, prompt, jump, view reference and outline functions
• 2. Poor browsing experience of large PR: statistics show that Gitlink PR has an average of 14-17 change files, and the traditional code Review interaction is generally the streaming display of code Diff components. For some scenarios with many change files and large internal files, the review experience is poor, and it often takes a long time to wait.
• 3. The code modification process is heavy and time-consuming: the code Diff component only has the ability to read, and it cannot quickly modify some spelling or lint errors, which needs to be modified and submitted after finding the corresponding file locally. In response to the above needs, Ant Cloud R&D team and Gitlink have created an IDE style code review scenario:

Code review in IDE mode - 1. Change tree a. You can browse the change tree in tile and tree form b. Change Tree Using OpenSumi Recycle, you can also view change files by virtual scrolling in high performance - 2. Toolbar a. Provides basic Settings for the IDE editor, such as font size, encoding, ignoring final Spaces, etc. b. Quick Switching Comparison between the current branch version and the baseline c. Quick locating of change files, viewing Settings, and quick execution of shortcut keys - 3. Editor a. Folding non-changed content through monaco fold capability b. Custom comment component embedded editor In addition to the above capabilities, Gitlink also supports quick code changes during code review:

Code can be modified during code review

Gitlink Web IDE

Gitlink code reading scene although access to the fast version of the IDE editor, but the file tree, code search, shortcut keys, IDE skin, etc., are very different from the IDE used in the usual development habits, and most users just clone the code to the local code reading, although ensuring a consistent experience, but the whole link is cumbersome and time-consuming. Based on this insight, Ant Cloud R&D team and Gitlink launched the Gitlink Web IDE, which can quickly open the Web IDE to access and read the project warehouse code with one click, realize the seamless connection between the project and the IDE, and maintain the daily preferences and habits of R&D students. It is also perfectly compatible with the Gitlink code hosting platform. More importantly, by running a super fast IDE directly on the browser without a container, you can ensure an instant experience.

**1. Quick experience **

You can experience it from the Gitlink Warehouse home page Web IDE entry

Gitlink WebIDE Entrance

**2. Code Viewing Experience **

Code browsing experience consistent with traditional ides. File trees, skin styles, and shortcuts are available.

**3. Language features **

• 1. Support syntax highlighting in nearly 40 languages
• 2. Supports Language Server Protocol (LSP) language features based on JavaScript/TypeScript, HTML, CSS, JSON, and Markdown, with intelligent prompts, outline information, and jumps within a file.

JS Language Service Tips

• 3. Provide Java, Go, Python, C++, Php online language service capabilities, support simple definition jump, find references and other functions, so that everyone more convenient to read the code

Python View references

**4. Branch creation and Switchover **

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

Branch creation and switching

**5. File search **

Use CMD/Ctrl + P to invoke the file search panel

File Search panel

**6. Line highlight **

To highlight a single or multiple lines, click the line number to highlight the line, and hold down Shift to select multiple consecutive lines.

Multiple selected lines are highlighted

7. Blame

Supports viewing single-line blame information, and displays details after the hover.

Blame detailed information

8. Graph

graph view is supported to view branch commits history and file changes for each commit, as well as file diff viewing. Click Git Graph at the bottom left corner of the status bar or enter View Git Graph in the command panel to open the Git Graph view.

Graph detailed information

9.WebSCM

It is very common for development to develop multiple requirements in parallel on a daily basis, often changing some small but necessary logic, and perhaps your local environment is already developing the next requirement, frequent branch switching and parallel changes are prone to error. Switch branch change submissions quickly with the Gitlink Web IDE without interrupting the local development process.

WebSCM

**10. Code running online **

Currently, without containers, most applications can only run front-end code. The Gitlink Web IDE integrates the lighter CodeSwing plug-in based on skypack, which can run front-end code in the super speed version, and the code version is managed using Gitlink. Combined with the above WebSCM capabilities, front-end code initialization, writing, previewing, and code submission can be done in under a minute.

Front-end code run

With the development of Webassembly technology, some back-end languages can also run in the browser, and at Google IO 2021, StackBlitz showed off their most recent technology: WebContainer, the ability to compile the language runtime into Webassembly to run on the browser. The Code-Runner For-Web plug-in, combined with Pyodide, already moves Python running into the browser, and the new Zoom Edition also integrates the plug-in by default.

Python code run