摘要：從瀏覽類頁面到管理類頁面，看華為雲官網如何根據業務場景分階段構建低代碼平台，提升頁面迭代效率。
本文分享自華為雲社區《華為雲官網前端的技術演進與低代碼實踐【全球軟件大會技術分享】》，原文作者：技術火炬手 。
前端團隊演進往往會經歷組件化、配置化、可視化的階段，而低代碼是團隊演進中的一個必然結果。
在第七屆全球軟件大會上，華為前端研發工程師郭曉，分享了華為雲官網如何根據業務場景分階段構建低代碼平台，提升頁面迭代效率的實踐心得， 以下是現場演講內容速記。
前端團隊面臨的三大難題
為什麼低代碼一詞近期如此火熱，在日前的Qcon大會上也有5個以上低代碼相關的分享，根本原因還是近年來前端團隊遇到的一些問題。
首先是頁面數量的激增， 根據IDC在2020年中國ICT市場趨勢論壇中發表的演講，近幾年，數字經濟的發展將孕育出超過5億個新應用/服務，這與過去40年間出現的應用數量相當。數字經濟的高速發展需要傳遞海量的信息，而前端頁面作為傳遞信息的一個重要途徑，數量也在激增。
其次是前端人力不足，早早聊大會近期針對535位團隊主管進行的一項調查顯示，這些團隊年內期望招聘總計超過9000名前端，但實際只招到了大約5000人，不到預期的60%，而且從人才市場的數據看，前端人力的增速從14年就開始逐步下降，前端的新鮮血液在逐年減少。需求變多，人力持平或減少，問題已經非常明顯。
最後是需求激增帶來的運維壓力， 前端業務需求大部分來自運營和產品，和業務的強關聯性導致了需求的不穩定性。 一個已上線的頁面很可能需要根據一個細微的調整重新走上線發佈流程，耗時耗力。而且，頁面數量過多後，一些傳統的通過人力的內容質量檢查會非常吃力，上線頁面的質量很難得到保障。
那麼，在此背景下，團隊如何進行技術演進？
技術演進之路：從刀耕火種到可視化
最開始前端處於原始的“刀耕火種”階段，只要有html，css，js三大基座，頁面都能堆出來。漸漸的，我們開始把一些常用的方法抽成方法庫，通用的組件規整到組件庫，並且結合工程化思想進行一些模塊的複用，即組件化階段。這個時期，雖然還是編寫代碼，但代碼的複用開始提升項目的效率。
組件化後期，我們發現在很多業務場景下，一些組件經常組合在一起，組件庫中開始出現業務組件。比如頁面中經常會有這樣的樓層，上方居中一個主標題一個副標題，下面幾個卡片，每個卡片有個背景圖然後一段描述。那我們就構建這樣的大顆粒組件，方便複用。
隨着組件粒度的加大和業務組件的增多，新增簡單頁面需求所要寫的代碼會變的越來越少，經常只需要引幾個組件，傳一些參數就行，因為很多邏輯已經封裝到組件裏面。此時，我們把組件和參數寫到配置文件中，再寫一套解析邏輯（渲染引擎），將配置文件中的內容解析為目標代碼。這樣，後續只需維護一個配置文件，初步進入了配置化的階段。
在配置化階段，編寫DSL無需感知技術棧和業務流程，最終渲染的效果完全由渲染引擎控制。此時我們可以將配置文件的維護權限暴露出去給應用側的開發：我們維護渲染引擎，組件庫，由應用側的開發維護配置文件。這樣就減少了團隊和業務的耦合性，進一步節約了人力。
考慮到應用側不一定需要開發，同時也為了應用化的體驗，我們可以提供一個讓用户拖拽組件並且編輯的頁面，將用户在界面的操作結果轉為DSL，這樣最終用户不需要感知DSL也能生成最終頁面。簡單的操作使得非開發也能掌握，於是漸漸形成了誰的需求誰自己實現的局面。
可以看到，我們在開發流程中，不斷的抽取公共能力，並且抽象業務流程，最終達到了低代碼，無代碼的能力開放，極大的降低了前端團隊的維護壓力。
業界有很多類似演進的例子，至此，低代碼也慢慢進入大家的視野。
低代碼平台如何選型？
低代碼在海外起步較早，這個概念也是海外率先提出，outSystem和mendix等企業的低代碼平台早已佔據大半江山。國內發展較晚，幾年前才有第一個商用的低代碼平台，但如今已呈百家爭鳴之勢，包括華為也推出了AppCube。
低代碼的“低”可以從兩方面理解：
一是應用生產成本降低， 低代碼不僅是指開發過程中寫更少的代碼，也是指應用部署成本等整體流程成本的降低。
二是應用生產的技術門檻降低， 底層業務邏輯，技術棧的屏蔽使得非專業開發人員在簡單的IT培訓後也能快速投入應用生產。
那在低代碼浪潮中，一個前端團隊如何選擇？
首先看前端團隊是否一定需要低代碼平台。據估計，中小型企業 95%以上的場景可以用低代碼平台搭建，而大中型企業也有70%以上的場景可以由低代碼平台搭建。剛剛我們也提到，低代碼是前端團隊技術演進過程中一個必然結果，所以低代碼平台是必須的。
問題隨之而來，是直接購買使用還是自研呢？我們從擴展性、易用性和人力成本三個維度進行了比較。
擴展和易用性性方面，如果購買業界平台，只能使用它們暴露的平台能力，雖然平台會開放一些定製能力，但並不能滿足華為雲官網複雜業務的需要。成本方面，從開發到上線整個流程的平台，包含了數據模型、UI、邏輯、流程的低代碼構建，構建的人力成本高。
如果團隊規模較小或者業務場景較為統一或者團隊還處於組件化階段，我建議使用業界平台，比如華為雲的AppCube，省時省力。
但如果團隊較大，業務場景複雜，且團隊演進已經在配置化或者可視化階段，那自研一套長久來看會更好。因為當企業或者組織發展到一定程度以後，一定會逐步放棄各種外購的部件，構建自研能力，以適配自身組織的需要。
對於我們團隊來説，考慮到擴展性的重要性高於人力成本，因此我們選擇自研一套低代碼平台。
那華為雲官網是如何進行低代碼實踐的？
華為雲官網低代碼實踐
華為雲官網主要包含三類頁面：
瀏覽類頁面， 如產品介紹頁、文檔頁，此類頁面的特點是以樓層為維度，頁面組件多以卡片、文字、圖片為主，樓層間相互獨立，交互也比較少，語言是基於xtpl的。
管理台頁面， 如賬單中心，內部管理頁，因為以圖表頁面為主，這類頁面的交互比較固定，包括搜索，增刪改查等，語言是vue。
購買類頁面， 如活動頁、價格計算器，這類頁面多呈現產品規格，頁面交互比較複雜，語言同樣是vue的。
這其中，瀏覽類和管理台類頁面大概佔90%以上。
在低代碼實踐中，華為雲官網的總體目標是實現面向運營和開發者的高效應用生產平台，我們內部稱作HPA，平台的功能包含但不僅限於數據模型、邏輯、UI、流程的低代碼或者無代碼生成。
根據業務背景，我們將目標初步分為兩個階段，首先是針對瀏覽類頁面，實現瀏覽類頁面的無碼化生成，同時，構建平台能力，實現頁面從生產到發佈的無碼化。
第二階段，針對管理台類頁面，增強平台的無碼化能力，將頁面的低代碼生成拓展到數據模型，邏輯和流程維度。
階段一：瀏覽類頁面低代碼化
最先低碼化的是瀏覽類頁面，因為這類頁面數量多，耗費人力大，而且頁面構成比較簡單，低代碼的成本相對較低。我們對於UI低代碼的構建方式是先組件化，再配置化，最終實現可視化。
組件化
其中，組件化的關鍵在於處理頁面的共性和定製性。 瀏覽類頁面的共性是以樓層為維度，並且樓層間獨立。定製性在於部分頁面會有一些非樓層組件，比如浮窗或少許全局邏輯。
我們先按不同的定製性將頁面進行分類，形成一些頁面模板，比如通用頁面模板以及其他一些產品頁面，新聞頁面的模板。頁面模板往往包含了頁頭頁尾，以及剛才提到的頁面定製邏輯，比如官網服務保障頁，用的就是隻包含頁尾的通用頁面模板。
然後是處理共性部分，我們把頁面按樓層拆分，官網服務保障頁面可以由5類組件組成，組件2和3都是步驟條組件，可以複用。我們將頁面的定製性收編到不同的頁面模板中去，共性部分就是可以複用的一個個樓層組件。
配置化
組件化後，就是如何用配置化信息描述頁面。配置信息裏包含頁面模板、頁面結構、頁面數據和依賴信息。
頁面模板描述頁頭頁尾和頁面定製信息。頁面結構描述用了哪些樓層組件以及組件的順序，用户在畫布上拖拽組件或者刪除組件其實都是在修改頁面結構文件。同時，頁面結構也記錄了樓層組件和頁面數據的關聯性。
頁面數據則是描述了樓層組件具體的配置數據，用户在畫布上的組件內容編輯，就是在調整頁面數據。
最後加上樓層組件和三方件的版本依賴信息，再通過DSL渲染引擎就可以渲染出最終的html頁面
可視化
頁面配置化後，便是考慮最終用户如何通過交互界面生成配置化信息。
下圖為頁面結構編輯和頁面數據編輯的示意圖，頁面結構編輯是從畫布左邊的組件市場中拖拽組件到頁面指定位置。其中組件市場的組件是通過本地IDE開發然後通過npm發佈上傳。頁面數據編輯是點擊目標組件後，在彈出的組件編輯框中進行編輯操作，組件編輯框採用類似JSON-schema的語法定義在組件中，編輯完成後可以選擇發佈，預覽等功能。
頁面訪問
發佈時，畫布會將頁面配置數據存放到後端數據庫，後續通過統一數據微服務調用。
在現網訪問時，如果CDN失效回源，BFF會根據頁面url去統一數據微服務獲取當前頁面的頁面配置，包含頁面模板，頁面數據以及依賴信息。然後根據依賴信息去OBS獲取對應的樓層組件內容，再根據BFF掛載的DSL渲染引擎渲染出最終頁面。
預覽態和運行態的區別在於是否有CDN，然後這些數據信息都是前端傳給BFF的，不需要BFF去統一數據微服務取。
HPA平台1.0
上面主要介紹了瀏覽類頁面從組件化到可視化過程以及最終運行態的效果。但作為平台能力，後台和基礎設施的支撐也非常重要。
我們第一階段做出的HPA平台的模塊圖主要有四層。
基礎設施層是華為云云服務、數據庫RDS、雲搜索CSS、對象存儲OBS、Redis，分佈式消息通知，一站式AI開發平台ModelArts。
微服務層提供了用户權限管理，配合工作流，消息通知指定該用户可以編輯哪些頁面，編輯以後需要給誰審核；內容質量檢查和灰度測試作為頁面上線前的質量和樣式風格的報障；內容管理就是上文提到的統一數據微服務接口。
數據中台層是BFF根據url或者調用參數返回渲染好的頁面。
前端畫布層主要包含組件市場、資產管理、應用管理、版本管理和頁面編輯。這裏的應用管理還比較狹義，只限於UI。版本管理功能主要提供了頁面的回退，對比等功能。
階段一總結
HPA1.0上線後，取得了顯著的效果。我們目前維護了大約100個樓層組件，也有些定製的樓層組件，基本上覆蓋了官網所有瀏覽類頁面。從運營的使用量也可以看出對開發側的工作量減少，運營人員平均大約在平台中自助變更6000次。
而且，發佈流程也大幅簡化，很多變更不需要再通過需求傳遞給開發再轉測上線，可以運營自主操作，從天級下降到小時級。最後，自動全面的內容檢查也大幅提升了頁面的質量。
在取得明顯成效的同時，也必須注意到仍存在一些可優化的點。比如DSL是為了渲染瀏覽類頁面，場景比較簡單，那後續處理管理台類頁面會很吃力，需要增強；其次，這100個樓層組件是需要開發在本地IDE維護的，相對發佈週期依然較長；最後，缺乏無碼化的流程編排能力，如果新增權限組配置流程複雜。
因此，我們繼續進入階段二，以管理台頁面低代碼為業務目的，增強平台能力。
階段二：管理台類頁低代碼化
組件化
管理台頁面是目前國內低代碼平台支持較多的一種頁面類型，下圖是一個簡單的管理台頁面的例子，圖中部分信息做了隱藏。
主體是一個表格，下面有分頁組件，上面是新增和搜索，表格內有查、改、刪的按鈕。頁面特點在於組件種類相對固定，一般有表格、搜索、分頁、彈窗、按鈕和圖組件。而且基礎邏輯比較固定，可以泛化為針對底層數據模型的增刪改查。它的定製性在於增刪改查接口的差異性和頁面的一些定製功能。
對於共性部分，我們可以提供上述提到的頁面組件，並且提供統一的數據處理方法；甚至可以按默認邏輯組合起來形成一個大而全的業務組件。
對於定製性部分，如果定製較少，可以通過業務組件暴露一定的定製能力。較多的話，只能使用提供的獨立組件自行拼接邏輯。所以管理台類頁面的組件化可以分為用統一的業務組件或者使用基礎頁面組件自行拼裝邏輯。
配置化
管理台頁面所需要的配置信息和瀏覽類類似，只是將頁面結構和頁面數據做了合併。為了增加渲染引擎的泛化性，我們將兩種不同場景的組件化在DSL層做統一。
首先，為了支持通用場景，我們引入了自定義佈局，用於表達頁面的複雜樣式；其次，借鑑json-schema遞歸的數據結構，標識組件的父子關係。然後引入了functionList去表達此組件會觸發的事件，建立組件關聯性；最後，除了components，我們還有jsapi模塊去表示頁面邏輯。
可視化
這麼複雜的DSL肯定不能直接暴露給最終用户，所以我們在可視化階段提供了組件設計器，可以先由業務側開發在組件設計器上設計出所需的大顆粒組件，再暴露給最終用户。
在可視化階段，除了瀏覽類頁面階段構建的頁面設計外，我們還提供了數據模型設計和組件設計。
數據模型設計整體是為了滿足實現統一的增刪改查接口。其中包含兩部分，一部分是數據模型的無碼化生成，一部分是邏輯的低碼化生成。它的構建可以看做定義表單，對於一個表單，有通用的接口可以滿足增刪改查、排序過濾等接口能力，也可以通過邏輯構建自定義。
這裏需要強調一下組件設計，對有定製訴求的業務可以自行修改組件，然後發佈到組件市場中，供最終用户在頁面設計時使用。
在設計器的場景中，數據模型創建可以填寫數據模型相關信息、表單信息，包含了表單字段，字段類型，是否必填等。新增按鈕以後就會在後台數據庫創建此表單結構。
另外，表格設計器中我們會先預置一個大而全的業務組件，業務側可以在此基礎上進行修改，可能會存在需要自定義function的情況。
到頁面設計階段，組件市場除了本來的樓層組件外，又多了UI組件、流程組件、邏輯組件等其他選擇，在這裏可以選取到從表格設計器發佈的組件，也就是説組件的發佈可以不僅僅通過本地IDE開發，也可以在頁面配置生成，大大縮短了發佈流程。
階段二總結
HPA2.0平台整體還在需求迭代中，很多業務已經接入，但具體數據目前還未放出。但是2.0階段我們增強了我們的DSL渲染引擎，使得複雜的購買類頁面，比如價格計算器進入了配置化階段，代碼量減少70%，變更時間也從天級降為小時級。
另外，我們在構建管理台類頁面低代碼生成的同時，也實現了數據模型、邏輯等模塊的低代碼/無代碼生成，並發現這些能力可以獨立或者組合使用。
比如可以用全功能：新建一個應用，從新建數據結構開始，到配置頁面，選擇數據源直至發佈；也可以只配API模塊，快速暴露後台接口；或者對接自己的數據源，只配置頁面併發布，配置部分頁面並集成到已有工程中，暴露為組件，集成到單個頁面中。
結語
低/無碼化是前端團隊演進的一個必然結果，各團隊應根據自身團隊需要自研或者購買業界低代碼平台。並且在初期就明確好低代碼平台的定位：是解決團隊自身的業務痛點還是後續商用，前者重定製性，後者重通用性，結合業務各取所需。
福利
看完華為雲官網的前端低代碼實踐，大家是否有收穫或者有問題想交流呢，歡迎在【原文】評論區留下你的問題或感想，我們將抽取3條，請專家與你1V1交流， 並且送出開發者大禮包一份。
本次，還有兩位華為的專家給大家帶來網站高可用保障方案和智能化體驗實踐的分享，他們也回答了開發者關心的問題，例如網站高可用保障的最佳方案，內容智能推薦的幾點心得等等。歡迎掃碼觀看視頻， 演講全文後續也會發布在雲社區，大家敬請期待。
最後，附上華為前端研發工程師郭曉在本次全球軟件大會上的技術分享PPT， 點擊【華為雲官網前端低代碼實踐】可在文末下載查看。
點擊關注，第一時間瞭解華為雲新鮮技術~
