低代碼引擎是一種軟件開(kāi)發(fā)平臺(tái)，允許開(kāi)發(fā)者通過(guò)圖形用戶(hù)界面和配置而非傳統(tǒng)的計(jì)算機(jī)編程來(lái)創(chuàng)建應(yīng)用程序。它簡(jiǎn)化了應(yīng)用程序開(kāi)發(fā)過(guò)程，使非技術(shù)背景的人員也能參與其中，提高了開(kāi)發(fā)效率并降低了成本。

一 什么是低代碼？

零代碼、低代碼的概念在整個(gè)全球行業(yè)內(nèi)已經(jīng)流行了很長(zhǎng)一段時(shí)間。通常意義上的低代碼定義會(huì)有三個(gè)關(guān)鍵點(diǎn)：

1. 一個(gè)用于生產(chǎn)軟件的可視化編輯器
2. 中間包含了一些用于組裝的物料，可以通過(guò)編排、組合和配置它們以生成豐富的功能或表現(xiàn)
3. 最后的實(shí)施結(jié)果是成本降低

通常情況下低代碼平臺(tái)會(huì)具備以下的幾個(gè)能力：

• 可視化頁(yè)面搭建，通過(guò)簡(jiǎn)單的拖拽完成應(yīng)用頁(yè)面開(kāi)發(fā)，對(duì)前端技能沒(méi)有要求或不需要特別專(zhuān)業(yè)的了解；
• 可視化模型設(shè)計(jì)，與業(yè)務(wù)相關(guān)的數(shù)據(jù)存儲(chǔ)變得更容易理解，甚至大多數(shù)簡(jiǎn)單場(chǎng)景可以做到表單即模型，模型字段的類(lèi)型更加業(yè)務(wù)化；
• 可視化流程設(shè)計(jì)，不管是業(yè)務(wù)流程還是審批流程，都可以通過(guò)簡(jiǎn)單的點(diǎn)線連接來(lái)進(jìn)行配置；
• 可視化報(bào)表及數(shù)據(jù)分析，BI 數(shù)據(jù)分析能力成為標(biāo)配，隨時(shí)隨地通過(guò)拖拽選擇來(lái)定義自定義分析報(bào)表；
• 可視化服務(wù)與數(shù)據(jù)開(kāi)放、集成，具備與其他系統(tǒng)互聯(lián)互通的配置；
• 權(quán)限、角色設(shè)置標(biāo)準(zhǔn)化和業(yè)務(wù)化，通過(guò)策略規(guī)則配置來(lái)將數(shù)據(jù)、操作的權(quán)限進(jìn)行精細(xì)化管理；
• 無(wú)需關(guān)心服務(wù)器、數(shù)據(jù)庫(kù)等底層運(yùn)維、計(jì)算設(shè)施設(shè)備、網(wǎng)絡(luò)等等復(fù)雜技術(shù)概念，具備安全、性能的統(tǒng)一解決方案，開(kāi)發(fā)者只需要專(zhuān)注于業(yè)務(wù)本身；

軟件開(kāi)發(fā)演進(jìn)階段可總結(jié)為如下圖所示：

相較于傳統(tǒng)的純代碼模式，低代碼有如下優(yōu)勢(shì)：

二 低代碼產(chǎn)品發(fā)展及現(xiàn)狀

低代碼概念于2014年由Forrester首次正式提出，低代碼產(chǎn)品由此開(kāi)始了蓬勃發(fā)展。阿里在2016年宜達(dá)項(xiàng)目立項(xiàng)，隨后發(fā)布云釘一體戰(zhàn)略，之后宜達(dá)低代碼平臺(tái)對(duì)外發(fā)布。

低代碼產(chǎn)品國(guó)內(nèi)外廠商大體如下：

在國(guó)內(nèi)，行業(yè)競(jìng)爭(zhēng)趨勢(shì)逐漸明朗，以BAT為代表的大廠都推出了各自的低代碼產(chǎn)品：

三 什么是低代碼引擎？

低代碼引擎是一款為低代碼平臺(tái)開(kāi)發(fā)者提供的，具備強(qiáng)大定制擴(kuò)展能力的低代碼設(shè)計(jì)器研發(fā)框架。

下面簡(jiǎn)單描述定義中的子部分：

低代碼設(shè)計(jì)器 現(xiàn)如今低代碼平臺(tái)越來(lái)越多，而每一個(gè)低代碼平臺(tái)中都會(huì)有的一個(gè)能力就是搭建和配置頁(yè)面、模塊的頁(yè)面，這個(gè)頁(yè)面我們稱(chēng)為設(shè)計(jì)器。例如，下圖是中后臺(tái)低代碼平臺(tái)的設(shè)計(jì)器。

設(shè)計(jì)器承載著低代碼平臺(tái)的核心功能，包括入料、編排、組件配置、畫(huà)布渲染等等。由于其功能多，打磨精細(xì)難，也是低代碼平臺(tái)建設(shè)最耗時(shí)的地方。

定制擴(kuò)展能力

什么是擴(kuò)展能力呢，一方面我們可以快速擁有一份標(biāo)準(zhǔn)的低代碼設(shè)計(jì)器，另外一方面如果有業(yè)務(wù)獨(dú)特的功能需要，我們可以不用看它的源碼、不用關(guān)心其實(shí)現(xiàn)，可以使用 API、插件等方式快速完成能力的開(kāi)發(fā)。 而低代碼引擎對(duì)于設(shè)計(jì)器的擴(kuò)展能力支持基本上覆蓋了低代碼設(shè)計(jì)器的所有功能點(diǎn)。下圖是針對(duì)標(biāo)準(zhǔn)的設(shè)計(jì)器提供了擴(kuò)展功能的區(qū)域。

低代碼設(shè)計(jì)器研發(fā)框架

低代碼引擎的核心是設(shè)計(jì)器，通過(guò)擴(kuò)展、周邊生態(tài)等可以產(chǎn)出各式各樣的設(shè)計(jì)器。它不是一套可以適合所有人的低代碼平臺(tái)，而是幫助低代碼平臺(tái)的開(kāi)發(fā)者，快速生產(chǎn)低代碼平臺(tái)的工具。

四 低代碼解決方案選型

幫助用戶(hù)根據(jù)個(gè)人或企業(yè)需求選擇合適的低代碼產(chǎn)品。

五 阿里低代碼架構(gòu)概述

5.1 分層架構(gòu)描述

我們?cè)O(shè)計(jì)了這樣一套分層架構(gòu)，自下而上分別是協(xié)議 – 引擎 – 生態(tài) – 平臺(tái)。

• 底層協(xié)議棧定義的是標(biāo)準(zhǔn)，標(biāo)準(zhǔn)的統(tǒng)一讓上層產(chǎn)物的互通成為可能。
• 引擎是對(duì)協(xié)議的實(shí)現(xiàn)，同時(shí)通過(guò)能力的輸出，向上支撐生態(tài)開(kāi)放體系，提供各種生態(tài)擴(kuò)展能力。
• 生態(tài)就好理解了，是基于引擎核心能力上擴(kuò)展出來(lái)的，比如物料、設(shè)置器、插件等，還有工具鏈支撐開(kāi)發(fā)體系。
• 最后，各個(gè)平臺(tái)基于引擎內(nèi)核以及生態(tài)中的產(chǎn)品組合、銜接形成滿(mǎn)足其需求的低代碼平臺(tái)。

每一層都明確自身的定位，各司其職，協(xié)議不會(huì)去思考引擎如何實(shí)現(xiàn)，引擎也不會(huì)實(shí)現(xiàn)具體上層平臺(tái)功能，上層平臺(tái)的定制化均通過(guò)插件來(lái)實(shí)現(xiàn)，這些理念將會(huì)貫穿我們體系設(shè)計(jì)、實(shí)現(xiàn)的過(guò)程。

5.2 引擎內(nèi)核簡(jiǎn)述

低代碼引擎分為 4 大模塊，入料 – 編排 – 渲染 – 出碼：

• 入料模塊就是將外部的物料，比如海量的 npm 組件，按照《低代碼引擎物料協(xié)議規(guī)范》進(jìn)行描述。將描述后的數(shù)據(jù)通過(guò)引擎 API 注冊(cè)后，在編輯器中使用。注意，這里僅是增加描述，而非重寫(xiě)一套，這樣我們能最大程度復(fù)用 ProCode 體系已沉淀的組件。
• 編排，本質(zhì)上來(lái)講，就是不斷在生成符合《低代碼引擎搭建協(xié)議規(guī)范》的頁(yè)面描述，將編輯器中的所有物料，進(jìn)行布局設(shè)置、組件 CRUD 操作、以及 JS / CSS 編寫(xiě)/ 邏輯編排 等，最終轉(zhuǎn)換成頁(yè)面描述，技術(shù)細(xì)節(jié)后文會(huì)展開(kāi)。
• 渲染，顧名思義，就是將編排生成的頁(yè)面描述結(jié)構(gòu)渲染成視圖的過(guò)程，視圖是面向用戶(hù)的，所以必須處理好內(nèi)部數(shù)據(jù)流、生命周期、事件綁定、國(guó)際化等。
• 出碼，就是將編排過(guò)程產(chǎn)生的符合《低代碼引擎搭建協(xié)議規(guī)范》的頁(yè)面描述轉(zhuǎn)換成另一種 DSL 或 編程語(yǔ)言代碼的過(guò)程。

5.3 引擎生態(tài)簡(jiǎn)述

引擎生態(tài)主要分為 3 部分，物料、設(shè)置器和插件。

5.3.1 物料生態(tài)

物料是低代碼平臺(tái)的生產(chǎn)資料，沒(méi)有物料低代碼平臺(tái)則變成了無(wú)源之水無(wú)本之木。低代碼平臺(tái)的物料即低代碼組件。因此低代碼物料生態(tài)指的是：

1. 低代碼物料生產(chǎn)能力和規(guī)范。
2. 對(duì)低代碼物料進(jìn)行統(tǒng)一管理的物料中心。
3. 基于 Fusion Next 的低代碼基礎(chǔ)組件庫(kù)。

5.3.2 設(shè)置器生態(tài)

對(duì)于已接入物料的屬性配置，需要不同的設(shè)置器。

比如配置數(shù)值類(lèi)型的 age，需要一個(gè)數(shù)值設(shè)置器，配置對(duì)象類(lèi)型的 hobby，需要一個(gè)對(duì)象設(shè)置器，依次類(lèi)推。

每個(gè)設(shè)置器本質(zhì)上都是一個(gè) React 組件，接受由引擎?zhèn)魅氲膮?shù)，比如 value 和 onChange，value 是初始傳入的值，onChange 是在設(shè)置器的值變化時(shí)的回傳函數(shù)，將值寫(xiě)回到引擎中。

// 一個(gè)最簡(jiǎn)單的文本設(shè)置器示例class TextSetter extends Component { render() { const { value, onChange } = this.props; return <input value={value} onChange={(e) => onChange(e.target.value)} />; }}

大多數(shù)組件所使用的設(shè)置器都是一致或相似的。如同建設(shè)低代碼基礎(chǔ)組件庫(kù)一樣，設(shè)置器生態(tài)是一組基礎(chǔ)的設(shè)置器，供大多數(shù)組件配置場(chǎng)景使用。

同時(shí)提供了設(shè)置器的定制功能。

5.3.3 插件生態(tài)

低代碼引擎本身只包含了最小的內(nèi)核，而我們所能看到的設(shè)計(jì)器上的按鈕、面板等都是插件提供的。插件是組成設(shè)計(jì)器的必要部分。

因此我們提供了一套官方的插件生態(tài)，提供最基礎(chǔ)的設(shè)計(jì)器功能。幫助用戶(hù)通過(guò)使用插件，快速完成自己的設(shè)計(jì)器。

六 參考資料

1. github源碼：https://github.com/alibaba/lowcode-engine
2. 低代碼引擎：https://lowcode-engine.cn/site/docs/guide/quickStart/intro
3. 低代碼引擎技術(shù)白皮書(shū)：https://developer.aliyun.com/ebook/7507/38517?spm=a2c6h.26392459.ebook-detail.4.5ade49991qgJZQ