文：清凌渡 題拍拍前端開發(fā)專家

中后臺應(yīng)用主要用于信息的查詢、展示和修改，并把數(shù)據(jù)變更持久化到數(shù)據(jù)庫中，可以看作傳統(tǒng)數(shù)據(jù)管理平臺的延伸。產(chǎn)品形態(tài)可以被收斂為 UI 模式一致的標(biāo)準(zhǔn)化組件庫，比如 Ant Design、AntV 等通用 UI 庫是中后臺產(chǎn)品前端開發(fā)的事實標(biāo)準(zhǔn)。

在低代碼平臺中，所見即所得的組裝中后臺應(yīng)用，代替純手工的代碼編寫，可以大幅提升開發(fā)的效率和質(zhì)量。

基于業(yè)界優(yōu)秀的前端基礎(chǔ)組件，進行低代碼平臺的開發(fā)，成本和難度基本可控，其關(guān)鍵工作是低代碼平臺底層規(guī)范的設(shè)計，即實現(xiàn)低代碼平臺的領(lǐng)域?qū)Ｓ谜Z言（下面簡稱“DSL”）。

一、應(yīng)用解構(gòu)

如下圖所示，一個中后臺應(yīng)用主要有表單頁、列表頁、詳情頁 3 種頁面形態(tài)，粗粒度總結(jié)如下：

1. 表單頁面主要包含表單組件和選擇組件兩種；
2. 列表組件主要包含過濾組件、表格組件、分頁組件 3 種，其中表格組件可以包含單元格組件。
3. 詳情頁面主要包含列表組件和圖表組件。

在典型的中后臺開發(fā)過程中，前端工程師的工作可以分為應(yīng)用的靜態(tài)組織部分和狀態(tài)的動態(tài)轉(zhuǎn)移部分兩大類。

如上圖所示，中后臺應(yīng)用的組織結(jié)構(gòu)，是一棵典型的樹形結(jié)構(gòu)：

1. 應(yīng)用組織結(jié)構(gòu)由應(yīng)用、頁面、組件 3 層結(jié)構(gòu)組合而成；
2. 應(yīng)用通過 Route Children 組織頁面，并且 route Children 支持遞歸組織多層次路由，頁面支持遞歸組織多層 Layout 布局；
3. 頁面通過 Template 組織組件；
4. 組件管理內(nèi)部狀態(tài)的轉(zhuǎn)移和行為事件的響應(yīng)，比如：
1. API 請求（GET），狀態(tài) JSON 數(shù)據(jù)從服務(wù)端發(fā)送到客戶端，建議通過配置在組件內(nèi)部編碼完成；
2. API 上報（POST），狀態(tài)從客戶端表單數(shù)據(jù)上報到服務(wù)端，客戶端狀態(tài)生成的主要載體是表單組件，建議通過配置在組件內(nèi)部編碼完成。

狀態(tài)轉(zhuǎn)移進一步串聯(lián)應(yīng)用的整體功能，主要滿足頁面的跳轉(zhuǎn)：

1. 參數(shù)傳遞（Params，如上圖中的 Route Query），從列表頁面跳轉(zhuǎn)到詳情頁面。由 Route Params 來實現(xiàn)，即用 RESTful 風(fēng)格，傳遞 ID 等關(guān)鍵參數(shù)，用 RESTful 風(fēng)格的優(yōu)勢如下。

低代碼平臺的領(lǐng)域?qū)Ｓ谜Z言，即要支持完整的應(yīng)用組織和狀態(tài)轉(zhuǎn)移，來完成應(yīng)用的構(gòu)建。整個應(yīng)用的靜態(tài)結(jié)構(gòu)組織通過搭建來進行配置是非常容易的，如何簡潔的完成動態(tài)的狀態(tài)轉(zhuǎn)移是低代碼平臺易用性的關(guān)鍵，建議通過約定來完成：

1. 低代碼編輯器部分僅僅保留配置，不提供編碼支持；
2. 復(fù)雜邏輯完全封裝到組件內(nèi)部，低代碼編輯器僅僅勾選配置配置或填寫靜態(tài)字符串；
3. 組件是低代碼平臺的資產(chǎn)積累，也是前端工程師的專業(yè)領(lǐng)域。

二、設(shè)計思路

釘釘的宜搭、騰訊的云開發(fā)低碼平臺等業(yè)界方案，都是私有協(xié)議。雖然私有協(xié)議的自主性看似更高，但如果初期設(shè)計不周全，后續(xù)的升級會被兼容性嚴(yán)重拖垮。

另一種思路是基于“現(xiàn)成/開源”的領(lǐng)域?qū)Ｓ谜Z言之上，定義一份規(guī)范，即封裝開源協(xié)議。

從自主性、完備性、擴展性、易用性、ROI5 個方面，兩種思路對比如下圖：

本文基于 Vue SFC（單文件組件）、Vue Compiler-Core、Vue-Router 的 Vue 通用全家桶，從中選擇需要的部分類定義進行規(guī)范化，來完成 DSL 的設(shè)計。這個思路最大的優(yōu)勢是：和大家熟悉的 Vue 事實規(guī)范保持了一致，DSL 是一個新庫，也是一個 6 年的成熟項目。同時滿足了基本的向前兼容性要求——當(dāng)未來的對低代碼平臺產(chǎn)生新的需要，只需要選擇另外一部分類定義進行規(guī)范化。

三、DSL 和 SDK 設(shè)計

一個完備的 DSL 定義（語義和語法）需要滿足應(yīng)用組織和狀態(tài)轉(zhuǎn)移的訴求。DSL 核心組件和總體方案如下：

1. 應(yīng)用通過路由把頁面組織在一起，構(gòu)成完整的應(yīng)用，使用 Vue-Router 進行規(guī)范和描述。
2. 頁面由組件組合（兄弟、嵌套兩種形式）而成，頁面中組件的聲明和關(guān)系使用 Vue Compiler-Core 進行規(guī)范和描述；
3. 組件遵循 SFC 規(guī)范。

3.1 應(yīng)用規(guī)范設(shè)計

應(yīng)用規(guī)范如下圖所示，包含元信息和路由結(jié)構(gòu) 2 部分組成。

1. 路由和頁面通過 PageID 外聯(lián)；
2. 頁面通過路由傳遞狀態(tài)（數(shù)據(jù)）——整個應(yīng)用中，可配置狀態(tài)的傳遞僅通過路由完成；
3. 路由的層次雖然跟菜單的層次是兩個相互獨立的信息，為了簡化，可以把路由信息作為菜單信息來使用。

3.2 頁面規(guī)范設(shè)計

頁面規(guī)范如下圖所示，主要包含元信息和頁面結(jié)構(gòu)兩部分，分為布局頁面（比如主導(dǎo)航部分）和落地頁面（詳情部分、列表部分）兩種，布局頁面頁面可以嵌套，落地頁面被包含在布局頁面中。

3.3 組件規(guī)范

組件規(guī)范如下圖所示，需要遵循 Vue 的 SFC 規(guī)范，元信息主要包含組件標(biāo)識、屬性描述、規(guī)范版本 3 部分。

3.4 組件節(jié)點依賴關(guān)系

基于 Vue Compiler-Core，封裝了如下 7 類節(jié)點，其依賴關(guān)系如下：

每個 **NodeDSL 均對應(yīng)一個 **Node 類，前者是 Plain Object、后者是編輯器程序中操作 DSL 的類，這 4 個基本類中均支持下面 4 個方法：

1. 構(gòu)造方法，參數(shù)為部分 DSL 格式的 Plain Object；
2. 更新方法，參數(shù)為部分 DSL 格式的 Plain Object
3. 序列化方法，返回相應(yīng) DSL 格式的 Plain object，用于數(shù)據(jù)庫的存儲；
4. 反序列化方法，參數(shù)是完整 DSL 格式的 Plain Object，將當(dāng)前對象實例進行更新，用于二次編輯。

3.5 示例代碼

3.5.1 應(yīng)用組裝示例

通過上面的 SDK，操作應(yīng)用中 DSL 的代碼如下所示：

import Application, { ApplicationDSL } from './Application';import Route, { RouteDSL } from './Route';import Page, { PageDSL } from './Page';import ElementNode, { ElementNodeDSL } from './ElementNode';const app = new Application({});const page = new Page({});const route = new Route({meta: { pageId: page.meta.uuid, page: page }});app.routeInsertInto(route, undefined);const component = new ElementNode({ tag: 'TheBothLayout', propsScheme: { properties: { menus: { title: '菜單', type: 'array', default: '', } }, }, });page.componentInsertInto(component, undefined);

3.5.2 序列化后的結(jié)構(gòu)示例

{ "meta": { "name": "", "uuid": "1fafcf93-99adb0b18564", "specVersion": "0.1.0" }, "body": [ { "children": [], "meta": { "uuid": "a0eced40-ee12609d586e", "pageId": "0729c617-9f75e32f8fc4", "specVersion": "0.1.0" } } ] }

四、進一步思考

低代碼本質(zhì)上是最佳實踐的模板化使用，如下圖所示，既是閉環(huán)內(nèi)最佳實踐產(chǎn)品化的過程，也是外層產(chǎn)品對內(nèi)層產(chǎn)品規(guī)?；瘡?fù)用和反饋的閉環(huán)：

1. 標(biāo)準(zhǔn)流程是經(jīng)驗的資產(chǎn)化——把前端工程師個體經(jīng)驗總結(jié)、沉淀、統(tǒng)一為“標(biāo)準(zhǔn)件”、“中間件”產(chǎn)品，比如優(yōu)秀的前端庫 Ant Design；
2. 工具系統(tǒng)是標(biāo)準(zhǔn)的資本化——比如在低代碼平臺中可視化的組裝 Ant Design，大幅降低 App 生產(chǎn)的邊際成本；
3. 數(shù)據(jù)智能是工具的自動化——比如 imgcook（https://www.imgcook.com/）由設(shè)計稿智能生成代碼。

從工程執(zhí)行的角度，低代碼的目標(biāo)是提效，不是把前端工程師的工作量轉(zhuǎn)移給后端工程師、產(chǎn)品經(jīng)理、測試?yán)蠋煹?，而是和原有工作整合后的提效和提質(zhì)——其本質(zhì)是重復(fù)工作的標(biāo)準(zhǔn)化和自動化，把前端工程師從生產(chǎn)過程中下沉于基建和物料庫建設(shè)來支撐提效；或把高復(fù)雜度工作降低出錯的概率。

從用戶的視角，低代碼有兩層含義：

1. 更簡單的配置，而不是深奧代碼的可視化編寫：
1. 復(fù)雜的代碼封裝為組件，下沉到物料庫中——這應(yīng)該是專業(yè)前端工程師把自身手藝總結(jié)為界面簡單的標(biāo)準(zhǔn)組件的生產(chǎn)過程，產(chǎn)出的組件在低代碼編輯器中配置化使用；而不是在低代碼編輯器中進行深奧的手藝總結(jié)；
2. 更少量的配置，而不是復(fù)雜代碼的可視化重復(fù)：
1. 重復(fù)的代碼總結(jié)為標(biāo)準(zhǔn)，操作過程自動化——這應(yīng)該是標(biāo)準(zhǔn)組件進一步模板化使用的過程；而不是重復(fù)的工作反復(fù)點擊鼠標(biāo)。

作者:清凌渡 題拍拍前端開發(fā)專家

來源:微信公眾號:題拍拍技術(shù)團隊

出處:https://mp.weixin.qq.com/s/jrTvj_slJWhj-TC2E_xKHQ