低代碼平臺(tái)：領(lǐng)域?qū)Ｓ谜Z(yǔ)言設(shè)計(jì)（低代碼平臺(tái)的實(shí)現(xiàn)方式）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、設(shè)計(jì)思路

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

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

從自主性、完備性、擴(kuò)展性、易用性、ROI5 個(gè)方面，兩種思路對(duì)比如下圖：

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

三、DSL 和 SDK 設(shè)計(jì)

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

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

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

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

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

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

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

3.3 組件規(guī)范

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

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

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

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

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

3.5 示例代碼

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

通過(guò)上面的 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" } } ] }

四、進(jìn)一步思考

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

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

從工程執(zhí)行的角度，低代碼的目標(biāo)是提效，不是把前端工程師的工作量轉(zhuǎn)移給后端工程師、產(chǎn)品經(jīng)理、測(cè)試?yán)蠋煹龋呛驮泄ぷ髡虾蟮奶嵝Ш吞豳|(zhì)——其本質(zhì)是重復(fù)工作的標(biāo)準(zhǔn)化和自動(dòng)化，把前端工程師從生產(chǎn)過(guò)程中下沉于基建和物料庫(kù)建設(shè)來(lái)支撐提效；或把高復(fù)雜度工作降低出錯(cuò)的概率。

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

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

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

來(lái)源:微信公眾號(hào):題拍拍技術(shù)團(tuán)隊(duì)

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