本文分享自華為雲社群《使用場景級前端解決方案及低程式碼引擎，助力開發者生產效能提升》，來源：《華為雲DTSE》第五期開源專刊
當前前端在場景級的前端能力/物料上，業界相關內容/產品較少，並且較分散，基本無基礎元件搭配，體驗參差，多數專業場景能力/物料僅商用授權；對於場景的構建，開發效率與開發門檻也逐步成為了非專業前端開發者的痛點問題；業界已經具有多種低碼引擎應用一般都只提供前端部分，開發者搭建一個完整的低程式碼平臺仍然成本巨大。
華為雲在前端領域提供了DevUI Suites的場景級解決方案與打通前端與服務端的TinyEngine低碼引擎，幫助開發者開發專業、設計統一的前端場景同時並助力開發者生產效能的提升。
前端場景級解決方案與搭建效率提升
當前大前端趨勢下，物料生態越來越繁榮，各種元件庫釋出，給開發者提供了越來越多的能力可以直接使用，提升開發效率；但在完整的場景能力上，如一個完整的程式碼編輯場景，不僅是元件的使用，還涉及整體場景的搭建、互動、體驗，目前業界針對場景級前端解決相關內容較少，且一般以單個產品方式提供，內容無基礎設計體系與基礎元件支撐，直接使用，將可能存在與專案其他場景設計體系不一致、體驗不一致等情況，如果一個專案將使用到多個場景解決方案，則這些場景的內部都將存在體驗差異性（如下圖所示的 表格場景解決方案 與 日程場景解決方案 分別來自不同的提供方，專案中如果同時使用，仍需考慮其體驗的相互相容）。
更多的，有了場景級的解決方案，在當今數字化飛速發展的時代，企業對高效、敏捷的應用程式需求日益旺盛。為了滿足這一需求，越來越多的低程式碼開發平臺開始湧現。這些平臺透過提供簡單易用的開發工具和最佳化後的開發流程，幫助開發者快速構建高質量、可重複使用的應用程式，同時降低了開發的難度和成本，提高了開發效率和靈活性。這些低程式碼開發平臺的出現，無疑為企業的數字化轉型提供了更快速、更高效的方法，也將推動整個軟體開發行業的進步。業界的低程式碼引擎一般都只提供前端部分，開發者為了搭建一個完整的低程式碼平臺，需要自己實現一套服務端，成本巨大。
場景級前端解決方案集
針對以上提到的相關場景解決方案缺乏、無統一設計體系、各場景間體驗不一致等問題，相對於元件庫而言，前端元件化更進一步，需要的是一個專業的場景級前端解決方案集，基於已有的統一設計規範與Design Tokens，以及構建完整的基礎元件，構建一整套的專業場景級解決方案，具有場景具有專業性、體驗先進性、體驗一致性。
以日誌場景為例，當前已有產品在日誌場景的體驗不一致、功能不足、體驗差等問題。更進一步的解決方案即要構建業界領先的、面向下一代的前端日誌管理場景解決方案。
業界產品現狀與分析
日誌場景最基本的使用者需求即為資訊的檢視與基本搜尋。
就常見的產品一些元件現狀來看，日誌場景多數僅實現了最基礎功能，日誌基本搜尋也不宜用。
部分場景即使可搜尋，搜尋結果顯示也存在體驗不足。
更多業界產品來看，如google cloud的日誌檢視，在日誌查詢，toolbar支援上具有較好能力，並且在日誌視覺化、便捷化程度上有提升。
GitHub日誌展示，對於基本的檢視與搜尋，較大顆粒日誌支援分組。
日誌解決方案
如果目標為提供面向下一代的前端日誌管理場景解決方案，日誌場景原始的訴求為資訊的檢視與基本搜尋，進一步訴求為錯誤輔助分析與解決。對於日誌的檢視與搜尋更進一步：
資訊可結構化呈現（時間、資訊分類）；
可快速獲取資訊，分類分塊清晰呈現，提供導航 + 日誌視覺化；
可支援高階搜尋與查詢，如常用關鍵詞等；
歷史日誌支援快捷檢視。
場景搭建效率提升：前後端流程打通的低程式碼引擎解決方案
針對使用一般低程式碼平臺，需要自己實現一套服務端，成本大的問題。需要一個前後端流程打通的低程式碼引擎解決方案。前端採用靈活的系統架構，提供了高度的自定義自由度，使使用者能夠像搭建積木一樣選擇不同的模組來構建自己的專屬設計器。並提供外掛化的架構，使用者可以方便地擴充套件與業務相關的功能。完善的外掛體系，涵蓋了外掛開發所需的基礎 UI 庫、工具庫、外掛皮膚的顯示控制、生命週期管理、公共 API 註冊與共享等。這一體系使得開發者只需遵循簡單的規範，即可快速開發出業務所需的外掛，從而極大地提高了開發效率和靈活性。
服務端引入了微服務的概念，將系統拆分為小而獨立的服務單元，使得每個服務單元都可以獨立開發、測試和部署。這種架構不僅提高了團隊的協作效率，還使得系統更容易擴充套件和維護。這種架構不僅提高了開發效率，還為未來的擴充套件和創新提供了堅實的基礎。
開發者可以根據微服務這一特性，輕鬆擴充套件並實現自己的服務端架構。
業務介面微服務（webService）：構建業務的引擎， 彙總連線其他微服務為前端提供介面。
資料中心(dataCenter)：作為資料基座，統一進行資料管理，為其他微服務提供一致性的資料支援。
TinyEngine低程式碼引擎：為定製低程式碼平臺提供前後端全套解決方案
華為雲針對開發者場景開發效率的提升，TinyEngine 低程式碼引擎應運而生。它是一種通用的開發框架，透過對低程式碼平臺系統常用的功能進行解構，將其劃分為多個功能模組，併為每個模組定義了相應的協議和開發正規化，使得開發者可以根據自身的業務需求，輕鬆定製開發出自己的低程式碼開發平臺。
TinyEngine 提供了低程式碼底層能力，並整合了人工智慧，從而使使用者能夠高效開發。TinyEngine 具有強大的拖拽功能，無論是圖元還是複雜元件，都能在畫布上帶來流暢的體驗。它適用於多場景的低程式碼平臺開發，包括資源編排、流程編排、服務端渲染、模型驅動、移動端、大屏端以及頁面編排等低程式碼平臺。
TinyEngine 不僅提供前端部分，也提供了服務端，可幫助開發者打通低程式碼平臺搭建的前後端整體流程，極大地降低了開發者搭建低程式碼平臺的成本。
儘量大部分業務可能只需要在低程式碼平臺中透過拖拉拽的方式搭建Web應用，但依然會有一些定製要求比較高的業務，平臺無法滿足業務所有的需求。為此我們提供了一套自定義DSL和原始碼生成邏輯的機制，相對於在執行時由平臺提供渲染引擎的方式，這種方式能夠為使用者提供更多的自主權和安全性。使用者可以自由地定義自己的 DSL，並根據需要生成定製化的原始碼，從而更加靈活地控制應用程式的行為和效能。
業務案例：PDM後設資料電子審批流
審批流業務場景是現代企業運營中不可或缺的一環。
A公司的業務場景如下：流程發起人 A 啟動了一個電子審批流程。這個流程首先會被傳遞到主管進行審批。在審批過程中，主管會仔細檢查初始業務流程資訊和其他相關資料，然後決定是否進一步推進流程，或退回給 A 進行修訂。如果主管批准了這個流程，那麼它將被移交給下一級審批人，也就是經理。在經理的審批環節，他/她也會詳查相關資料和資訊，並基於這些以及自己的獨立判斷來做出決策。值得注意的是，儘管經理可以檢視到主管填寫的一些技術資訊，但這些資訊並不對財務和法務公開。也就是說，只有經理和總經理可以看到這些技術資訊，財務和法務無法獲知。經理會根據這些保密資訊以及自己的專業判斷來決定是否繼續推進流程。
如果經理也批准了該流程，那麼它將被送至財務節點進行審批。在審批過程中，財務主要關注經濟相關的問題，例如價格、付款方式等等。一旦財務審批透過，流程會被移交給法務進行審批。
與財務審批類似，法務審批主要關注法律風險和合規性問題。在審批時，法務會仔細檢查相關的合同、協議等法律檔案，並評估是否存在任何法律風險或合規性問題。一旦法務批准了流程，流程將被移交給總經理進行最後的審批，以完成整個審批流程。
需要注意的是，這種審批流業務場景並不是只有一個，而是有很多個。例如，除了上述的採購流程，還有其他業務流程需要進行審批，比如：資料入庫流程、報價流程等等。每個流程都有自己的特點和審批節點數量不一。有些流程可能只需要兩三個節點就可以完成審批，有些則可能需要十幾個節點才能完成。但是，所有型別的審批流大致相似。如：頁面上常見的元素包括表單、表格以及常用的審批元件等。
技術分析：A公司一開始採用傳統的開發方式，每當新增一種流程時，前端開發人員都需要開發所有審批節點的審批頁面，並重新進行釋出流程。同樣地，服務端開發人員也需要重新建立一個審批流，透過特定頁面錄入各節點審批人，並編寫相應的審批流規則。顯然，這對於前端和服務端開發人員來說都是十分繁瑣的工作。
解決方案：為了最佳化審批流程，A公司基於 TinyEngine提供的前後端解決方案，開發出一個專為電子審批流設計的低程式碼平臺。然後，將所有與流程相關的元件，如模板、評審記錄和流程指引等匯入到平臺的物料區域。並基於TinyEngine提供的服務端搭建了一個特定於 flow 型別的低程式碼平臺，以實現對審批流程人員編排。這樣，前後端之間的連線就實現了完美的貫通。最後，將這個專注於開發審批流的低程式碼平臺整合到 PDM 後設資料電子流業務模組中。
使用方式：在低程式碼平臺上，想要開發任意一個流程的審批頁面，只需要將流程模板拖入，並在模板中嵌入本流程的表單或表格，即可輕鬆完成該節點的審批頁面，極大地提高了開發效率和便利性！
使用效果：A公司透過TinyEngine搭建的PDM後設資料電子審批流低程式碼平臺，大大提升了公司電子流審批的效率，為公司節省了大量成本。以下是建立電子流表單的效果圖。
DevUI Suites 前端場景解決方案集
華為雲針對場景級解決方案集的構建，提出了DevUI Suites，旨在基於DevUI設計規範與Design Token，在專業的工具場景上場景上做到功能先進&完善性、體驗一致性。
DevUI Suites日誌場景方案實現
以上文提到的日誌場景解決方案，如上圖所示，在基本日誌檢視上，DevUI Suites日誌提供了資訊的分類顯示，不同資訊的結構化呈現，在資訊的快速導航上，可進行小地圖、捲軸導航，快速找到對應資訊。
對於快速查詢、搜尋過濾上，提供了完整的搜尋支援，常用關鍵詞、正則搜尋等均支援，並且搜尋結果可清晰高亮：
若對錯誤資訊進行過濾，可過濾出當前不同級別資訊，針對錯誤場景，使用者一鍵可篩選錯誤與警告，並且針對錯誤，可進行錯誤解決方案提示：
以上，DevUI Suites日誌場景提供的一系列能力，對內部產品日誌場景能力上有了較大提升，且對比業界各產品來看，在功能豐富度與完善度上也有一定程度超越，並且此為DevUI Suites一個場景解決方案，基於DevUI設計體系，與DevUI基礎元件配合，構建出的場景與專案具有良好體驗一致性。
點選關注，第一時間瞭解華為雲新鮮技術~