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

43次阅读

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

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 PaletteKeybinding等模块,并反对扩大
  • 反对 i18n,内置简体中文、English 等两种语言
  • 内置一个简略的 Settings 模块,反对在线编辑批改以及扩大
  • 内置默认的 ExplorerSearch 等组件,并反对扩大
  • Typescript

上图是从新形象的 Workbench UI。基于一个简略的扩大(Extension),如 WorkbenchColorThemeQuickAccessKeybindingi18nSettings 等等性能,通过 Molecule 内置的服务,能够轻松的应用和扩大。

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

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

如何应用?

请浏览疾速开始文档。‣

接下来的布局

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

正文完
 0