Molecule

A lightweight Web IDE UI framework

Introduction to the

Molecule is a VS Code-inspired Web IDE UI framework built using React.js. With a VS Code-like Extension mechanism, you can quickly and easily build a highly abstract Web IDE UI system. Based on the Monaco Editor, there is built-in integration with QuickAccess and Keybinding and a simple API for use.

Molecule has custom extensions for features such as Workbench UI, ColorTheme, custom hotkeys, shortcut access, and more thanks to the extension mechanism and React componentalization technology. In addition, developers can decouple the business code from the IDE UI architecture, while maintaining rapid business iteration while maintaining a good sustainable evolution of the product interaction experience.

motivation

In DTInsight, for example, offline, real-time task development, algorithm development and other products, most of their direct users are developers, who need to complete code writing and debugging on the Web. Therefore, we also want to create a good online IDE development experience for developers.

* Early stack development platformCopy the code

The RD-OS in the image above was an early version of our stack development platform, when the product features themselves were relatively simple. Front-end in the initial implementation, based on React + Ant Design + Codemirror to build the entire IDE UI interface. In addition, since multiple of our products had this Workbench scenario, we also abstracted a simple and unsophisticated React component of the IDE Workbench UI for reuse by other products.

* Current Version of the Web IDE *Copy the code

As the business evolves and the product iterates, the functionality of the entire page becomes dense and complex. Product layout, visual, interactive and so on are updated and changed all the time. The picture above is our latest version design. However, in the face of these new interactive and visual demands, the early technology architectures that were simply stacked can be stretched. The designer’s new scheme is difficult to implement because of the high cost of transformation.

Around 2019, the team communicated with the product about the better Web IDE products on the market, such as Cloud9 IDE, VS Code, Eclipse Theia, etc. These products have very good UI abstraction, great scalability, and easy customization of themes and other features. However, these ides with relatively complete product functions are a little heavy when applied to our products, and pose great technical challenges to the team. Most importantly, the cost of technology migration is relatively high, and the custom UI is not flexible enough.

With these issues in mind, the team tried to find a balance. We hope that this scheme has good UI abstraction, which is easy to add functions, UI can be customized, ColorTheme can be customized, React project can be seamless, so that the product interaction has a relatively convenient continuous evolution ability. Molecule was the project we came up with after studying VS Code source Code.

The core function

Molecule’s current core functions are as follows:

  • Built-in React version of Visual Studio Code Workbench UI
  • Basic compatibility with Visual Studio Code ColorTheme
  • Support for custom Workbench UI styles using the React component
  • Built-in Monaco Editor Command Palette, Keybinding and other modules, and support for extensions
  • Support I18N, built-in simplified Chinese, English and other two languages
  • A simple built-in Settings module supports online editing and extension
  • Built-in default Explorer, Search, and other components, and support for extensions
  • Typescript

The figure above shows a reabstracted Workbench UI. Molecule’s built-in services make it easy to use and extend, based on a simple Extension such as Workbench, ColorTheme, QuickAccess, Keybinding, I18N, Settings, etc.

What differentiates it from other open source Web ides?

  • React.js applications are seamlessly connected
  • React.js component library for better UI customization
  • Basically compatible with thousands of VS Code ColorTheme extensions
  • Molecule is a simple Web IDE UI interaction framework, which does not involve more complex IDE functions such as file system, version management, LSP, DAP, Terminal, etc., and requires developers to implement it manually.

How to use it?

Read the quick Start documentation. ‣

Next planning

Molecule is currently in Beta and many of its apis are not stable enough. Early reference to some VS Code design concepts, API design is not simple enough; Currently, the default Workbench is the VS Code version Layout, and we will consider enriching the Layout system in the future. The Color Theme interaction still has a lot of details to refine. Molecule is a VS Code-inspired Web IDE UI framework built using React.js. With a VS Code-like Extension mechanism, you can quickly and easily build a highly abstract Web IDE UI system. Based on the Monaco Editor, there is built-in integration with QuickAccess and Keybinding and a simple API for use.