We open sourced a lightweight Web IDE UI framework

Molecule

---

A lightweight Web IDE UI framework

Introduction

Molecule is a VS Code 161baeb0e8dda7, using React.js build the Web IDE UI . Through a VS Code extension mechanism (Extension), a highly abstract Web IDE UI system can be quickly and easily built. At the same time, based on Monaco Editor, it integrates functions such as QuickAccess and Keybinding, and provides a simple API for use.

Thanks extension mechanism and React component-based technology, Molecule may for example Workbench the UI, ColorTheme , custom hotkeys , quick access expansion capabilities for customization. In addition, developers can business code and IDE UI architecture , while maintaining high-speed business iterations, product interaction experience still maintains a good ability to continuously evolve

motivation

data stack (DTInsight) , such as offline, real-time task development, algorithm development and other products, most of their direct users are developers, needs to write code such as , 8de3 on the Web to Therefore, we also hope to create a good online IDE development experience for developers.

                            *早期的*数栈开发平台

The RD-OS in the picture above is an early version of our digital stack development platform. At that time, the product function itself was relatively simple. In the initial implementation of the front end, the entire IDE UI interface is built based on React + Ant Design + Codemirror. In addition, since many of our products had this Workbench scenario at that time, we also abstracted a simple and pure React component of IDE Workbench UI for reuse by other products.

                            *当前的 Web IDE 版本*

With the business development, product iterations, the function of the entire page has become very intensive and complex. product layout, vision, interaction, etc. have been updated and changed. The above picture is our latest version design. However, in the face of these new interaction and visual demands, the early simply stacking will appear to be a little stretched. The new designer out of the program, due cost of renovation high, relatively difficult to implement.

Around 2019, the team and the product exchanged better Web IDE products on the market, such as Cloud9 IDE , VS Code , Eclipse Theia etc. These products have very good UI abstractions, good extensibility, and convenient functions such as customizing themes. However, these IDEs with relatively complete product functions are a bit heavier when applied to our products, and they pose a greater technical challenge to the team. The most important thing is migration cost is relatively high, and the custom UI is not flexible enough.

Based on these considerations, the team tried to find a balanced plan. We hope that this program has a very good the UI abstraction to facilitate new features, UI can custom, custom ColorTheme simple, React project seamlessly, so that products have a more convenient interactive capabilities continue to evolve. After researching the VS Code source code, we came up with the idea of Molecule.

core function

We refer to the design of VS Code and reorganized the UI abstraction, editor, color theme, etc. The current core functions of Molecule are as follows:

• Built-in React version of Visual Studio Code Workbench UI
• Basically compatible with ColorTheme
• Support the use of React components to customize the Workbench UI style
• Built-in Monaco Editor Command Palette , Keybinding and other modules, and support expansion
• Support i18n , built-in Simplified Chinese, English and other two languages
• Built-in a simple Settings module, which supports online editing, modification and expansion
• Built-in default Explorer , Search and other components, and support expansion
• Typescript

The picture above is the re-abstracted Workbench UI. Based on a simple extension (Extension), as Workbench , ColorTheme , Quickaccess , KeyBinding , i18n , Settings so functions by Molecule built-in service, you can easily use and extend.

What is the difference with other open source Web IDEs?

• React.js application seamless access
• Component library based on React.js, better UI custom capabilities
• Basically compatible with thousands of ColorTheme extensions of VS Code
• Molecule just a simple Web IDE the UI interaction framework, does not involve such as file system , version management , LSP, DAP , Terminal more sophisticated IDE functions, require developers to manually implement .

how to use?

Please read the Quick Start document. ‣

Next plan

Molecule is currently a Beta version, and many APIs are not stable enough. Early reference to some VS Code design concepts, the API design is not simple enough; the current default Workbench is the layout of the VS Code version, and the rich layout system will be considered in the later period; Color Theme interaction still has many details to be optimized.