低代碼三部曲之實現(xiàn)（低代碼原理）
最近幾年在軟件開發(fā)領(lǐng)域，低代碼被吹捧的到了天際，好像你沒接觸過低代碼你都不好意思說自己在軟件領(lǐng)域工作，其實，大可不必，這其中很大一部分是資本催生的結(jié)果，也有一部分是新技術(shù)的出現(xiàn)，讓一些玩文字的人創(chuàng)造了一個新名字而已，我應(yīng)該是10幾年前就在這方面開發(fā)，所以很早就想總結(jié)下低代碼，春節(jié)期間沒有回老家，正好梳理下，一共有三篇文章，分別是起因、實現(xiàn)、未來，這篇文章是第二篇，總結(jié)下低代碼的落地、實現(xiàn)。
- 目前低代碼實現(xiàn)方式主要有兩種方式，包括目前市面上能看到的低代碼產(chǎn)品或者平臺也不例外，可以主要分為頁面驅(qū)動、模型驅(qū)動這這兩種方式，各有利弊，下面我們主要圍繞這兩種實現(xiàn)方式來闡述
低代碼實現(xiàn)流程
頁面驅(qū)動
- 功能說明：頁面驅(qū)動就是指使用者直接設(shè)計頁面、表單、規(guī)則，不考慮數(shù)據(jù)模型，用戶根據(jù)提供的UI控件實現(xiàn)布局、表單、頁面、單據(jù)設(shè)計，頁面顯示就是把設(shè)計的時候還原呈現(xiàn)，最后直接供最終使用者使用。
- 使用場景：目前市場上常見的表單設(shè)計器、流程設(shè)計器、規(guī)則設(shè)計器基本都屬于頁面驅(qū)動，這類設(shè)計基本不用考慮數(shù)據(jù)模型，用戶設(shè)計成什么樣就是什么樣，用戶上手非常快，也容易上手，所以目前展示類、快速原型、示意圖、To C類多以這類方式實現(xiàn)，
- 功能實現(xiàn)：頁面驅(qū)動由于只考慮呈現(xiàn)效果，所以實現(xiàn)上也簡單，且主要對前端有要求，實現(xiàn)過程可以使用如下示意圖表示
{ "formConfig": { "label-width": "80px" }, "fields": [{ "isRender": true, "isShow": true, "isAnalysis": true, "children": [], "__layoutConfig__": { "style": "", "props": { "span": 24 }, "attrs": {}, "on": {}, "userDefineProps": {} }, "__formItemConfig__": { "props": { "label": "活動名稱", "rules": [], "required": true }, "prop": "name" }, "__controlConfig__": { "props": {}, "attrs": {}, "userDefineProps": {} }, "tagName": "el-input", "__layout__": "colFormItem", "id": 1593757474090, "model": "name", "name": "單行文框", "tagIcon": "input", "controlPanel": "el-input", "uuid": "el-input-0", "sortNum": 0 }], "formApiValid": []}
- 推薦優(yōu)秀的參考項目：
- form-create-designer
gitee：form-create-designer: 可視化vue表單設(shè)計器組件
github：https://github.com/xaboy/form-create-designer
- k-form-design
gitee：k-form-design: 基于vue Ant-Design 的表單設(shè)計器，快速開發(fā)
github：https://github.com/Kchengz/k-form-design
- vue-form-design
github：https://github.com/337547038/vue-form-design
- 如果您有更好的項目或者產(chǎn)品請留言，我及時更新到推薦到列表
模型驅(qū)動
- 功能說明：模型驅(qū)動是指先把要表示的對象模型及模型關(guān)系規(guī)劃并設(shè)計好，然后根據(jù)模型去設(shè)計頁面、表單、單據(jù)等等，頁面上能呈現(xiàn)的數(shù)據(jù)來源于提前設(shè)計好的數(shù)據(jù)模型，頁面顯示的時候跟頁面驅(qū)動是一樣的，都是根據(jù)表單設(shè)計器設(shè)計去還原頁面，供使用者使用。
- 使用場景：目前這類開發(fā)方式主要用在系統(tǒng)性的平臺或者業(yè)務(wù)系統(tǒng)中，尤其是to B的系統(tǒng)、或者是在已有的系統(tǒng)上做擴(kuò)展功能需求，像OA、EHR、理賠、物流系統(tǒng)等等。
- 功能實現(xiàn)：功能實現(xiàn)其實跟頁面驅(qū)動類似，可以先設(shè)計頁面再跟模型映射，也可以根據(jù)模型映射頁面上的控件，這兩種方式都可以，最終形成的頁面的頁面設(shè)計結(jié)構(gòu)類似
{ "formConfig": { "label-width": "80px" }, "fields": [{ "isRender": true, "isShow": true, "isAnalysis": true, "children": [], "__layoutConfig__": { "props": { "span": 24 }, "attrs": {}, "on": {}, "userDefineProps": {} }, "__formItemConfig__": { "props": { "label": "學(xué)歷", "rules": [] }, "prop": "random50" }, "__controlConfig__": { "props": {}, "attrs": {}, "userDefineProps": { "optionType": "static", "optionCollection": [{ "label": "高中", "value": "1" }, { "label": "?？?#034;, "value": "2" }] } }, "tagName": "LElSelect", "__layout__": "colFormItem", "id": 1594263810269, "model": "random50", "name": "選擇框", "tagIcon": "select", "serviceName": "LElSelect", "controlPanel": "LElSelect", "uuid": "LElSelect-3", "document": "https://element.eleme.cn/#/zh-CN/component/select", "sortNum": 0 }], "formApiValid": []}
- 推薦優(yōu)秀的參考項目：這塊幾乎沒有開源的，不過基本都提供了試用，不管看到的是什么樣，但針對低代碼這塊實現(xiàn)方式相差不會太大，就看哪家沉淀的更久，做的更用心。
- 藍(lán)凌 藍(lán)凌智能OA
- 炎黃盈動 AWS PaaS – 簡化企業(yè)流程應(yīng)用的開發(fā)、運(yùn)行和維護(hù)
- 泛微工作流引擎 泛微OA系統(tǒng)—豐富應(yīng)用滿足不同組織辦公需求
- 如果您有更好的項目或者產(chǎn)品請留言，我及時更新到推薦到列表
總結(jié)
低代碼實現(xiàn)方式主流程就是設(shè)計頁面、流程、規(guī)則等等，然后再還原，供最終使用者使用，真正落地使用到的技術(shù)都相差不大，基本的開發(fā)方式也就是文章中提到的頁面驅(qū)動或者是模型驅(qū)動，但在具體開發(fā)過程中還是需要考慮很多問題的，比如：數(shù)據(jù)怎么保存、權(quán)限怎么設(shè)計、如何跟具體的業(yè)務(wù)系統(tǒng)結(jié)合、數(shù)據(jù)如何再加工等等，這塊如果展開來寫太多了，計劃后面錄成視頻分享出來。
這篇文章先寫到這里，下一篇文章介紹低代碼的未來趨勢。
喜歡的朋友記得給個關(guān)注~
