clang clang
December 16th 9:00
Our Molecule on GitHub with Gitee
Officially open source! ! !
What? You still don't know who it is?
So let's get to know this new member first.
ps: Quietly tell you to pay attention to " Shu Stack Research Club" and a little surprise
Introduction to Molecule
Molecule is a VS Code inspired web IDE UI framework built with React.js. By designing a VS Code-like extension mechanism (Extension), a highly abstract Web IDE UI system can be built quickly and easily. At the same time, based on Monaco Editor, it has built-in integrated functions such as QuickAccess and Keybinding, and provides a simple API for use.
Thanks to the extension mechanism and React componentization technology, Molecule can customize the extension of Workbench UI, ColorTheme, custom hotkeys, quick access and other functions. In addition, developers can decouple the business code from the IDE UI architecture, so that the product interaction experience can still maintain a good sustainable evolution ability while maintaining the high-speed iteration of the business.
Molecule reason
DTInsight is a one-stop data center Pass product. Most of the users of the product are developers, and IDE interaction is a very important part of it, which is related to the user's work efficiency.
▲ Data stack early development platform
The RD-OS in the above picture is an early version of the data stack development platform. At that time, the functions required by the product were relatively simple . The team initially built the UI interface based on React + Antd + Codemirror. At the same time, because multiple products of ShuStack involve the use of Workbench, the team also abstracted a React component of the IDE Workbench UI to facilitate the reuse of other products.
▲ Current Web IDE version
With the development of business and product iteration, the original page functions have become very dense and complex, and the product layout, vision, interaction, etc. have been updated and changed. In the face of new interaction and visual appeals, the early technical architecture of simple stacking seems a bit awkward. The designer's new plan is expensive and difficult to implement.
So in 2019, the data stack technology and product team conducted research on the best Web IDE products on the market, such as Cloud9 IDE, VS Code, Eclipse Theia, etc. Although these products have very good UI abstraction, extensibility, and custom themes are also more convenient. However, it is slightly heavy compared to the requirements of the number stack, and the cost is high and not flexible.
Based on the above factors, the data stack technical team tried to find a better solution to achieve UI abstraction, UI customization, custom ColorTheme, seamless connection of React projects and other functions , so that the data stack product delivery has a simple and sustainable evolution ability. So after researching the VS Code source code, Molecule was born.
Core functions
In the new version, the design of VS Code is referenced, and the UI abstraction, editor, color theme, etc. are reorganized. The core functions of Molecule are as follows:
▪ Built-in React version of Visual Studio Code Workbench UI
▪ Basically compatible with ColorTheme of Visual Studio Code
▪ Supports customizing Workbench UI styles using React components
▪ Built-in Monaco Editor Command Palette, Keybinding and other modules, and supports extensions
▪ Support i18n, built-in Simplified Chinese and English languages
▪ A simple Settings module is built in, which supports online editing, modification and expansion
▪ Built-in default Explorer, Search and other components, and supports extensions
▪ Typescript support
The re-abstracted Workbench UI above. Based on a simple extension (Extension), functions like Workbench, ColorTheme, QuickAccess, Keybinding, i18n, Settings, etc. can be easily used and extended through Molecule's built-in services.
Molecule Advantage
▪ Seamless integration of React.js applications
▪ React.js-based component library for better UI customization
▪ Basically compatible with thousands of ColorTheme extensions of VS Code
▪ Molecule is just a simple Web IDE UI interaction framework, and does not involve more complex IDE functions such as file system, version management, LSP, DAP, Terminal, etc., which requires developers to implement manually.
How to use
For specific applicable methods, please refer to the GitHub and Gitee "Quick Start" documentation, or click to read the original text.
GitHub：https://github.com/DTStack/molecule
Gitee：https://gitee.com/dtstack_dev/molecule
The current Molecule is still a beta version. Although some design concepts of VS Code are referenced, the API is still not concise and the layout is not refined enough. Next, the technical team will consider referring to the Layout system to design a richer layout, more refined interaction, improve the developer's sense of use, improve the developer's practical efficiency, and continue to improve Molecule on the basis of further collisions with developers in the community.