KeepItSimple,Stupid。这是开发者耳熟能详的KISS原则，也像是一个带有嘲讽意味的善意提醒，提醒每一位前端人，简单易懂的用户体验和简单的构建逻辑是最简单的前端开发的方法。这也是袋鼠云栈前端开发团队追求的目标。DataStack是一个云原生的一站式大数据开发管理平台，专注于一站式产品体系，覆盖数据全链路开发流程，全面兼容本地化，拥有自主可控的核心源码。2021年12月16日，基于多年大数据开发经验打造的轻量级WebIDE组件库Molecule开源。2022年2月22日，以Molecule作为重要UI组件之一构建的分布式可视化DAG任务调度系统Taier也如火如荼地加入了开源社区。今天，在泰尔通过上百家企业客户的实际生产环境测试后，我们想借今天的文章，与大家分享一些在泰尔建设过程中遇到的Molecule和antd的适配解决方案，以及它们在实际性能中的使用WebIDE开发。1.简介Taier是DataStack构建的可视化DAG任务调度系统。其初衷是让大数据开发工程师可以专注于业务逻辑的开发，而不必被错综复杂的任务依赖所束缚。这个目标是通过WebIDE部分实现的。Molecule作为一个轻量级的WebIDEUI框架，在数字栈平台的迭代中积累，可以大大减少构建编辑器的时间。它的扩展机制也使得它可以轻松应对各种需求增长。Molecule抽象了数据栈产品中离线任务的在线编辑配置功能，同时支持所有产品中存在的SQL代码的在线编写。Molecule在各方面的良好表现让我们很快意识到，使用Molecule来承担泰尔系统中IDE组件的角色几乎顺理成章。2.优点在Molecule之前，前端长期受WebIDE之苦。WebIDE的开发一直是整个大数据平台开发中非常复杂和繁琐的一环。从头开始构建一个WebIDE通常意味着大量的努力和苦思冥想，时间成本是无法估量的。传统的IDE框架，熟悉门槛高，维护成本高，对维护人员的技术水平一直有很高的要求。Datastack的研发团队对此深有体会。我们开源的Molecule从一开始就非常坚定“开箱即用，易维护”的目标。自开源以来，它一直在不断改进。现在我们可以自信地说，Molecule让WebIDEUI框架变得轻量级和高度可扩展，在不牺牲需求可能性的情况下极大地提升了前端开发体验。它是一个具有完整解决方案的开发组件框架。3.应用与实践泰尔添加分子的过程并非一帆风顺。为了解决泰尔开发一个WebIDE和大量传统表单的问题，不得不同时引入AntDesign和Molecule。但是在一个前端项目中同时使用了两个组件库，马上就出现了样式冲突的问题。Molecule的加入“破坏”了原本只有antd参与的开发界面，让我们哭笑不得。我们不得不思考如何解决同一个前端项目使用多个UI组件库时的样式冲突问题？不同的组件有不同的设计系统，不同的系统应该如何交互？经过无数次的摸索、实践和不断的调整，我们找到了解决方案：3.1如何解决样式冲突首先，整体样式颜色冲突可以通过自定义主题色来解决，AntDesign和Molecule都具备通过修改的能力配置整体主题色，如：配置以上属性后，AntDesign所有组件使用的主品牌色改为#3f87ff。另外，我们还修改了一些其他的样式，让AntDesign的整体样式更加Molecule，比如圆角属性，超链接属性等。除了主题色的修改外，还需要解决适配问题的动态主题颜色。Molecule的强大功能之一是您可以根据自己的喜好在不同的主题之间切换，例如：深色默认主题或浅色默认主题。Molecule之所以可以轻松切换主题，很简单，就是基于CSS变量。目前AntDesign的动态主题功能还是实验性的功能，所以我们另辟蹊径。通过Molecule提供的监听主题变色事件动态加载不同主题风格的AntDesign风格文件。例如：上面代码的大致意思是，当Molecule的主题发生变化时，如果变化的主题是深色主题，那么我们加载AntDesign的深色主题样式的样式文件，否则我们移除AntDesign的深色主题样式文件。下面两张图是适配前和调整后可以自由选择的开发界面：3.2如何适配交互系统在传统的大数据平台中，我们在修改任务提交代码的时候，需要跳转到页面进入任务管理或调度管理查看一些相关的运行信息或调度信息。有时我们不想离开当前的编辑页面，同时又想进入调度管理页面查看相关信息，就不得不来回切换页面或者新开一个页面来回切换。得益于Molecule提供的强大的扩展机制，我们可以在扩展中根据自己的需要高度自定义页面中任何可见或不可见的元素。比如在开发任务管理的时候，为了解决页面之间来回切换的问题，我们在Molecule的菜单栏中加入了任务管理，监听后打开AntDesign的抽屉组件渲染不同的组件内容菜单栏的事件。3.3其他优化除了自定义菜单栏，我们还可以自定义任意区域。例如，在处理数据源中心的过程中，我们将数据源中心添加到活动面板（ActivityBar）中，同时借助于MoleculeIDE区域添加新建或编辑数据源窗口分子提供的API。这样数据源中心也不需要来回切换页面，可以通过在当前页面切换面板，打开Tab等方式进行修改。除了上面提到的菜单栏和活动面板，Molecule支持自定义所有视图的区域。具体细节可以通过Molecule的官方文档查看。引入Molecule后，泰尔上的开发不再需要从头开始布局，一个一个构建各个组件，而是可以直接将不同的组件填充到对应的布局区域。Molecule的加入大大减少了前期的开发时间，同时将开发者从组件的维护和代码的底层逻辑清洗中解放出来，让他们可以专注于业务本身。同时，Molecule的引入优化了泰尔的交互方式。DataStack在不放弃现有AntDesign的情况下，兼容了Molecule的风格，提升了一站式大数据开发平台的用户体验。4.总结数据栈技术团队一直坚信开源文化的生命力。“人人为一，人人一份”的理想之火一直燃烧在每一位数字栈开发者的心中。DataStack这个大家庭汇集了一群志同道合的战友，开源协作的高效、跨界的软件开发模式从一开始就贯彻到现在。我们之所以一直坚定走开源路线，除了Datastack对技术优化的重视外，也是因为我们深知处于领先地位后对社区的责任感行业水平，我们想尽最大努力提高整个软件行业的技术水平。添加砖块和瓷砖。分子是从我们日常的开发工作中沉淀出来的。是一个“致力于一线开发者实际开发场景”的UI框架。相信开源后会提高广大开发同仁的工作效率，提升开发体验。也可以在实际使用中暴露出可以继续改进和优化的问题。竭诚欢迎社会各界朋友交流探讨。我们在分享的过程中分享，向强者学习。DataStack希望与社区的开发者共同进步，繁荣国内开源生态
