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