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

釘釘用户羣