SREWorks前端低程式碼工程設計概覽

引子

"低程式碼"一詞似乎是最近幾年才流行起來的詞彙，2015年前後AWS、Google、Oracle等廠商開始入局低程式碼領域時，國內氛圍還沒有很高。2018年5月，快速應用開發的低程式碼平臺 OutSystems 獲得 3.6 億美金投資；同年8月，西門子宣佈以 6 億歐元收購低程式碼應用開發廠商 Mendix; 此後，越來越多的企業開始嘗試以低程式碼/零程式碼技術重構數字化業務，低程式碼平臺市場逐步火爆起來。

其實低程式碼開發並非新生事物，據可考的資料，低程式碼概念最早誕生於上世紀80年代IBM的快速應用程式開發工具(RAD)；後來微軟的VB、C#視覺化開發工具Visual Studio，谷歌的Android整合開發工具Android Studio等都是對其概念的工程實踐。低程式碼本質上還是一種軟體開發方式：即不寫程式碼或少寫程式碼的方式來完成軟體開發。

於前端而言，低程式碼開發其實也並不陌生，把“低程式碼”描述為“頁面視覺化編輯”，這一概念就變得熟悉了起來，我們曾經使用過的Dreamweaver、Frontpage等其實都可以歸屬到低程式碼的範疇。隨著Angular、React、Vue等前端框架的普及以及gulp，webpack等構建工具的完善，前端進入工程化協作開發時代，逐步開始承載越來越多的業務邏輯。

當前雲原生開發火熱，在容器化微服務化技術加持下，傳統意義的後端開發瘦身，又催生出了前端服務化的理念。在適配行業領域，業務場景，使用者群體等不同條件下，前端低程式碼的設計落地和工程實踐相應會呈現出不同的特徵與特色。

文章結構

• 專案背景
• 技術架構
• 設計理念

• • 選單樹與路由
  • 前端設計器
  • 頁面佈局
  • 動態表單
  • 資料來源
  • 頁面操作
  • 節點引數閾
  • 元件擴充套件

• 願景與規劃

專案背景

SREWorks是一套面向企業級複雜業務的開源雲原生運維解決方案，是大資料SRE團隊多年工程實踐的錘鍊及沉澱。

解決前端開發的前端統一託管工程（sw-frontend）是運維解決方案的重要一環，提供了一套serverless體驗的配置化前端低程式碼解決方案，該方案以運維人員為主要使用者群體，集成了一套前端設計器/渲染器，提供前端頁面部署，程式碼回滾，編譯打包等功能。同時賦予運維人員根據自身業務需求，快速建立定製應用的能力，有效提升諸如支撐故障處理、監控分析、變更保障及值班/客服/大促等運維場景的運維效率。

技術架構

低程式碼作為一種軟體開發方式，特點在於少寫程式碼或不寫程式碼，只通過介面的托拉拽配置即可完成滿足需求場景的軟體，提高了軟體的開發效率。效率提升的關鍵在於“複用”——對於前端頁面而言，就是對頁面進行解構抽象，對映為json等格式的配置檔案，進而對各個粒度的元件進行編排複用；通過模板引擎進行元件對映，載入，渲染，路由組裝編排，資料流傳遞注入等完成頁面掛載。

作為一款著力於提升運維開發效率的前端低程式碼產品，sw-frontend工程採用React+antd為主的技術框架，設計了一套元件對映、編排、解析、渲染的工程體系：以antd元件為自由編輯粒度，使用者在前端設計器通過視覺化互動或者json編輯的方式，依據運維工作的實際使用場景，對元件進行屬性配置/元件巢狀拼裝；同時根據運維場景目標需求對頁面元件進行佈局的編排、資料來源的繫結以及在合適點位插入Dynamic Logic，完成頁面節點的設計工作，形成節點模型nodeModel，經模板解析引擎進行解析渲染。

• • sw-frontend整體架構圖如下：

核心設計

低程式碼產品由於適配的需求場景和麵向的使用者群體不同，所呈現的產品形態和互動方式也各具特點：類似汽車自動駕駛，區分L1、L2、L3...，低程式碼產品在使用複雜度上也大體呈現幾種形態：

1. 給普通使用者使用的低程式碼產品：使用者只需關心自身業務，無需程式碼配置，只用修改頁面元件的 Data 就能快速地生成頁面，通常營銷活動頁面都是通過此類方式快速構建；
2. 面向中臺開發的低程式碼產品：進行介面拖拽設計並進行json編輯配置即可；
3. 著力於提高前端人員日常產出效率的可複用元件/外掛：如json-shcema動態表等，具有一定封裝粒度，旨在提升程式碼段複用率，提升開發效率；

sw-frontend就是這樣一款面向運維中臺開發的低程式碼產品。運維是個特定的業務需求場景，搭建一個ui介面只是運維場景的需求之一；sw-fontend提供了一套滿足強互動頁面型別設計，serverless體驗，靈活的資料流處理能力和豐富的元件擴充套件能力的低程式碼解決方案。它不單是一個低程式碼框架，而且還內建了或者塑造了一整套的運維工作流模式，以適配運維業務場景的使用：

選單樹與路由

sw-frontend以使用者建立的各個應用為一級路由構建起整個前端工程的選單體系，所有的頁面都是依託“應用”為節點進行掛載的。下圖為應用運維桌面，使用者可以點選應用快捷方式進入運維應用。

運維桌面同時也是我們應用維度的其中一員，即在sw-frontend的總體設計概念上：一切皆是應用。

選單節點樹

我們將運維應用前端頁面中的選單以樹形節點（nodeTree）的形式組織起來，根結點對映為應用ID。從根節點建立的子節點，則作為一級選單，以此類推孫子節點為二級選單。如下圖資料運維平臺（appID：dataops）應用所示，一級選單為“主頁、資產目錄、資料資產、資料管理、資料服務、資料質量”。該頁面是dataops應用前端的渲染態。

進入到dataops應用的開發態，在前端開發編輯器中，我們可以從左側選單節點樹看到與上面選單一一對應的內容，每個節點上掛載了該頁面的具體配置，每個頁面配置包含一個主頁面和多個頁面區塊配置，維護管理在頁面設計器中。

動態路由生成

每個應用的頁面選單都抽象為一個頁面節點樹nodeTree，並在Node節點上可以對節點型別和選單頁佈局以及許可權等資訊進行配置(選單/Link作為巢狀路由使用)。我們將掛在在該節點的主頁面和頁面區塊的相關配置：屬性、資料來源、編排等進行配置，我們稱之為節點配置（nodeConfig）。

在一級路由頁執行渲染時，根據應用id(appId)拉取對應nodeConfig，如下以"運營中心"為例，對應的應用配置如下：其中children所代表的為二級路由；config代表的是該級節點的屬性配置；nodeTypePath欄位作為描述節點樹的上下級關聯關係key；每一級子路由進行渲染掛載都會依據nodeTypePath先去索引其下一級子路由nodeModel，用於裝載子級的動態路由。

nodeTypePath也是作為子節點獲取對應節點頁面配置的索引key，用以拼接組裝該節點的動態子路由。

前端設計器

swadmin作為內建應用的一員，同時也是其他應用的母應用，一生萬物，所有應用的都是通過前端設計器設計配置而來；在此可以對元件/頁面進行業務欄位、ui和資料來源的配置，對當前應用的節點樹進行編輯，以及對每級節點對應頁面的元件進行屬性配置、資料來源繫結和佈局編排工作。

swadmin提供了兩種互動編輯方式：

視覺化互動編輯

如下圖就是在對staticPage這一應用下的一級選單"pageScreen"頁面進行開發編輯，下方彈窗區為對頁面內大屏元件的屬性進行視覺化配置。

原始碼編輯（JSON編輯）

除了視覺化設計介面外，同時也提供了原始碼編輯，直接修改對映配置，以提供更大的靈活性；且可以在原始碼編輯和視覺化編輯之間進行靈活切換，並保持同步的編輯態。

頁面佈局

sw-frontend內建兩種頁面佈局型別：自定義佈局和流式佈局(自定義佈局當前只在內建應用使用，暫未對外部應用開源使用)。對於流式佈局我們將頁面抽象成若干行容器，在新增行容器時可以自定義分割成若干區塊並並確定分割佔比，每個區塊對應一個元件容器位。

對於自定義佈局，可以根據業務需要對新增進入的區塊元件任意拖拉改變寬高以及佈局位置：

元件體系

sw-frontend採取宣告式元件註冊機制，每個內建元件由meta元資料檔案和主檔案兩份檔案構成，其中meta以json格式用來描述該元件的一些可配置屬性及元件的屬性預設值和元件名稱、元件ID等資訊用於元件的註冊和loader載入；主檔案則用來承接使用者對元件的配置資訊和資料來源資料及一些外部嵌入的邏輯程式碼。

 

同時頁面提供自定義元件入口，供使用者自行設計一些簡單的元件以JSXRender方式進行渲染，且使用者可以對自定義元件進行新增刪除和編輯管理。

 

動態表單

表單工廠

頁面互動還有重要的一環：表單資料的互動。sw-frontend提供了近三十種輸入形式的表單項以供表單設計選擇使用，對於Form表單提供了介面化的屬性配置如：表單項型別、是否展示、表單項資料來源、表單項條件渲染、表單項label、表單項key，表單拖拽排序，動態新增表單項等。

對於表單資料的編輯回填,以及表單和頁面的資料流以及action互動，也做了模型化的抽象處理，這個在後面頁面操作章節做詳細介紹。

過濾器/表單Action

對於頁面的表單Action，如新增、編輯等，sw-frontend抽象為單獨的操作區塊，每個操作區塊建立時會生成unikey，在頁面元件工具欄區新增好操作button後，可以通過頁面互動或原始碼編輯的形式建立繫結關係。

原始碼視角下，在table元件的toolbar欄位下，“新建應用”button以blockId的形式跟新建應用的表單操作區塊建立了繫結關係；當模板引擎解析到toolbar工具欄，會用該blockId獲取到該操作區塊的配置，然後根配置以表單工廠函式載入對應表單項並對其表單項值初始化。

過濾器

過濾器是對傳統頁面開發條件中過濾表單的一種抽象，在設計器中對過濾器的定義和action表單操作大體一致，只是過濾器沒有表單提交地址，關聯元件如table的過濾重新整理，是經由過濾器將表單項的欄位值投遞到引數閾，table的資料來源獲取執行器進而通過偵聽對比引數閾的關聯欄位值的變化重新拉取資料，來間接完成表格資料的過濾查詢操作；而action操作則是將表單提交到後端地址，確認成功提交後通過callback來完成引數閾投遞更新，間接完成元件的資料重新整理操作。

過濾器

action操作

 

資料來源

sw-frontend提供了靈活的資料流處理機制，降低對介面的資料格式及引數的固定要求，使應用富客戶端化，這也是serverless體驗的關鍵一環：在此使用者可以靈活定義元件/頁面節點資料來源型別，提供類似GraphQL的模式，在設計器中對返回資料進行靈活處理。

對於資料來源為api格式的地址中使用$(變數名)，會統一從引數閾中渲染替換，然後獲取元件資料來源的資料；同時提供請求前置函式和請求後置函式的執行鉤子，在這裡可以進行資料的拆解或組裝以及寫入一些業務邏輯程式碼。

頁面操作（Action）

頁面操作是低程式碼工程設計裡面的重要一環，承載著很大一部分運維需求場景，sw-frontend將頁面操作抽象為四個大的類別：工程內建操作類，過濾器類，表單提交類，超鏈跳轉類。

• • 工程內建操作類

sw-frontend在元件的工具欄內建了若干通用的按鈕類的操作，根據操作型別map，識別相應操作進行渲染。典型的如“元件重新整理”操作，使用者在介面新增該按鈕，配置唯一識別字段"__refresh__"，即可完成元件重新整理操作的配置，該重新整理Button通過觸發引數閾改變事件，間接完成元件的資料重新整理操作。

• • 超鏈跳轉類

超鏈跳轉類別的操作，常用於表格等元件的行內操作，一般以JSXRender的形式進行配置，渲染為 Button/Link。進行路由跳轉或者超鏈跳轉時，表格行內資料可以作為傳入引數使用。

• • 過濾器類

過濾器本質而言是對傳統開發方式下頁面查詢的一種抽象：元件本身定義有資料來源，過濾器的職能是觸發元件重新獲取資料。在sw-frontend中，過濾器的表現形式可以是一組tab、一組表單項。以表單類過濾器為例：使用者在填充各過濾條件之後，“提交”操作本質並沒有直接的提交地址，而是進行表單引數的投遞--改變節點引數閾，元件通過監聽引數閾關聯欄位的改變，重新拉取資料，完成傳統頁面的查詢操作。

• • 表單提交類

表單操作承載了大部分的頁面操作，sw-frontend將常規的“增”、"刪"、"改"都抽象為表單提交類的事件，對這類Action操作，在完成和服務端互動後，以callback的形式，進行節點引數閾欄位的投遞，以觸發資料渲染類元件的重新整理從而完成“增”、"刪"、"改"類的操作，如下兩圖分別為Action操作定義和執行時渲染介面：

其中在進行資料編輯時的表單資料回填，大多數場景為列表類資料的編輯：定義在行內的“編輯”操作會繫結一個表單Action區塊；在點選事件發生時，會將該行內資料物件rowData與當前節點引數閾合併，作為actionParams傳入該Action表單區塊，表單區塊通過讀取actionParams的對應欄位value作為各表單項的initValue，完成資料回填。

節點引數域

節點引數閾是以Redux狀態管理機制為依託，建立路由節點頁面共享引數物件nodeParams，節點頁面各元件通過對nodeParams的修改和對應欄位偵聽來間接完成元件間的資訊傳遞和事件互動。

sw-frontend在節點頁建立之初，會初始化節點引數域：nodeParams；在節點頁面的生命週期內，也會將url中變數引數，一些頁面互動產生的runtime引數以及外部函式投遞來的引數整合到節點引數域中來。

隨之元件在經過統一資料來源處理器獲取資料流渲染之後，會對節點引數閾的target欄位值通過監聽對比，以觸發資料reload重新整理機制，重新獲取資料來源資料；同時頁面的一些action表單操作，也是通過引數閾投遞更新目標欄位值進行進行間接觸發相應元件的reload重新整理渲染。

元件擴充套件

sw-frontend提供了宣告式內建元件的註冊機制，同時開闢了使用者自定義元件的入口，使用者可以將一些常用的自定義元件嵌入到我們的元件列表，以供前端設計器統一調撥；當前自定義元件以JSXRender的方式進行執行，可以直接書寫JSX程式碼，同時能夠識別antd元件，賦予使用者更加靈活的頁面渲染能力。

願景與規劃

現sw-frontend已內建運維場景常用的基礎元件，圖表元件，landing元件，佈局元件等五十餘個元件，除此之外還開放了使用者自定義簡單JSX元件的入口，讓使用者對自定義元件進行編輯管理，以拓展元件擴充套件和插拔使用的空間。同時動態載入遠端元件，建立運維元件生態市場也納入到了後面的版本規劃中；以期能夠共建打造出一個豐富共享的運維元件生態來，這也是我們將其開源的一個初衷願景。

• 版本動態： 我們會根據工作專案節奏，持續對功能進行完善優化和升級。近期在5月上旬釋出了一個小版本，該版本加入了頁面模板儲存和從模板快速建立的功能，以進一步聚焦"複用"，提升開發效率。

同時也歡迎大家多提issue,協力將SREWorks打造得更好:

SREWorks開源地址：http://github.com/alibaba/SREWorks/tree/main/paas/sw-frontend

釘釘使用者群