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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　關(guān)于ZStack Cloud v4.0

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