博客 Molecule在GitHub与Gitee正式开源咯!丨开源上线

Molecule在GitHub与Gitee正式开源咯!丨开源上线

   数栈君   发表于 2021-12-21 15:59  1766  0

铛铛铛

12月16日9:00

我们的Molecule在GitHub与Gitee

正式开源咯!!!

什么?你还不知道它是谁?

那就先来认识一下这位新成员吧

ps:悄悄告诉你 文末还有小惊喜

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user166259/article/1fea9ccbe8e640a39842f68dd16be1dc..png

Molecule简介

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架构解耦,在保持业务高速迭代的同时,使得产品交互体验依然保持良好的可持续进化能力。

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user166259/article/bf416054ff3835efdbda69dd80a5d796..jpg

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user166259/article/399bfa28fcc62743c7b0766d7cfe6bb8..png

Molecule缘由

数栈(DTInsight)是一款一站式数据中台 PasS 产品,产品的使用者大部分是开发者,IDE交互是其中很重要的一部分,它关乎到使用者的工作效率。

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user166259/article/a02e533c65f0b45a0227fdf77438846d..jpg

▲ 数栈早期开发平台

上图中的RD-OS是数栈开发平台早期版本,当时产品所需实现的功能较简单,团队初期是基于React + Antd + Codemirror来进行了UI界面搭建。同时因为数栈多个产品皆有涉及到Workbench使用场景,团队为方便其它产品复用还抽象出了一个IDE Workbench UI的React组件。

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user166259/article/c929389d500257b3758ee683f58a489f..jpg

▲ 当前Web IDE版本

随着业务发展,产品迭代,原有页面功能变得十分密集复杂,而产品布局、视觉、交互等又一直在更新变化。在面对新的交互、视觉诉求时,早期简单堆叠的技术架构就显得有些拙荆见肘。而设计师新出的方案,成本高,难实施。

于是在
2019 年,数栈技术和产品团队对市面上较优秀的Web IDE产品Cloud9 IDE、VS Code、Eclipse
Theia等进行了调研。虽然这些产品具有非常好的UI抽象、扩展性且定制主题等也比较方便。但相对于数栈需求来说略显厚重,且成本高不够灵活。

基于上述因素,数栈技术团队试图寻找出一种更优方案来实现UI抽象、UI 自定义、定制ColorTheme 、React 项目无缝衔接等功能,让数栈产品交具有简单且可持续进化能力。于是在对VS Code源码进行研究后,Molecule诞生了。

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user166259/article/47335ff81bb0e6b70872d8395cf5da57..png

核心功能

在新版本参考了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 支持

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user166259/article/506c961914804d034a5f9743762265ab..jpg

上图重新抽象的
Workbench UI。基于一个简单的扩展(Extension),像
Workbench、ColorTheme、QuickAccess、Keybinding、i18n、Settings 等功能,通过
Molecule 内置的服务,可以轻松的使用和扩展。

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user166259/article/47d2f280569c153f0c59c662a3502506..png

Molecule优势

▪ React.js 应用无缝接入

▪ 基于  React.js 的组件库,更好的 UI 自定义能力

▪ 基本兼容了 VS Code  上千种 ColorTheme 扩展

▪ Molecule 只是一个单纯的 Web IDE UI 交互框架,不涉及例如文件系统、版本管理、 LSP、DAP、Terminal 等更复杂的 IDE 功能,需要开发者自己手动实现。

http://dtstack-static.oss-cn-hangzhou.aliyuncs.com/2021bbs/files_user166259/article/b7f1682612742ac245fb7e1b190c0af8..png

使用方式

具体适用方法请参考GitHub和Gitee“快速开始”文档,也可点击阅读原文直接到达。

GitHub:https://github.com/DTStack/molecule

Gitee:https://gitee.com/dtstack_dev/molecule

目前的Molecule还是一个Beta版本,虽然参考了一些VS

Code的设计概念,但API还是不够简洁,布局也不够精细。接下来技术团队会考虑参考Layout系统设计更为丰富的布局,更精细化的交互,改善开发者使用感官,提升开发者实用效率,在与社区内开发者进一步碰撞的基础上继续完善Molecule。

0条评论
社区公告
  • 大数据领域最专业的产品&技术交流社区,专注于探讨与分享大数据领域有趣又火热的信息,专业又专注的数据人园地

最新活动更多
微信扫码获取数字化转型资料
钉钉扫码加入技术交流群