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 框架，而咱们置信开源之后，它会在进步宽广开发同仁工作效率，晋升开发体验的同时，也能在理论应用中暴露出它还能够持续改进优化的问题。咱们真挚欢送同社区的敌人进行交换和摸索，咱们做分享，也在分享中一直向强人学习。数栈惟愿和社区的研发者共同进步，凋敝国内开源的生态圈