點擊上方?前端瓶子君，關(guān)注公眾號

回復(fù)算法，加入前端編程面試算法每日一題群

目前，我們打造了一個通用性，而非業(yè)務(wù)指向性，但是又非常適合EHR的【飛輪】低代碼平臺，并已順利服務(wù)于線上環(huán)境。借此上線的時機，在這跟大家簡單分享下【飛輪】低代碼的核心設(shè)計理念以及未來的一些規(guī)劃。

背景

為了取代網(wǎng)易目前所使用的第三方廠家生產(chǎn)的EHR系統(tǒng)，讓網(wǎng)易成為為數(shù)不多擁有自研EHR系統(tǒng)的互聯(lián)網(wǎng)大廠，我們于2020年4月份正式啟動飛輪EHR系統(tǒng)的研發(fā)。飛輪系統(tǒng)從立項之初就確立了低代碼模式的開發(fā)路線，之所以采取低代碼的開發(fā)模式一是為了解決傳統(tǒng)開發(fā)方式面臨開發(fā)人員不足、流程復(fù)雜、開發(fā)效率低、開發(fā)周期長等問題，二是為了支撐未來的快速定義字段，增加功能，尤其是針對報表和功能配置層面的快速擴展，避免任何改動都需要改動代碼的問題。

具體訴求有以下幾點：

需求	需求描述	分析
業(yè)務(wù)功能	數(shù)據(jù)的增刪改查；數(shù)據(jù)加工運算；工作的協(xié)同	大部分界面可趨同為表單/表格的處理模式，差異在于字段或者部分業(yè)務(wù)邏輯不一致；協(xié)同部分在于流程節(jié)點不同；
功能擴展性	字段擴展；業(yè)務(wù)邏輯擴展；報表擴展	能通過系統(tǒng)增加字段擴充系統(tǒng)功能，可靈活篩選字段擴展報表需求；
敏捷性	在保證質(zhì)量前提下快速交付	減少前后端的溝通；減少產(chǎn)品與開發(fā)的溝通；減少編碼環(huán)節(jié)的重復(fù)造輪子；
穩(wěn)定性	架構(gòu)不合理，代碼不規(guī)范造成的bug	架構(gòu)能公用的要抽象公用；能積累的就積累；代碼要符合規(guī)范；業(yè)務(wù)邏輯要可視化；
可維護性	降低修復(fù)的難度	結(jié)構(gòu)抽象；代碼一致性；增加可維護性；

基于上訴要求，我們研發(fā)了飛輪低代碼平臺，飛輪效應(yīng)指為了使靜止的飛輪轉(zhuǎn)動起來，一開始你必須使很大的力氣，一圈一圈反復(fù)地推，每轉(zhuǎn)一圈都很費力，但是每一圈的努力都不會白費，飛輪會轉(zhuǎn)動得越來越快。這里我們用來寓意雖然飛輪低代碼研發(fā)難度大，但是只要研發(fā)成功了就能為EHR系統(tǒng)功能的搭建以及快速迭代提供源源不斷的動力。

飛輪EHR系統(tǒng)以于2021年11月1日正式上線，產(chǎn)品和業(yè)務(wù)借助飛輪低代碼平臺在飛輪EHR系統(tǒng)中交出了“4大模塊、38個頁面、193個實體、143個邏輯”的答卷，通過飛輪低代碼來搭建完成的UI數(shù)量占整個飛輪EHR系統(tǒng)的80%。

接下來給大家介紹下飛輪低代碼的核心設(shè)計理念以及飛輪低代碼所提供的能力。

架構(gòu)

在介紹飛輪低代碼架構(gòu)之前，想先簡單談?wù)劦痛a所使用的兩種設(shè)計理念：模型驅(qū)動和UI驅(qū)動。

• 模型驅(qū)動

模型驅(qū)動簡單理解就是先設(shè)計數(shù)據(jù)模型，然后根據(jù)數(shù)據(jù)模型來構(gòu)建用戶界面。這種低代碼的設(shè)計理念是為了解決全產(chǎn)品的研發(fā)效能問題，也就是將前后端捆綁在一套低代碼體系內(nèi)工作，共同輸出低代碼能力。所以這種設(shè)計理念的產(chǎn)品大多數(shù)都是用來快速完成產(chǎn)品的整體交付。

• UI驅(qū)動

UI驅(qū)動簡單理解就是先設(shè)計用戶界面，然后根據(jù)界面來設(shè)計數(shù)據(jù)模型，最后與UI層進行綁定關(guān)聯(lián)。這種低代碼的設(shè)計理念側(cè)重點是為了解決前端研發(fā)效能問題，對于后端能力實現(xiàn)的方式并不關(guān)心。所以這種設(shè)計理念的產(chǎn)品大多數(shù)都是用來快速創(chuàng)建用戶界面的工具。

相比較UI驅(qū)動，模型驅(qū)動的優(yōu)勢如下：

1. 表結(jié)構(gòu)比較清晰，可以提供用戶更方便快捷的配置能力；
2. 可以更好的與權(quán)限機制相融合；
3. 基于模型的API層，使用少量編碼即可基于模型實現(xiàn)更多復(fù)雜邏輯。

EHR系統(tǒng)是一個重業(yè)務(wù)的系統(tǒng)，只有從底層業(yè)務(wù)上解決研發(fā)效能的問題，才能真正解決整個系統(tǒng)的研發(fā)效能問題。所以飛輪低代碼核心能力采取了模型驅(qū)動的設(shè)計理念。

飛輪前端低代碼架構(gòu).png

飛輪低代碼架構(gòu)可以這么理解：

• 交互層-低碼平臺端：供管理員使用的低碼平臺端，核心是【數(shù)據(jù)建?！亢汀究梢暬庉嬈鳌浚瑪?shù)據(jù)建模把真實的數(shù)據(jù)表抽象為業(yè)務(wù)實體模型，可視化編輯器在業(yè)務(wù)實體模型的基礎(chǔ)上進行UI編排。
• 交互層-用戶管理端：供管理員使用的用戶管理端，除了用戶角色的一些基本配置，最主要的是用來給不同的用戶角色配置差異性的低代碼業(yè)務(wù)。
• 中間層-通用協(xié)議：通用協(xié)議包括數(shù)據(jù)建模產(chǎn)出的組件描述協(xié)議，可視化編輯器產(chǎn)出的頁面描述協(xié)議和字段邏輯協(xié)議。
• 數(shù)據(jù)層：根據(jù)上層傳來的通用協(xié)議，后端生成對應(yīng)的UI配置信息，并根據(jù)權(quán)限信息從數(shù)據(jù)庫中取得相應(yīng)入庫的業(yè)務(wù)信息，最后一并返回給前端進行渲染。
• 中間層-渲染器：渲染器我們提供了兩種不同的渲染模式：【標(biāo)準(zhǔn)模型驅(qū)動】和【自定義模型+UI驅(qū)動】，系統(tǒng)中大部分業(yè)務(wù)UI都采用了【標(biāo)準(zhǔn)模型驅(qū)動】渲染，【自定義模型+UI驅(qū)動】在【標(biāo)準(zhǔn)模型驅(qū)動】的基礎(chǔ)上又增加了UI編排的能力，解決了復(fù)雜業(yè)務(wù)UI渲染的問題。
• 交互層-用戶端：渲染器渲染出的UI在用戶端所呈現(xiàn)的形態(tài)不局限于頁面，還有彈窗、抽屜等一系列可以反饋用戶的容器。
• 前端采用的技術(shù)棧是vue，組件庫使用的是element-ui，并在element-ui的基礎(chǔ)上二次封裝形成了貼合業(yè)務(wù)的ease-element組件庫，同時針對訓(xùn)練過的業(yè)務(wù)場景逐步形成了materials業(yè)務(wù)物料庫。

核心配置

飛輪低代碼定位于面向非開發(fā)人員（業(yè)務(wù)/運維/產(chǎn)品）的產(chǎn)品，所以整體的架構(gòu)以配置化為主，不提供平臺編碼業(yè)務(wù)的能力。核心的配置如下圖所示：

核心配置 (1).png

• 實體字段

在低代碼平臺創(chuàng)建實體及實體字段是數(shù)據(jù)建模的過程，實體是數(shù)據(jù)來源，每個實體都需要映射一張真實的數(shù)據(jù)源表，每個實體字段則可以選擇是否映射一個數(shù)據(jù)庫字段名。

在實體下創(chuàng)建的實體字段可以動態(tài)的進行添加和刪除，同時可以配置實體字段是否虛擬字段、數(shù)據(jù)庫字段名、數(shù)據(jù)類型、控件類型等屬性來滿足業(yè)務(wù)的需求。

• 信息集

信息集是飛輪低代碼提出的一個概念，它是實體字段的集合，也是UI展示字段的集合。信息集的作用是給前端提供渲染、修改數(shù)據(jù)的能力，其表現(xiàn)形式多為表單和表格，下圖演示了用戶在飛輪低代碼平臺對表單修改和表格查詢的一個流程：

信息集 (1).png

比如，在查詢一個表格信息集的時候經(jīng)歷了以下幾個過程：

1. 根據(jù)信息集編碼拿到信息集中的實體字段；
2. 根據(jù)實體字段獲取它們對應(yīng)的實體；
3. 把實體對應(yīng)的數(shù)據(jù)庫表名和實體字段對應(yīng)的數(shù)據(jù)庫字段名進行一個SQL拼接去查詢業(yè)務(wù)表；
4. 最后將查詢到的數(shù)據(jù)進行組合返回給用戶端，前端通過返回的數(shù)據(jù)，結(jié)合信息集配置渲染成不同的模塊。

• 功能

功能是信息集的集合，是渲染UI的最終數(shù)據(jù)。每個功能都需要掛靠在對應(yīng)的菜單下才能生效，確定功能類型、布局版式等屬性，最終可以以頁面、彈窗、抽屜等多種呈現(xiàn)載體來渲染出UI。

簡單概括三者的關(guān)系就是，實體字段組成信息集，信息集組成功能，功能直出UI。這么描述有點抽象... 那換一種說法，點、線、面，描述的就是三者的關(guān)系，點（實體字段）構(gòu)成線（信息集），線構(gòu)成面（功能）。如下簡圖：

核心配置簡圖 (1).png

可視化編輯器

如何從實體、信息集、功能到UI，我們提供了可視化搭建的方式，將三者串連起來。由于搭建平臺面向的用戶是非開發(fā)人員，不涉及代碼的編寫，搭建平臺集成了可供UI運轉(zhuǎn)的所有配置，使用者只需要簡單掌握實體、信息集、功能等相關(guān)概念，通過簡單幾個操作就能快速搭建頁面。此外，當(dāng)模型驅(qū)動滿足不了業(yè)務(wù)需求時，可切換到自定義頁面模式，通過拖拽的方式進行自定義頁面搭建。下面是我們可視化編輯器目前的能力簡圖：

可視化編輯器.png

【標(biāo)準(zhǔn)模型驅(qū)動】編輯器：

image.png

【自定義模型+UI驅(qū)動】編輯器：

image.png

演示

接下來通過一個視頻來演示下我們的飛輪低代碼從建模到頁面的過程。

視頻[1]

未來規(guī)劃

雖然飛輪低代碼平臺已經(jīng)在EHR領(lǐng)域得到了成功實踐，但是在打造一個通用的低代碼平臺還有很長的路要走。目前我們正在持續(xù)優(yōu)化【自定義模型+UI驅(qū)動】視圖渲染，來豐富更多的業(yè)務(wù)場景，接下來我們還需要：

• 建立布局以及樣式體系
• 提供邏輯編排的能力
• 搭建物料平臺
• 開發(fā)流程引擎
• 提供獨立部署能力
• ...

參考資料

[1]

https://crazynote.v.netease.com/2021/1124/0d7c508c69b9a0fbb45dbaa215346e25.mp4: https://link.juejin.cn?target=https%3A%2F%2Fcrazynote.v.netease.com%2F2021%2F1124%2F0d7c508c69b9a0fbb45dbaa215346e25.mp4

來源：PandlyShen

https://juejin.cn/post/7036168443938209806

最后

歡迎關(guān)注【前端瓶子君】??ヽ(°▽°)ノ?
回復(fù)「算法」，加入前端編程源碼算法群，每日一道面試題（工作日），第二天瓶子君都會很認真的解答喲！
回復(fù)「交流」，吹吹水、聊聊技術(shù)、吐吐槽！回復(fù)「閱讀」，每日刷刷高質(zhì)量好文！如果這篇文章對你有幫助，「在看」是最大的支持?》》面試官也在看的算法資料《《
“在看和轉(zhuǎn)發(fā)”就是最大的支持