一种轻量级的插件式、组件化的WEB IDE UI开发框架

摘要

本发明公开了一种轻量级的插件式、组件化的WEB IDE UI开发框架，该框架基于React声明式的IDE UI组件库，其特征在于，该框架包括可自定义/持续迭代的扩展服务模块、Workbench扩展服务模块、Theme扩展服务模块、Locals扩展服务模块、Language扩展服务模块、Keybinding扩展服务模块、Setting扩展服务模块、Layout扩展服务模块、数据缓存服务模块、应用状态管理模块、事件总线模块和基于数据驱动视图的的React渲染模块。该框架可快速搭建、可自定义、可扩展。

说明书

技术领域

本发明涉及Web技术领域，尤其涉及一种轻量级的插件式、组件化的WEB IDE UI开发框架。

背景技术

随着浏览器、Web、云技术的发展，越来越多的传统桌面(Desktop)端开发IDE工具开始云化，通过Web的形式给开发者提供在线编程的能力。例如微软的Visual StudioCodespaces。Web技术的优势就是，磨平了本地开发环境搭建的复杂性、本地计算能力、存储容量等等的局限性、让开发者打开浏览器即可马上进行在线可视化的开发、发布、运维等工作。所以拥有一款可扩展式的IDE框架，可轻松的完成此类应用的搭建和功能扩展。

发明内容

为了解决上述技术问题，本发明提供了一种轻量级的插件式、组件化的WEB IDEUI开发框架，该框架可快速搭建、可自定义、可扩展。

一种轻量级的插件式、组件化的WEB IDE UI开发框架，该框架基于React声明式的IDE UI组件库，其特征在于，该框架包括可自定义/持续迭代的扩展服务模块、Workbench扩展服务模块、Theme扩展服务模块、Locals扩展服务模块、Language扩展服务模块、Keybinding扩展服务模块、Setting扩展服务模块、Layout扩展服务模块、数据缓存服务模块、应用状态管理模块、事件总线模块和基于数据驱动视图的的React渲染模块。

作为上述技术方案的优选，所述可自定义/持续迭代的扩展服务模块中的扩展服务会通过Provider接口接收开发者自定义的插件，并在整个框架Ready后自动加载插件，另外，用户可在运行时随时禁用/启用该自定义扩展；扩展服务包括名称、类型、状态、描述、执行程序；所述Workbench扩展服务模块通过Workbench服务，在框架提供的接口的基础上，进行React UI的自定义，从而满足所需要的扩展需求。

作为上述技术方案的优选，所述Theme扩展服务模块中Theme服务可通过加载一个JSON配置文件，即可完成IDE UI的样式切换，另通过适配，可兼容市面上主流IDE的Theme；所述Locals扩展服务模块中Locals服务通过一个JSON扩展配置，就可在应用中完成本地化的切，达到本地化与本身程序的分离，从而提升其本地化的扩展性。

作为上述技术方案的优选，所述Language扩展服务模块通过Language服务，可以加载不同类型的文件，并支持在线高亮、编辑，自定义交互功能，该扩展包括名称、类型、执行程序、渲染方式部分；所述Keybinding扩展服务模块通过Keybinding服务，使得用户可以在扩展程序中，完成制定的keyboard、鼠标事件的自定义，从而丰富用户的IDE交互。

作为上述技术方案的优选，所述Setting扩展服务模块中Setting服务提供了操作编辑用户信息、Theme、Extension、Layout功能的接口，其通过一种JSON配置化或者可视化的方式，让用户可以轻松修改和自定义IDE；所述Layout扩展服务模块中Layout服务提供了框架内置布局和自定义布局的API，通过该服务可以实时操作IDE基本布局。

作为上述技术方案的优选，所述数据缓存服务模块中内置的客户端存储服务，用来缓存当前Workspace的相关信息；所述应用状态管理模块提供了获取、更新IDE服务、Workspace状态的API，另外可通过该模块可扩展自己的应用状态。

作为上述技术方案的优选，所述事件总线模块用于模块、组件直接的数据通信；所述基于数据驱动视图的的React渲染模块可将IDE视图的状态绑定到React组件，并实时渲染。

本发明的有益效果是：

1)本发明基于Web技术强大的渲染能力和React.js UI组件开发库，提供了一套适用于IDE交互的组件库；另外还提供了React应用框架，可以轻松的完成对视图的控制，并可提供对外操作视图的服务接口，从而达到Workbench可扩展的目的。

2)本发明中定义Theme,Settings,Keybinding,Locals,Language,Layout服务接口和和扩展程序的协议，开发者通过制定接口和扩展协议，可自定义开发满足框架要求的扩展程序，通过扩展(Extension)服务可动态加载、执行其扩展程序。

3)本发明提供了一套基本的Workbench UI，开发者通过入口(Entry)应用，可在自己的Web应用在快速引入默认的IDE Workbench,通过自定义扩展，从而提供基本的IDE开发功能。

4)如果框架默认的Workbench无法满足开发者需求，通过框架内置的组件库，服务程序可按自己的需求，重新组合各功能部件，完成DIY。

附图说明

结合附图，并通过参考下面的详细描述，将会更容易地对本发明有更完整的理解并且更容易地理解其伴随的优点和特征，其中：

图1是本发明中框架扩展(Extension)程序的加载和激活的流程；

图2是本发明中数据Model、服务、视图组件、和扩展程序的依赖关系示意图。

具体实施方式

为使本发明的内容更加清楚易懂，以下结合说明书附图，对本发明的内容作进一步说明。当然本发明并不局限于该具体实施例，本领域内的技术人员所熟知的一般替换也涵盖在本发明的保护范围内。

如图1-2所示，本发明提供了一种轻量级的插件式、组件化的WEB IDE UI开发框架，该框架基于React声明式的IDE UI组件库，该框架包括可自定义/持续迭代的扩展服务模块、Workbench扩展服务模块、Theme扩展服务模块、Locals扩展服务模块、Language扩展服务模块、Keybinding扩展服务模块、Setting扩展服务模块、Layout扩展服务模块、数据缓存服务模块、应用状态管理模块、事件总线模块和基于数据驱动视图的的React渲染模块。可自定义/持续迭代的扩展服务模块中的扩展服务会通过Provider接口接收开发者自定义的插件，并在整个框架Ready后自动加载插件，另外，用户可在运行时随时禁用/启用该自定义扩展；扩展服务包括名称、类型、状态、描述、执行程序；Workbench扩展服务模块通过Workbench服务，在框架提供的接口的基础上，进行React UI的自定义，从而满足所需要的扩展需求。Theme扩展服务模块中Theme服务可通过加载一个JSON配置文件，即可完成IDEUI的样式切换，另通过适配，可兼容市面上主流IDE的Theme；Locals扩展服务模块中Locals服务通过一个JSON扩展配置，就可在应用中完成本地化的切，达到本地化与本身程序的分离，从而提升其本地化的扩展性。Language扩展服务模块通过Language服务，可以加载不同类型的文件，并支持在线高亮、编辑，自定义交互功能，该扩展包括名称、类型、执行程序、渲染方式部分；Keybinding扩展服务模块通过Keybinding服务，使得用户可以在扩展程序中，完成制定的keyboard、鼠标事件的自定义，从而丰富用户的IDE交互。Setting扩展服务模块中Setting服务提供了操作编辑用户信息、Theme、Extension、Layout功能的接口，其通过一种JSON配置化或者可视化的方式，让用户可以轻松修改和自定义IDE；Layout扩展服务模块中Layout服务提供了框架内置布局和自定义布局的API，通过该服务可以实时操作IDE基本布局。数据缓存服务模块中内置的客户端存储服务，用来缓存当前Workspace的相关信息；所述应用状态管理模块提供了获取、更新IDE服务、Workspace状态的API，另外可通过该模块可扩展自己的应用状态。事件总线模块用于模块、组件直接的数据通信；所述基于数据驱动视图的的React渲染模块可将IDE视图的状态绑定到React组件，并实时渲染。

本发明基于Web技术强大的渲染能力和React.js UI组件开发库，提供了一套适用于IDE交互的组件库；另外还提供了React应用框架，可以轻松的完成对视图的控制，并可提供对外操作视图的服务接口，从而达到Workbench可扩展的目的。本发明中定义Theme,Settings,Keybinding,Locals,Language,Layout服务接口和和扩展程序的协议，开发者通过制定接口和扩展协议，可自定义开发满足框架要求的扩展程序，通过扩展(Extension)服务可动态加载、执行其扩展程序。本发明提供了一套基本的Workbench UI，开发者通过入口(Entry)应用，可在自己的Web应用在快速引入默认的IDE Workbench,通过自定义扩展，从而提供基本的IDE开发功能。如果框架默认的Workbench无法满足开发者需求，通过框架内置的组件库，服务程序可按自己的需求，重新组合各功能部件，完成DIY。其中，基础组件库的部分，依靠React组件化的技术，通过借鉴原桌面的的交互，研发相对应Web端的UI部件，这些基础组件可进行更高阶的自由组合(Compose)，通过数据的变更，实现渲染内容的控制。例如ContextMenu,Sidebar,Tree等组件。数据和视图映射的部分，是通过定义可观察的(Observable)视图Model，通过一个视图和Model的映射(Mapping)程序进行交互。当视图Model变更后，映射程序会自动更新对应的视图。扩展(Extension)服务对象，是向开发者提供组件，基础服务扩展的一个窗口。通过加载一个保含扩展定义的Javascript对象，扩展服务会待框架基础服务(WorkbenchService,SettingService等)加载完毕后，当应用处于Ready阶段后，自动加载各扩展对象。加载过程中，扩展服务会根据其类型选择具体的扩展服务进行解析扩展程序，不符合规范的扩展程序，会通过异常的方式通知开发者，符合规范的扩展则会默认激活(active)执行。自定义IDE Workbench功能，则是通过该框架丰富的声明式组件，基础服务(React Mapping程序，状态管理、事件模块等)对象，可自己DIY整个IDE交互界面。