CN112527284A - 一种轻量级的插件式、组件化的web ide ui开发框架 - Google Patents

一种轻量级的插件式、组件化的web ide ui开发框架 Download PDF

Info

Publication number
CN112527284A
CN112527284A CN202011588767.2A CN202011588767A CN112527284A CN 112527284 A CN112527284 A CN 112527284A CN 202011588767 A CN202011588767 A CN 202011588767A CN 112527284 A CN112527284 A CN 112527284A
Authority
CN
China
Prior art keywords
module
ide
service
service module
extension
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202011588767.2A
Other languages
English (en)
Inventor
左威威
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hangzhou Daishu Technology Co ltd
Original Assignee
Hangzhou Daishu Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Hangzhou Daishu Technology Co ltd filed Critical Hangzhou Daishu Technology Co ltd
Priority to CN202011588767.2A priority Critical patent/CN112527284A/zh
Publication of CN112527284A publication Critical patent/CN112527284A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/35—Creation or generation of source code model driven
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)

Abstract

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

Description

一种轻量级的插件式、组件化的WEB IDE UI开发框架
技术领域
本发明涉及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交互界面。

Claims (7)

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

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011588767.2A CN112527284A (zh) 2020-12-29 2020-12-29 一种轻量级的插件式、组件化的web ide ui开发框架

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011588767.2A CN112527284A (zh) 2020-12-29 2020-12-29 一种轻量级的插件式、组件化的web ide ui开发框架

Publications (1)

Publication Number Publication Date
CN112527284A true CN112527284A (zh) 2021-03-19

Family

ID=74976943

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011588767.2A Pending CN112527284A (zh) 2020-12-29 2020-12-29 一种轻量级的插件式、组件化的web ide ui开发框架

Country Status (1)

Country Link
CN (1) CN112527284A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114079653A (zh) * 2021-11-17 2022-02-22 北京字节跳动网络技术有限公司 一种通信方法、装置、计算机设备和存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105138337A (zh) * 2015-08-31 2015-12-09 华为技术有限公司 一种插件适配方法及插件适配装置
CN108388444A (zh) * 2018-03-05 2018-08-10 重庆邮电大学 一种基于React组件的前端页面配置方法及系统
CN109960493A (zh) * 2019-03-25 2019-07-02 山东浪潮通软信息科技有限公司 一种基于动态插件机制的在线ide开发方法
CN111124477A (zh) * 2019-12-19 2020-05-08 华云数据有限公司 一种前端配置方法、系统及电子设备
US20200348925A1 (en) * 2019-04-30 2020-11-05 Salesforce.Com, Inc. Generic Integrated Development Environment Extension Tool for Design Systems

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105138337A (zh) * 2015-08-31 2015-12-09 华为技术有限公司 一种插件适配方法及插件适配装置
CN108388444A (zh) * 2018-03-05 2018-08-10 重庆邮电大学 一种基于React组件的前端页面配置方法及系统
CN109960493A (zh) * 2019-03-25 2019-07-02 山东浪潮通软信息科技有限公司 一种基于动态插件机制的在线ide开发方法
US20200348925A1 (en) * 2019-04-30 2020-11-05 Salesforce.Com, Inc. Generic Integrated Development Environment Extension Tool for Design Systems
CN111124477A (zh) * 2019-12-19 2020-05-08 华云数据有限公司 一种前端配置方法、系统及电子设备

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
匠心博客: "Eclipse Theia 框架技术架构揭秘", 《HTTPS://ZHAOMENGHUAN.JS.ORG/BLOG/THEIA-TECH-ARCHITECTURE.HTML》 *
谷钰等: "Eclipse插件体系结构的研究", 《电脑知识与技术》 *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114079653A (zh) * 2021-11-17 2022-02-22 北京字节跳动网络技术有限公司 一种通信方法、装置、计算机设备和存储介质
CN114079653B (zh) * 2021-11-17 2023-10-20 抖音视界有限公司 一种通信方法、装置、计算机设备和存储介质

Similar Documents

Publication Publication Date Title
CN110597506B (zh) 一种前端应用可视化开发工具和使用方法
US7992128B2 (en) Computer software adaptation method and system
US8856667B2 (en) Graphical state machine based programming for a graphical user interface
US8504930B1 (en) User interface substitution
CN111694564B (zh) Flutter混合模式的编译方法、装置、设备和介质
CN106055368B (zh) 应用更新方法和装置
KR20140019623A (ko) 웹 어플리케이션 저작을 위한 통합 플랫폼 및 그 저작 방법
US20230229406A1 (en) Page rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product
WO2015039628A1 (zh) 可视化步骤编程法
CN110955850A (zh) 一种组件化树形控件的处理方法
CN112527284A (zh) 一种轻量级的插件式、组件化的web ide ui开发框架
KR102300005B1 (ko) 소프트웨어 컴포넌트를 표현하는 각각의 그래픽 객체 간의 연결 조작을 이용한 소프트웨어 개발 어시스트 방법 및 그 시스템
JP2020030621A (ja) 情報処理装置およびプログラム
bin Uzayr et al. Introduction to Visual Studio Code
Strangolino Cumbia: graphical libraries and formula plugin to combine and display data from TANGO, EPICS and more
Vos et al. Using scene builder to create a user interface
CN114741073B (zh) 一种plc组态系统及顺序控制图形生成方法
Raneburger et al. An iterative and incremental process for interaction design through automated GUI generation
Del Sole et al. Running and debugging code
Sinkkonen Asymmetric multiprocessing of Linux and hard real-time systems
Del Sole Building and Debugging Applications
Freeman et al. JavaScript Primer
Del Sole Building and Debugging Applications:. NET 5 and Other Platforms
Verma Snippets, Templates, and More…
NASIBULLIN VISUAL STUDIO AS A WAY OF CREATING SOFTWARE. COMPARISON WITH OTHER PROGRAMS

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information
CB02 Change of applicant information

Address after: 311121 room 102-1 / F, room 102-2 / F, building 6, Haizhi center, 2301 yuhangtang Road, Cangqian street, Yuhang District, Hangzhou, Zhejiang Province

Applicant after: HANGZHOU DAISHU TECHNOLOGY CO.,LTD.

Address before: 310030 8F, building 2, Hangzhou Internet innovation and entrepreneurship Park, 176 Zixia street, Xihu District, Hangzhou, Zhejiang

Applicant before: HANGZHOU DAISHU TECHNOLOGY CO.,LTD.

RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20210319