Molecule

一个轻量的 Web IDE UI 框架

简介

Molecule 是一个受 VS Code 启发，应用 React.js 构建的 Web IDE UI 框架。通过一种相似 VS Code 扩大机制（Extension），可疾速、轻松搭建一个高度形象的 Web IDE UI 零碎。同时基于 Monaco Editor，内置集成了 QuickAccess 和 Keybinding 等性能，并提供了简略的 API 以供应用。

得益于扩大机制和 React 组件化技术，Molecule 能够针对例如 Workbench UI、 ColorTheme 、自定义热键、快捷拜访等性能进行自定义扩大。另外，开发者可将业务代码和 IDE UI 架构解耦，在放弃业务高速迭代的同时，产品交互体验仍然保持良好的可继续进化能力。

动机

数栈（DTInsight）中例如离线、实时工作开发，算法开发等产品，它们的间接应用人员大部分都是开发者，须要在 Web 上实现代码编写，调试等工作。所以，咱们也心愿给开发人员发明一个良好的在线 IDE 开发体验。

                            *晚期的*数栈开发平台

上图中的 RD-OS 是咱们数栈开发平台晚期的版本，过后产品性能自身比较简单。前端在初期的实现上，基于 React + Ant Design + Codemirror 来搭建的整个 IDE UI 界面。另外，因为过后咱们多个产品都有这个 Workbench 的场景，咱们还形象了一个简略且单纯的 IDE Workbench UI 的 React 组件，以供其余产品复用。

                            *以后的 Web IDE 版本*

随着业务倒退，产品一直的迭代，整个页面的性能也变得非常密集和简单。产品布局、视觉、交互等始终在更新和变动，上图曾经是咱们最新的版本设计。然而，在面对这些新的交互、视觉上的诉求时，晚期简略重叠的技术架构就会显得有些顾此失彼了。设计师新出的计划，因为革新老本很高，比拟难以施行。

大概 2019 年左右，团队和产品交换了市面上做的比拟好的 Web IDE 产品，如 Cloud9 IDE、VS Code、Eclipse Theia 等。这些产品都有十分好的 UI 形象，扩展性很好，定制主题等性能也比拟不便。然而这些产品性能比拟残缺的 IDE，利用到咱们产品，就显得有点重，而且对团队技术挑战较大，最重要的是技术迁徙老本也比拟高，自定义 UI 也不够灵便。

基于这些问题的思考，团队试图寻找出一种均衡计划。咱们心愿这个计划有很好的 UI 形象便于新增性能、UI 可自定义、定制 ColorTheme 简略、React 我的项目无缝连接，让产品交互有比拟不便的继续进化能力。在对 VS Code 源码钻研了一番之后，咱们便萌发了 Molecule 这个我的项目的想法。

外围性能

咱们参考了 VS Code 的设计，对 UI 形象、编辑器、色彩主题等等从新进行了梳理，Molecule 目前的外围性能如下：

内置 React 版本的 Visual Studio Code Workbench UI
根本兼容 Visual Studio Code 的 ColorTheme
反对应用 React 组件自定义 Workbench UI 款式
内置 Monaco Editor Command Palette、Keybinding等模块，并反对扩大
反对 i18n，内置简体中文、English 等两种语言
内置一个简略的 Settings 模块，反对在线编辑批改以及扩大
内置默认的 Explorer, Search 等组件，并反对扩大
Typescript

上图是从新形象的 Workbench UI。基于一个简略的扩大（Extension），如 Workbench、ColorTheme、QuickAccess、Keybinding、i18n、Settings 等等性能，通过 Molecule 内置的服务，能够轻松的应用和扩大。

与其余开源的 Web IDE 的区别？

React.js 利用无缝接入
基于 React.js 的组件库，更好的 UI 自定义能力
根本兼容了 VS Code 上千种 ColorTheme 扩大
Molecule 只是一个单纯的 Web IDE UI 交互框架，不波及例如文件系统、版本治理、 LSP、DAP、Terminal 等更简单的 IDE 性能，须要开发者本人手动实现。

如何应用?

请浏览疾速开始文档。‣

接下来的布局

Molecule 以后还是一个 Beta 版本，很多 API 还不够稳固。晚期参考了一些 VS Code 的设计概念，API 设计不够简略；目前默认的 Workbench 是 VS Code 版本的布局，前期会思考丰盛布局（Layout）零碎；Color Theme 交互还有很多细节须要优化。