原文連結： 基於開源大資料排程系統 Taier 的 Web 前端架構選型及技術實踐

課件獲取：關注公眾號 **“數棧研習社” ，後臺私信 “Taier”** 獲得直播課件

視訊回放：

Taier 開源專案地址： 丨 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），歡迎對大資料開源專案有興趣的同學加入交流最新技術資訊，開源專案庫地址：