詳解ZStack Cloud v4.0：前端架構探秘之低代碼開發(fā)

　　日前，ZStack Cloud v4.0發(fā)布，相信大家看了都有一種煥然一新的感覺，本輪發(fā)布最大的變化是 UI 端進行了完全的重寫，技術棧由原來的 Vue 體系升級到 React，其中采用了一些全新的技術，如 UMI、GraphQL、微前端、低代碼開發(fā)等，接下來，我們一起來探秘ZStack Cloud v4.0 漂亮 UI 的技術原理，本文將為您解讀：低代碼開發(fā)。

　　一、為何要引入低代碼開發(fā)？

　　在新版 UI 中，所有列表頁、權限控制、主題外觀、界面文字都不是由前端開發(fā)人員手動編寫的，而是借助低代碼開發(fā)平臺根據響應的配置自動生成。低代碼開發(fā)是最近非�；鸬母拍�，本質上非編程人員利用工具按照自己的想法生成可運行代碼。在本文中，非編程人員特指 ZStack 的產品、設計、文檔、測試等角色，當然低代碼開發(fā)也可以服務于開發(fā)人員，標準化輸出代碼，降低編程中的低級 bug，提升產品質量和開發(fā)效率。

　　隨著項目的進展，越來越多的非編程問題暴露出來，設計師提供給開發(fā)人員的雖然在樣式上是高保真，但其中的邏輯細節(jié)并沒有暴露出來。以云主機為例，云主機在不同 License 下顯示的字段、操作、創(chuàng)建時涉及的約束條件、云主機列表需要支持搜索和排序的字段、中英文版本、不同主題色版本等等，設計稿是靜態(tài)的，而最終實現的系統(tǒng)是動態(tài)的，這中間會有很大的 gap。在傳統(tǒng)的開發(fā)模式中，彌補這些 gap，完全依賴于開發(fā)人員的想象以及手頭有限的素材，而在全新的低代碼開發(fā)模式中，產品、設計、文檔、測試也可以利用各種工具介入開發(fā)工作，將自己的想法直接落地，而無需告知開發(fā)。

　　二、ZStack如何引入低代碼開發(fā)？

　　目前在前端低代碼開發(fā)領域，走在前沿的當屬阿里淘系團隊的 imgcook，imgcook 利用開源的深度學習框架 TensorFlow 針對設計稿進行像素級分析，結合系統(tǒng)代碼庫生成 DSL，最后經過程序員修正后生成可運行的代碼。筆者曾和 imgcook 團隊溝通過，詢問是否能生成復雜的企業(yè)級管理系統(tǒng)代碼，得到的答復是因為類似云計算這種帶有復雜業(yè)務邏輯的，因為有大量的約束條件，無法通過設計稿來直接生成代碼，目前 imgcook 主要應用于 C 端領域。既然高大上的 AI 行不通，那我們只能另辟蹊徑，采取更加簡單有效的方式服務各個團隊。

　　首先需要定義哪些是非邏輯功能，類似自定義列、操作項、權限、界面文字、主題外觀這些帶有配置屬性的都可歸類為非邏輯功能。非邏輯功能具有編寫容易但配置復雜兩大特征，每個配置項在程序中都代表了一個邏輯分支，一旦寫錯，就會導致整個界面的展示不符合預期。

　　我們選取了在 3.x 開發(fā)時期耗費巨大精力開發(fā)和測試的權限體系來作為低代碼開發(fā)的突破口。3.x 的權限實現，是由開發(fā)人員在代碼中添加大量 if-else 判斷來實現的，比如在社區(qū)版隱藏某個按鈕，就在這個按鈕上加一行 if-else 判斷，隨著分發(fā)的版本及賬戶體系愈來愈復雜，判斷邏輯也越寫越多，最終導致 bug 頻出，以致無法維護。

　　這種濫用 if-else 的做法顯然是不可取的，優(yōu)雅的解決方式應該是類似防火墻的實現，被攔截對象和攔截策略解耦，UI 中的被攔截對象是頁面中一切可見元素，包含菜單、按鈕、表格列、字段等，而攔截策略又分為 OEM、License、角色等，高等級安全系統(tǒng)擁有多層防火墻，而 ZStack UI 的界面元素也可以根據當前生效的策略進行多層交叉控制。

　　三、 ZStack-Assist配置系統(tǒng)揭秘

　　基本原理清楚了，接下來就需要解決如何配置的問題。在研發(fā)體系中，最明晰用戶需求的是產品經理，而最清楚產品使用邏輯的是測試人員。一套權限配置下來是否能夠工作，不會阻斷正常的工作流，需要產品和測試共同協(xié)作，這里面開發(fā)人員不參與任何配置工作，只是提供合適的工具將產品和測試的工作固化下來，這套配置系統(tǒng)稱為 ZStack-Assist。具體實現上分為數據采集、可視化配置系統(tǒng)、代碼生成引擎、Debug 模式四大塊。

　　在 ZStack-UI 正式發(fā)布版本中，總共有 1800 多個受控的頁面元素，疊加5種 license 和11個系統(tǒng)角色，總共最多會有接近 10 萬個配置項，如果算上 OEM 定制版，數量只會更多。如果沒有低代碼開發(fā)平臺，前端的工作量將是非常恐怖的，系統(tǒng)也處于不可測試的境地。為了方便產品和測試人員進行配置，我們創(chuàng)造性的在 UI 中引入了 Debug 模式，當開啟時，UI 中所有的受控元素都會進行標注，鼠標懸浮上去就可以跳轉到配置系統(tǒng)進行配置，如下圖所示：

　　所見即所得的配置方式可以讓測試人員一邊測試，一邊修正配置集合，在傳統(tǒng)的開發(fā)模式，測試需要等待開發(fā)修正完，重新打包才能看到修正后的效果，通過配置系統(tǒng)解耦后，大大提升了整體的開發(fā)效率。

　　綜上所述，低代碼開發(fā)對于 ZStack-UI 絕不是錦上添花，而是伴隨著項目進展產生的必然需求。另一個典型需求是列表的自定義，我們 UI 中八成以上的界面都是列表，以及針對列表的相關操作，如下圖所示：

　　我們雖然封裝了完善的列表組件，可以讓開發(fā)人員以對象形式定義列表顯示的字段，但在實際開發(fā)中，由于每個人理解不同，類似列寬、字段順序、過濾、排序定義的千差萬別，不僅造成界面展示的不美觀，還會造成功能上的缺失，列表的數據拉取需要編程獲得，但列表的具體展示形式則由產品、設計共同維護。

　　如果以傳統(tǒng)的方式解決這個問題，需要借助腦圖梳理信息，梳理后需要多方確認，最終再由開發(fā)人員進行編碼。如果中途變更，還需要同步修改并告知開發(fā)人員改動，最后再由測試人員重新測試，這個溝通鏈路非常長，中間任何一個環(huán)節(jié)都可能出現信息不同步，對開發(fā)人員來說，可能只需要改 1 行代碼，卻需要反復溝通半天時間。

　　既然操作的對象是表格，很自然的想到了利用釘釘自帶的表格功能，釘釘表格支持多人協(xié)同編輯，也可以非常方便的鎖定并回溯歷史。為了維護構建表格所需的原始數據，我們創(chuàng)建了一個模板，稱為字段配置表，如下圖所示：

　　該模板的每一列都有相關的維護角色，由不同的人來維護，同時每列還有一個 key，代碼生成引擎會讀取行列內容，根據 key 生成相關代碼。以云主機為例，填充后的內容如下：

　　生成后的代碼如下(云主機列表生成的代碼約800行，只截取片段)

　　通過上圖可以看出，生成的代碼是非常工整的，由于是根據配置基于模板自動生成的，可以保證統(tǒng)一的風格。云主機的表格數據不僅存在于主列表中，還附屬在物理機、云盤、網絡、安全組等資源的詳情頁中，當資源創(chuàng)建需要選取云主機時，也會彈出云主機列表，在新版 UI 中，資源的所有列表頁都共用了同一個組件，細心的讀者如果觀察 ZStack-UI 界面，會發(fā)現雖然云主機出現在很多地方，但其中顯示的列數量、種類是不同的，這些都是通過上述的配置表來分開管控的，產品經理可以隨心所欲的定制界面，而無需告知開發(fā)去修改。

　　不僅列表可以通過配置生成，界面中所有的操作按鈕、狀態(tài)等也可以用配置的方式生成代碼，此處不再一一贅述

　　最后界面中除了表格數據，用戶看到最多的應該就是各種提示性文字，定義清晰的界面文字可以幫助用戶快速上手，減少誤操作的次數。為了支持國際化，在 ZStack-UI 中，界面上任何可見文字都分配了一個唯一性 key，如云主機的 i18n key 為 vm，云盤為 volume，相同的文字 key 也一樣，key 由開發(fā)人員在編碼的時候定義，通過掃描腳本收集后導入配置系統(tǒng)，再由文檔團隊潤色和翻譯，流程和上文的權限體系一致。

　　在 3.x 開發(fā)時期，如果文檔、售后或者客戶發(fā)現界面描述不正確，一般采用截圖提 Jira 的方式，交由開發(fā)人員修改，這種方式費事費力，修改完畢后還需要打包交付測試驗證。而采用配置系統(tǒng)，開啟 Debug 模式后，文檔同學在修改完畢后，界面會立即生效，再也無需等待，所見即所得。

　　通過各種低代碼開發(fā)工具生成的代碼約為 15萬行，這些是跨團隊共同協(xié)作的結晶。雖然15萬行只有整個 UI 代碼的 1/4，卻完成了界面中所有列表、按鈕顯示，權限控制、主題、多語言等功能，并大大減少了測試量，而后者正是 ZStack 4S 體系的根基所在。

　　關于ZStack Cloud v4.0

　　日前，ZStack Cloud v4.0驚艷登場!這是一場關于UI的革命性升級，它不僅采用了全新UI設計系統(tǒng)，對500+組件實現了重構;同時，它還擁有領先的低代碼、Micro Frontend(微前端)技術加持，致力于帶給用戶最舒適友好的使用體驗!不僅如此，ZStack Cloud v4.0還推出了20多項新功能，自定義運維首頁、企業(yè)管理、彈性裸金屬、云平臺監(jiān)控等等統(tǒng)統(tǒng)都上新!點擊觀看ZStack Cloud v4.0精美展示~點擊閱讀原文立刻試用!