Molecule实现数栈至简前端开发新体验
Keep It Simple, Stupid.
这是开发人耳熟能详的 KISS 原则,也像是一句有调侃意味的善意提醒,提醒每个前端人,简洁易懂的用户体验和删繁就简的搭建逻辑就是前端开发的至简大道。
这也是袋鼠云数栈前端开发团队追求的目标。
数栈是一个专注一站式产品体系,覆盖数据全链路开发流程,全面国产化兼容,核心源码自主可控的云原生一站式大数据开发治理平台。
2021年12月16日,基于数栈多年大数据开发经验的基础沉淀出的轻量级 Web IDE 组件库,Molecule 开源。2022年2月22日,将Molecule 作为其中一个重要 UI 组件搭建出的分布式可视化的 DAG 任务调度系统——Taier,也紧锣密鼓加入了开源社区。
在Taier经过数百家企业客户的生产环境实战检验之后的今天,我们想用今天这篇文章跟大家分享一些在 Taier 的搭建过程中时遇到的Molecule 与antd如何适配的解决经验和它们在 Web IDE 开发中的实战表现。
一、介绍
Taier 是数栈搭建的一个可视化 DAG 任务调度系统,其搭建初衷是为了让大数据开发工程师可以将精力集中在业务逻辑的开发上,而不用被任务错综复杂的依赖关系捆住手脚。这一目标就要靠其中 Web IDE 的部分实现。
而在数栈平台日积月累的迭代中沉淀而来的Molecule ,作为轻量级的 Web IDE UI 框架,能极大地减少搭建编辑器的时间,其具有的扩展(Extension)机制也使它可以轻易地应对各种需求增长。Molecule抽象自数栈产品中离线任务的在线编辑配置功能,同时反哺支撑了各个产品中都存在的在线编写 SQL 代码。Molecule在各方面的不俗表现使我们很快意识到,用Molecule来承担Taier系统中的IDE组件角色几乎是顺理成章。
二、优势
Molecule之前,前端苦Web IDE久矣。
Web IDE的开发从来是整个大数据平台开发中非常繁复和笨重的一环,从零搭建一个 Web IDE 通常意味着大量的殚精竭虑和苦思冥想,时间成本更是不可计数。传统的 IDE 框架熟悉门槛高,维护费用大,对维护人员的技术一直都有很高要求。数栈的研发团队对此深有体会,我们开源的 Molecule 从最开始就对“开箱即用,维护方便”这个目标非常坚定,从开源以来它也在不断完善,现在我们可以自信的说,Molecule 将 Web IDE UI 框架做到了轻量级,高延展,在不牺牲需求可能性的前提下极大地提升了前端开发体验,是一套具备完整的解决方案的开发组件框架。
三、应用与实践
将 Molecule 加入 Taier 的过程不是一帆风顺的。为了解决 Taier 中需要开发 Web IDE 和大量传统表单表格的问题,我们不得不同时引入 Ant Design 和 Molecule。
而一个前端项目里两个组件库同时使用立刻出现了样式冲突的问题,Molecule的加入让原本仅由antd参与的开发界面“破坏”得让我们哭笑不得。我们不得不思考,将多个 UI 组件库用于同一个前端项目,如何解决样式风格冲突问题?不同的组件有不同的设计体系,不同体系间又该如何交互?经过无数次摸索实践和不断调整,我们找到了解决办法:
3.1 如何解决风格冲突
首先,整体风格颜色的冲突可以通过自定义主题色来解决,而 Ant Design 和 Molecule 都具备通过配置的方式来实现修改整体主题色,如:
配置完上述属性后,Ant Design 所有组件用到的主品牌色就被修改成了 #3f87ff 这个颜色。除此之外,我们还修改了其他一些样式使 Ant Design 的整体风格更偏向 Molecule,如圆角属性,超链接属性等。
除了主题色的修改以外,还需要解决动态主题色的适配问题。Molecule 强大的功能之一就是可以基于自己的喜好切换不同的主题,例如:Dark Default 主题或 Light Default 主题。而 Molecule 可以方便地切换主题的原因简单来说是基于 CSS 变量实现的。而目前 Ant Design 的动态主题功能仍处于实验性的功能,故我们另辟蹊径。通过 Molecule 提供的监听主题色改变的事件,动态地加载不同主题风格的 Ant Design 样式文件。如:
以上代码的大致意思是,当 Molecule 的主题发生改变的时候,如果改变后的主题是暗黑主题,那么我们就加载 Ant Design 的暗黑主题风格的样式文件,否则我们移除 Ant Design 的暗黑风格主题样式文件。
下面两张图就是适配前和做完调整之后可以自由选择的开发界面:
3.2 如何适配交互体系
在传统的大数据平台中,当我们修改某个任务并提交代码后,我们需要跳转页面至任务管理或调度管理查看一些相关运行信息或调度信息。有时我们并不想离开当前的编辑页面,同时又想进入调度管理页面查看相关信息的时候,就不得不的来回切换页面或打开新的页面来回切换。
得益于 Molecule 提供的强大的扩展(extension)机制,我们可以在扩展中根据自身需求高度定制化页面中任何可见或不可见的元素。例如在开发任务管理时,为了解决页面之间来回切换跳转的问题,我们通过将任务管理添加到 Molecule 的菜单栏中,并且监听菜单栏的事件后打开 Ant Design 的抽屉组件渲染不同组件内容。
3.3 其他优化
除了可以对菜单栏自定义以外,我们还可以对任意区域自定义。例如在处理数据源中心的过程中,我们将数据源中心添加到了活动面板(ActivityBar)处,同时借助 Molecule 提供的 API 将新增或编辑数据源窗口添加到 Molecule 的 IDE 区域。使得数据源中心同样也不需要来回切换页面,而是通过当前在页面切换面板,打开 Tab 等方式进行修改。
除了上述提到菜单栏和活动面板以外,Molecule 支持对所见的所有区域均可自定义。具体细节可以通过 Molecule 的官方文档进行查看。
在引入 Molecule 后,在 Taier 上的开发不再需要从零开始布局,对单个组件进行一一搭建, 而是可以直接将不同的组件填充到对应的布局区域中。Molecule 的加入极大地减少了前期的开发时长,同时将开发人员从组件的维护和代码的底层逻辑清理中解放出来,能把精力集中到业务本身。
同时, Molecule 的 引入优化了 Taier 的交互方式,在不舍弃已有的 Ant Design 的前提下,数栈设法兼容了 Molecule 的风格,提升了一站式大数据开发平台的用户体验。
四、总结
数栈技术团队一直相信开源文化的生命力。“人人为我,我为人人”的理想火种也一直在每个数栈开发人的心里燃烧。数栈这个大家庭汇聚了一帮志同道合的战友,将开源协同这种高能效,跨边界的软件开发模式从起步始,一直贯彻至今。我们对开源路线始终坚定的原因,除了数栈对技术优化的重视,也出于我们处为行业领先水平后,对社区责任感的充分意识,想尽自己绵薄微力,为整个软件行业的技术水平提升添砖加瓦。
Molecule从我们的日常开发工作中沉淀而来,是一个“专用于一线开发人员实际开发场景”的UI框架,而我们相信开源之后,它会在提高广大开发同仁工作效率,提升开发体验的同时,也能在实际使用中暴露出它还可以继续改良优化的问题。我们真诚欢迎同社区的朋友进行交流和探索,我们做分享,也在分享中不断向强者学习。数栈惟愿和社区的研发者共同进步,繁荣国内开源的生态圈
Molecule实现数栈至简前端开发新体验的更多相关文章
- 开放融合易用@门户移动开发新体验-逐浪CMS v8.0.1全面发布
北京时间2019年8月30日消息: 领先的web内核研发厂商--上海Zoomla!逐浪CMS团队发布最新CMS版本:Zoomla!逐浪CMS v8.0.1,这是继上个版本v8.0后功能最具完强大与精彩 ...
- .NET界面开发新体验!DevExpress v19.2.4全新来袭
DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...
- Web前端开发大系概览 (前端开发技术栈)
前言 互联网建立50多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案. 我从2000 ...
- 基于.Net进行前端开发的技术栈发展路线(二)
前言 上一篇<我的技能树>文章分享了我的技能成长过程,还未完成,今天继续跟大家分享. 01 我的技能树 我的当前的技能树: 其中,标注为黄色旗帜的是基本掌握,标注为红色旗帜的为使用熟练.未 ...
- 基于.Net进行前端开发的技术栈发展路线(一)
前言 今天想讲讲的是我的技术树.我最初是做CS开发的,第一阶段的技术经历是以Powerbuilder来做CS开发,第二阶段开始基于C#做winform开发,眼看前端开发越来越流行,需要更广泛的技术栈势 ...
- 基于.Net进行前端开发的技术栈发展路线(三)
前言 上一篇<我的技能树二>文章分享了我的技能中的前端技能和Java技能,今天继续跟大家分享的就是后端技能了. 我的技能树 我当前的技能树: 其中,标注为黄色旗帜的是基本掌握,标注为红色旗 ...
- python 全栈开发,Day90(Vue组件,前端开发工具包)
昨日内容回顾 1. Vue使用 1. 生成Vue实例和DOM中元素绑定 2. app.$el --> 取出该vue实例绑定的DOM标签 3. app.$data --> 取出该vue实例绑 ...
- BAT 前端开发面试 —— 吐血总结
更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了腾讯和阿里的内推及百度的实习生招聘,在此总结一下 一是备忘.总结提升,二是希望给大家一些参考 其他面试及基础相关可以参考其他博文: ...
- 淘宝前端工程师:国内WEB前端开发十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
随机推荐
- OSI七层协议&TCP协议(三次握手四次挥手)
今日内容 python 基础回顾 软件开发架构 网络理论前戏 OSI 七层协议(五层) TCP协议 三次握手与四次挥手 UDP协议 内容详细 一.python 基础回顾 1.基本数据类型 整型 int ...
- Solution -「多校联训」染色
\(\mathcal{Description}\) Link. 给定 \(n\) 和 \(q\) 次询问,每次询问给出 \(x,k\),求第 \(x\) 位为 0 且任意两个 1 的下标之差不 ...
- code-server服务端开发利器,再也不用vim装逼了!!!
一直有个需求,就是万不得已在服务修改代码的时候能有个好的工具,至少比vim要强吧!虽然vim也还行,但是如果比vscode那一定是差了点!这个微软洗心革面的新工具着实不错!从刚开始的鄙视到真香我用了不 ...
- git忽略文件提交 .gitignore
Git 忽略规则 详细的忽略规则可以参考官方英文文档 Git 忽略规则优先级 在 .gitingore 文件中,每一行指定一个忽略规则,Git 检查忽略规则的时候有多个来源,它的优先级如下(由高到低) ...
- 如何把Spring学精通了?
作为 Java 后端工程师,几乎都要用到 Spring,今天这篇文章是和大家说说如何学好 Spring. 在之前的一篇 Java 读书路线的文章中,我介绍过 Spring 的读书路线: 虽然 Spri ...
- MYSQL文件复制及备份
周末研究了下mysql的数据结构,记录下: 场景1:当从一台电脑的mysql的data中复制数据库的文件夹到另一台电脑上时会发现 表不存在,函数等也不存在 方法:1.需要将data根目录下的ibdat ...
- Unity容器构造函数参数循环引用问题及解决
关键字: Unity .NET5 .NET6 循环引用 循环依赖 Quartz StdSchedulerFactory 起因 在.NET6/.NET5环境中,使用Unity替换默认容器,用到了Quar ...
- NSSCTF-[SWPU 2020]找找吧
下载附件得到一个rar的压缩包,解压是需要密码的,直接丢尽winhex(菜狗经验),在最下面可以看到一个KEY is 得到第一个压缩包的密码,解压第一个压缩包得到一个mp3文件和另一个rar压缩包,将 ...
- 二分查找法&大O表示法
二分查找法的输入是一个有序的元素列表,如果要查找的元素包含在列表中,二分查找返回其位置,否则返回null Python代码(来源于<算法图解>一书): def binary_search( ...
- 《Symfony 5全面开发》教程03、使用Controller创建第一个页面
我们使用Phpstorm打开我们的项目目录,展开项目目录文件夹. Symfony项目其实也是composer项目,如果你新拿到一个Symfony项目, 你可以在控制台中使用composer insta ...