关于前端:我们开源了一个轻量的-Web-IDE-UI-框架

2次阅读

共计 1825 个字符，预计需要花费 5 分钟才能阅读完成。

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 内置的服务，能够轻松的应用和扩大。

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 交互还有很多细节须要优化。

正文完