低代碼開發平臺核心功能設計——元件自定義交互實現
前言
筆者最近一直在研究Lowcode（低代碼）平臺， 也做了非常多的實踐， 對於頁面可視化搭建平臺有了基本的研發方向和解決方案， 後期會陸續分享我對低代碼平臺的一些理解和解決方案， 並在企業應用層做一些探索.
正文
1. 什麼是低代碼以及低代碼的意義
最近筆者在outsystems網站上看了一篇比較好的闡述低代碼平臺的文章， 這裏筆者特意做一個簡單的定義：
低代碼 是一系列工具，可幫助我們使用拖放介面直觀地創建完整的應用程式。 低代碼平臺無需編寫數千行複雜的代碼和語法，而是使用戶能夠快速，直觀地構建具有現代使用者介面，集成，數據和邏輯的完整應用程式。
低代碼 是一種軟體開發方法，可以更快地以最少的手工編碼交付應用程式。 通過在圖形介面中使用可視化建模來組裝和配置應用程式，開發人員可以跳過所有基礎架構，並重新實現以往很難解決的場景，讓開發人員聚焦於自身業務獨特的打造。
打個比方，想像一下你開的一家口罩製造廠：涉及自動化的機器並不能決定口罩的外觀，但它們確實會加快口罩的組裝和交付過程。 這就是低代碼的作用。
低代碼對軟體來說就像裝配線對口罩製造廠一樣：都使困難且耗時的手動任務自動化，從而使人們騰出更多的時間去做更重要的事情。
我們市面上比較常見的低代碼開發平臺有：
- 可視化IDE：一種用於可視化定義應用程式的UI，工作流和數據模型，並在必要時添加手寫代碼的環境。
- 與各種後端或服務的連接器：自動處理數據結構，存儲和檢索。
- 應用程式生命週期管理員：用於在測試，登臺和生產中構建，調試，部署和維護應用程式的自動化工具。
比較先進的系統（例如OutSystems）為我們提供了創建現代，跨平臺的企業移動和Web應用程式所需的一切，並具有補充現有團隊結構的功能。 如下圖流程所示：
2. 低代碼開發流程
我們傳統的軟體開發過程往往都會經過如下所示流程：
也就是從基本的需求設計， 產品規劃到前後端應用開發， 最後到測試， 部署上線.
使用低代碼， 他的開發流程看起來像：
每一個步驟都能通過非常簡單的拖拽去實現， 大大降低的開發成本， 使得開發人員和產品工作者能更專注的聚焦於核心業務的打磨和快速試錯， 更為敏捷開發提供了有力支撐.
3. 如何實現低代碼體系下的內外部系統交互
在介紹完低代碼平臺之後， 我們開始聚焦於實際業務場景， 來實現低代碼開發平臺中遇到的核心問題以及解決方案. 這裏筆者拿H5-Dooring來舉個例子， 先看看dooring的操作介面：
我們在使用可視化平臺時除了需要滿足對展示型頁面的設計需求外， 我們更多的是要和企業自身業務打通，比如如何實現跨系統間的交互， 如何實現基本元素的交互能力， 如何植入外部API使得數據流向企業內部等. 這些需求對應的實際場景如下：
- 網頁嵌入App內部需要和app端通信， 而不是單純的展示
- 網頁需要對使用者的操作實現基本的交互能力， 比如跳轉連結， 打開彈窗等
- 企業配置好的表單， 對外收集數據時希望流入自己內部系統做數據收集和分析
筆者將針對以上場景， 在H5-dooring中給出相應的解決方案.
3.1 網頁嵌入App內部和app端通信實現
要實現和外部容器通信，必須具備的就是自定義編碼能力， 也就是筆者採用LowCode而不是noCode的原因， 具體實現方式有很多， 比如採用比較流行的代碼編輯外掛程式react-codemirror2或者 react-monaco-editor. 其次要解決的就是哪些元件需要具備這種交互能力， 這裡很明顯是我們的Button元件. 效果如下：
這樣我們就能實現真正的代碼自治和跨容器通信了. 至於react-codemirror2的使用方式，筆者簡單寫個demo供大家參考：
import {Controlled as CodeMirror} from 'react-codemirror2';
require('codemirror/mode/javascript/javascript');
<CodeMirror
value={this.state.value}
options={options}
onBeforeChange={(editor, data, value) => {
this.setState({value});
}}
onChange={(editor, data, value) => {
}}
/>
當然其內部支援更多的語言擴展， 感興趣的可以研究一下， 筆者也基於它實現了一個簡單的代碼編輯器， 可以研究一下.
3.2 頁面元素對使用者的操作實現基本的交互能力， 比如跳轉連結， 打開彈窗等
基本上任何可視化搭建平臺都會提供一定程度上的交互能力， 這些交互往往和交互元件所綁定， 比如按鈕， 連結， 這裡筆者給搭大家展示在Button（按鈕）元件中的應用：
以上為3中常見的互動模式， 即：
- 跳轉連結
- 打開彈窗， 並自定義彈窗內容
- 自定義交互能力
因為第三種方式筆者已經在上面介紹了， 這裏重點介紹彈窗交互. 一般的彈窗交互可能會支援的彈窗內容如下：
- 圖片
- 文字提示
- 圖文提示
- 表格
還有很多形式， 如果我們的實現中要一次實現這些元件， 那將是非常大的工作量， 所以筆者這裏設計了一種一勞永逸的方式——富文本編輯器. 筆者提供富文本編輯器來實現使用者定義任何內容形態的能力， 如下圖所示：
在手機端的效果如下：
要實現該交互需要定義交互的json-schema， 這裏筆者在之前的文章中也解剖過H5-dooring的具體實現， 這裡不一一介紹了， 我們主要來看看富文本編輯器， 這裡筆者推薦兩款：
- react-quill
- braft-editor
3.3 企業配置好的表單， 對外收集數據時希望流入自己內部系統做數據收集和分析
對於交互型應用來說， 資料追蹤和分析能力是比較重要的一環， 目前也有很多表單問卷工具， 同樣H5-Dooring也提供了表單問卷一體化解決方案， 使用者可以在平臺內搭建自定義的問卷並進行數據收集， 分析. 對於有私域需求的用戶來說， 他們希望表單的數據流向自己內部系統， 自己進行分析， 所以我們理論上也應該提供這種開發介面供使用者使用， 在表單設計中， 筆者暴露了api介面來實現這一需求：
如果使用者提供了api介面， 頁面會自動提交到api指定的位址， 筆者對該介面做了跨域處理， 使用者只需要提供對應的跨域介面即可. 代碼實現如下：
if (api) {
fetch(api, {
body: JSON.stringify(formData),
cache: 'no-cache',
headers: {
'content-type': 'application/json',
},
method: 'POST',
mode: 'cors',
});
}else {
req.post(xxx/xxx, formData)
}所以， 今天你又博學了嗎？
最後
以上教程筆者已經集成到H5-Dooring中，對於一些更複雜的交互功能，通過合理的設計也是可以實現的，大家可以自行探索研究。
github 位址：H5 編輯器H5-Dooring
開源投票入口：為H5-Dooring投票
如果想學習更多H5遊戲， webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰，歡迎在《趣談前端》一起學習討論，共同探索前端的邊界。