基于开源大数据调度系统Taier的Web前端架构选型及技术实践

2022-06-20 413

课件获取：关注公众号**“数栈研习社”，后台私信“Taier”**获得直播课件

Taier开源项目地址：github丨gitee

上两期，我们为大家分享了Taier入门及控制台的介绍，本期我们为大家分享Taier的Web前端架构介绍。本次分享我们将从Taier的前端技术栈选型，到技术实现以及未来规划为大家讲解。

一、Taier的Web前端技术栈介绍

首先我们来为大家介绍Taier的Web前端架构图，如下图所示：

我们的项目以UmiJS作为底层脚手架，在此基础上，引入 TailwindCSS、Sass、React三个插件，在UI组件库中引入 Molecule 和 Ant Design，辅以esbuild作为编译打包的工具，最后的产物是 HTML 和 JavaScript。

1、前端脚手架选型介绍

在前端众多的脚手架、框架中我们选择了UmiJS作为我们的底层脚手架，之所以选择UmiJS的原因，主要是基于以下几点的考虑：

上手成本低，启动项目快
较少的配置需求，需要快速搭建页面
需要整合 Ant Design
有团队维护，后续开发有保障

2、UI组件库选型介绍

在UI组件库的选择上，除了引入Ant Design 外，我们还引入了 Molecule。

Molecule 是我司开源的一个轻量级Web IDE UI 框架。通过实现插件（Extensions）的机制，我们可以快速地从一个 Workbench 实现一个功能齐全的 IDE 项目，具备轻量级，可扩展，易上手等特点。点此进入molecule介绍

在 Taier 的界面中，整个 IDE 的界面就是基于 Molecule 所提供的 Workbench 所做的自定义，这一部分是 Taier 界面至关重要的一部分。

二、Taier前端技术实现详解

在了解完前端技术栈选型之后，接下来我们对其中的技术实现做深入的介绍。

1、目录架构

首先，我们以 Taier 的目录作为切入点来了解 Taier 前端最重要的三个技术点，分别是Pages、Extensions、Services 文件夹。

Pages 文件夹

基于 React 实现的 JSX 文件，我们将其定义为 View 层

Extensions 文件夹

基于 Molecule 所提供的功能，主要实现了 Model 和 Controller 层的内容

Services 文件夹

主要实现 Controller 层的内容

2、技术架构介绍

基于上述的分析和理解，我们可以看出 Taier 前端是一个比较典型的 MVC 架构。

接下来，我们详细分析这三者组成的 MVC 架构是如何在项目中发挥作用，三者之间是如何联系并支撑起 Taier 项目。

React

React 是 Facebook 开源的一个用于构建用户界面的 JavaScript 库，较高的性能和较为简单的代码逻辑使得自发布以来，越来越多的人关注和使用它，而在此项目中我们使用的是React的SPA、声明式及组件化这3个特点，其对应到页面的优点分别是提升用户体验、组件状态简洁及组件逻辑服复用。

Molecule

接着，我们介绍一下 Molecule 在 Taier 中的应用。Molecule 以 Workbench 作为基础，通过 Extensions 可以扩展 Workbench 的功能，通过 Components 丰富 Workbench 的交互。这对于服务端的同学来说，可能会比较抽象，我们可以把 Extensions 的功能理解为 Java 中的Implement，把 Components 理解为 Extends。

Services

Services 的作用是封装通用的对数据模型的操作。譬如针对编辑器的actions，我们需要针对不同的任务展示不同的actions，同时在快捷操作中，我们需要判断当前任务所具有的 actions。那这种分散在不同组件，具有相同逻辑的代码，我们将其提取出来，抽象出一个 EditorActionBarService

React 和 Molecule的联系

基于我们刚才介绍的 Molecule 的特性，这里我们只需要将基于 React 实现的 JSX/TSX 组件通过扩展的形式，对 Workbench 进行自定义即可。

如图所示，我们通过调用 molecule.editor.setEntry来自定义 Workbench 的入口页，通过 molecule.activityBar.add 以及 molecule.sidebar.add 来将数据源中心添加到左侧活动面板之中。

我们可以观察到，只需要调用 molecule.x.y如上形式的代码，将 React 组件传入即可。其中 x代表当前要对哪一块面板进行操作，可以是 editor，可以是 sidebar 等，y 代表了要进行什么操作，包括 add，remove，update的操作。

Molecule 与 Services 的联系

我们通过 Extensions 中调用Services 方法，然后在Services 中调用 Molecule 导出对象的方法即可。具体如下：

图中所示是经过删减的 CatalogueService，主要负责 Taier 中任务目录的实现。

其中有一个方法是 loadRootFolder，这里的逻辑是从服务端获取到目录信息，然后进行处理，将处理后的目录节点信息通过调用 molecule.folderTree.add 方法添加到任务开发目录中。在声明出如上的Service 后，我们需要初始化该Service，然后在 extensions 中调用即可。

Service 和 React 的联系

比较熟悉前端的同学可能已经知道可以通过 HOC 来实现，那这里我们给不熟悉的同学简单介绍 HOC 的作用。

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

在前端大部分的状态管理工具中，都有一个 connect 就是一个 HOC。在 Taier 中，我们同样也基于 HOC 去实现 Service 和 React 的联系。

我们声明一个 RightBarService，主要负责渲染右侧的侧边栏，将其初始化之后，我们通过如下方式将实例和 React 组件联系上。

我们可以观察到，connect 作为一个函数，第一个参数是我们初始化后的Service 实例，第二个参数是我们需要与Service 联系的具体组件。同时我们观察到该组件的参数（即 props）中可以获取到Service 中存储的数据结构，在简单地使用后，就可以在组件内容获取到Service 的数据。

但是仅仅获取到数据是不够的，在大多数情况下，我们需要该数据的改变来引起组件的重渲染。而这一块的实现得意于 Molecule 提供的一个 Component Class，在遵循某种规范下，继承该 Class 的Service 中的数据发生改变后会引入与该Service相关联的组件重渲染。

三、Taier前端未来规划

对于Taier前端的未来规划，我们将遵循以下三个方面;

- 更稳定

首先，我们要做到更稳定。目前Taier 项目的稳定性还不够，更稳定是我们一直追求的目标，未来我们要做到：

提升测试覆盖率，确保稳定性
优化错误提示信息，以确保发生错误后可以通过错误排查问题
支持埋点平台或其他监控平台接入，确保所有错误都可被捕获被检测

易扩展

其次，我们要做到易扩展。未来我们将在以下这几点发力：

支持更多的任务类型，目前 Taier 所支持的 5 种任务类型在大数据开发中仍是不够的，我们后续会持续迭代，支持更多的类型
支持针对不同任务代码解析出大纲，大纲的作用是让大数据开发更容易在大段的代码片段中定位到所需代码的位置
对二次开发用户友好，这一点与前一期提到的一样，不止是服务端需要支持，同样前端也需要支持自定义组件的开发

易上手

最后，我们要做到易上手。目前 Taier 的上手主要依靠用户自身对大数据开发的经验，那么对于大数据开发经验较少的用户只能依靠为数不多的文档进行熟悉，未来我们会针对以下方面进行改善：

丰富 coding 的语法补全功能，即 snippet 功能
优化文案提示
优化代码体验

以上就是Taier Web前端架构的介绍和未来的一些规划方向，也欢迎大家来一起交流讨论，Taier技术团队希望和大家一起成长，一起更好的建设Taier。

袋鼠云开源框架钉钉技术交流群（30537511），欢迎对大数据开源项目有兴趣的同学加入交流最新技术信息，开源项目库地址：https://github.com/DTStack

微信关注我们

原文链接：https://my.oschina.net/u/3869098/blog/5542591

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

分布式事务处理方案大 PK！

@[toc] 说好了写 TienChin 项目的，最近这个分布式事务算是一个支线任务吧，今天是最后一篇，松哥再来一个短篇和小伙伴们总结一下分布式事务。首先先说一个大原则：分布式事务能不用就不要用，毕竟这个用起来还是有一些麻烦的。当然，不用和不会用可是两码事。 1. 分布式事务基础理论学习分布式事务，有一些基础理论需要我们先来了解下。 1.1 本地事务本地事务是指将多条语句作为一个整体进行操作的功能，通过数据库事务可以确保该事务范围内的所有操作都可以全部成功或者全部失败，如果事务失败，那么效果就和没有执行这些SQL一样，不会对数据库数据有任何改动。也就是事务具有原子性，一个事务中的一系列操作要么全部成功，要么全部失败。一般来说，事务具有 4 个属性： Atomic：原子性，将一个事务中的所有 SQL 作为原子工作单元执行，要么全部执行，要么全部不执行； Consistent：一致性，事务完成后，所有数据的状态都是一致的，以银行转帐为例，如果 A 账户减去了 100，则 B 账户则必定加上了 100； Isolation：隔离性，如果有多个事务并发执行，每个事务作出的修改必须与其他事...

2022-06-20

422

前言近期 Furion 框架用户暴增，仿佛回到了刚诞生的时候，每天都有很多需求，一些隐藏两年都没发现的 bug 被浮出水面，更新更是一天一个版本迭代~ 从 v3.6.0 版本开始，Furion 对通用主机进行的重构，终于拥有辨识度极高的入门体验以及个性化的错误页。另外值得庆祝的是，Furion 终于迎来了第 200 个贡献者。😊 框架信息 Gitee：https://gitee.com/dotnetchina/Furion GitHub：https://github.com/monksoul/Furion Nuget：https://www.nuget.org/packages/Furion 国内文档：https://dotnetchina.gitee.io/furion 国外文档：https://furion.icu 本期更新新特性 [新增]Serve.Run()极简主机模式，真正实现极速入门。95cac5b [新增]TP.Wrapper(...)拓展方法，主要用来生成规范化的日志模板427999a [支持]项目类型为<Project Sdk="Microsoft.NE...

2022-06-20

729

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。