本文來源于《華為云 DTSE?》第五期開源專刊,更多文章請查看:https://bbs.huaweicloud.com/blogs/435823
作者:趙鵬華為云高級前端工程師 & 曾令卡華為云高級前端工程師
摘要:當前前端在場景級的前端能力 / 物料上,業(yè)界相關內容 / 產(chǎn)品較少,并且較分散,基本無基礎組件搭配,體驗參差,多數(shù)專業(yè)場景能力 / 物料僅商用授權;對于場景的構建,開發(fā)效率與開發(fā)門檻也逐步成為了非專業(yè)前端開發(fā)者的痛點問題;業(yè)界已經(jīng)具有多種低碼引擎應用一般都只提供前端部分,開發(fā)者搭建一個完整的低代碼平臺仍然成本巨大。華為云在前端領域提供了 DevUI Suites 的場景級解決方案與打通前端與服務端的 TinyEngine 低碼引擎,幫助開發(fā)者開發(fā)專業(yè)、設計統(tǒng)一的前端場景同時并助力開發(fā)者生產(chǎn)效能的提升。
前端場景級解決方案與搭建效率提升
當前大前端趨勢下,物料生態(tài)越來越繁榮,各種組件庫發(fā)布,給開發(fā)者提供了越來越多的能力可以直接使用,提升開發(fā)效率;但在完整的場景能力上,如一個完整的代碼編輯場景,不僅是組件的使用,還涉及整體場景的搭建、交互、體驗,目前業(yè)界針對場景級前端解決相關內容較少,且一般以單個產(chǎn)品方式提供,內容無基礎設計體系與基礎組件支撐,直接使用,將可能存在與項目其他場景設計體系不一致、體驗不一致等情況,如果一個項目將使用到多個場景解決方案,則這些場景的內部都將存在體驗差異性(如下圖所示的表格場景解決方案與日程場景解決方案分別來自不同的提供方,項目中如果同時使用,仍需考慮其體驗的相互兼容)。
更多的,有了場景級的解決方案,在當今數(shù)字化飛速發(fā)展的時代,企業(yè)對高效、敏捷的應用程序需求日益旺盛。為了滿足這一需求,越來越多的低代碼開發(fā)平臺開始涌現(xiàn)。這些平臺通過提供簡單易用的開發(fā)工具和優(yōu)化后的開發(fā)流程,幫助開發(fā)者快速構建高質量、可重復使用的應用程序,同時降低了開發(fā)的難度和成本,提高了開發(fā)效率和靈活性。這些低代碼開發(fā)平臺的出現(xiàn),無疑為企業(yè)的數(shù)字化轉型提供了更快速、更高效的方法,也將推動整個軟件開發(fā)行業(yè)的進步。業(yè)界的低代碼引擎一般都只提供前端部分,開發(fā)者為了搭建一個完整的低代碼平臺,需要自己實現(xiàn)一套服務端,成本巨大。
場景級前端解決方案集
針對以上提到的相關場景解決方案缺乏、無統(tǒng)一設計體系、各場景間體驗不一致等問題,相對于組件庫而言,前端組件化更進一步,需要的是一個專業(yè)的場景級前端解決方案集,基于已有的統(tǒng)一設計規(guī)范與 Design Tokens,以及構建完整的基礎組件,構建一整套的專業(yè)場景級解決方案,具有場景具有專業(yè)性、體驗先進性、體驗一致性。
以日志場景為例,當前已有產(chǎn)品在日志場景的體驗不一致、功能不足、體驗差等問題。更進一步的解決方案即要構建業(yè)界領先的、面向下一代的前端日志管理場景解決方案。
業(yè)界產(chǎn)品現(xiàn)狀與分析
日志場景最基本的用戶需求即為信息的查看與基本搜索。
就常見的產(chǎn)品一些組件現(xiàn)狀來看,日志場景多數(shù)僅實現(xiàn)了最基礎功能,日志基本搜索也不宜用;
部分場景即使可搜索,搜索結果顯示也存在體驗不足。
更多業(yè)界產(chǎn)品來看,如 google cloud 的日志查看,在日志查詢,toolbar 支持上具有較好能力,并且在日志可視化、便捷化程度上有提升。
GitHub 日志展示,對于基本的查看與搜索,較大顆粒日志支持分組。
日志解決方案
如果目標為提供面向下一代的前端日志管理場景解決方案,日志場景原始的訴求為信息的查看與基本搜索,進一步訴求為錯誤輔助分析與解決。對于日志的查看與搜索更進一步:
1)信息可結構化呈現(xiàn)(時間、信息分類);
2)可快速獲取信息,分類分塊清晰呈現(xiàn),提供導航 + 日志可視化;
3)可支持高級搜索與查找,如常用關鍵詞等;
4)歷史日志支持快捷查看。
場景搭建效率提升:前后端流程打通的低代碼引擎解決方案
針對使用一般低代碼平臺,需要自己實現(xiàn)一套服務端,成本大的問題。需要一個前后端流程打通的低代碼引擎解決方案。前端采用靈活的系統(tǒng)架構,提供了高度的自定義自由度,使用戶能夠像搭建積木一樣選擇不同的模塊來構建自己的專屬設計器。并提供插件化的架構,用戶可以方便地擴展與業(yè)務相關的功能。完善的插件體系,涵蓋了插件開發(fā)所需的基礎 UI 庫、工具庫、插件面板的顯示控制、生命周期管理、公共 API 注冊與共享等。這一體系使得開發(fā)者只需遵循簡單的規(guī)范,即可快速開發(fā)出業(yè)務所需的插件,從而極大地提高了開發(fā)效率和靈活性。
服務端引入了微服務的概念,將系統(tǒng)拆分為小而獨立的服務單元,使得每個服務單元都可以獨立開發(fā)、測試和部署。這種架構不僅提高了團隊的協(xié)作效率,還使得系統(tǒng)更容易擴展和維護。這種架構不僅提高了開發(fā)效率,還為未來的擴展和創(chuàng)新提供了堅實的基礎。
開發(fā)者可以根據(jù)微服務這一特性,輕松擴展并實現(xiàn)自己的服務端架構。
?業(yè)務接口微服務(webService):構建業(yè)務的引擎,匯總連接其他微服務為前端提供接口。
?數(shù)據(jù)中心 (dataCenter):作為數(shù)據(jù)基座,統(tǒng)一進行數(shù)據(jù)管理,為其他微服務提供一致性的數(shù)據(jù)支持。
TinyEngine 低代碼引擎:為定制低代碼平臺提供前后端全套解決方案
華為云針對開發(fā)者場景開發(fā)效率的提升,TinyEngine 低代碼引擎應運而生。它是一種通用的開發(fā)框架,通過對低代碼平臺系統(tǒng)常用的功能進行解構,將其劃分為多個功能模塊,并為每個模塊定義了相應的協(xié)議和開發(fā)范式,使得開發(fā)者可以根據(jù)自身的業(yè)務需求,輕松定制開發(fā)出自己的低代碼開發(fā)平臺。
TinyEngine 提供了低代碼底層能力,并集成了人工智能,從而使用戶能夠高效開發(fā)。TinyEngine 具有強大的拖拽功能,無論是圖元還是復雜組件,都能在畫布上帶來流暢的體驗。它適用于多場景的低代碼平臺開發(fā),包括資源編排、流程編排、服務端渲染、模型驅動、移動端、大屏端以及頁面編排等低代碼平臺。
TinyEngine 不僅提供前端部分,也提供了服務端,可幫助開發(fā)者打通低代碼平臺搭建的前后端整體流程,極大地降低了開發(fā)者搭建低代碼平臺的成本。
盡量大部分業(yè)務可能只需要在低代碼平臺中通過拖拉拽的方式搭建 Web 應用,但依然會有一些定制要求比較高的業(yè)務,平臺無法滿足業(yè)務所有的需求。為此我們提供了一套自定義 DSL 和源碼生成邏輯的機制,相對于在運行時由平臺提供渲染引擎的方式,這種方式能夠為用戶提供更多的自主權和安全性。用戶可以自由地定義自己的 DSL,并根據(jù)需要生成定制化的源代碼,從而更加靈活地控制應用程序的行為和性能。
業(yè)務案例:PDM 元數(shù)據(jù)電子審批流
審批流業(yè)務場景是現(xiàn)代企業(yè)運營中不可或缺的一環(huán)。
A 公司的業(yè)務場景如下:流程發(fā)起人 A 啟動了一個電子審批流程。這個流程首先會被傳遞到主管進行審批。在審批過程中,主管會仔細檢查初始業(yè)務流程信息和其他相關數(shù)據(jù),然后決定是否進一步推進流程,或退回給 A 進行修訂。如果主管批準了這個流程,那么它將被移交給下一級審批人,也就是經(jīng)理。在經(jīng)理的審批環(huán)節(jié),他 / 她也會詳查相關數(shù)據(jù)和信息,并基于這些以及自己的獨立判斷來做出決策。值得注意的是,盡管經(jīng)理可以查看到主管填寫的一些技術信息,但這些信息并不對財務和法務公開。也就是說,只有經(jīng)理和總經(jīng)理可以看到這些技術信息,財務和法務無法獲知。經(jīng)理會根據(jù)這些保密信息以及自己的專業(yè)判斷來決定是否繼續(xù)推進流程。
如果經(jīng)理也批準了該流程,那么它將被送至財務節(jié)點進行審批。在審批過程中,財務主要關注經(jīng)濟相關的問題,例如價格、付款方式等等。一旦財務審批通過,流程會被移交給法務進行審批。
與財務審批類似,法務審批主要關注法律風險和合規(guī)性問題。在審批時,法務會仔細檢查相關的合同、協(xié)議等法律文件,并評估是否存在任何法律風險或合規(guī)性問題。一旦法務批準了流程,流程將被移交給總經(jīng)理進行最后的審批,以完成整個審批流程。
需要注意的是,這種審批流業(yè)務場景并不是只有一個,而是有很多個。例如,除了上述的采購流程,還有其他業(yè)務流程需要進行審批,比如:數(shù)據(jù)入庫流程、報價流程等等。每個流程都有自己的特點和審批節(jié)點數(shù)量不一。有些流程可能只需要兩三個節(jié)點就可以完成審批,有些則可能需要十幾個節(jié)點才能完成。但是,所有類型的審批流大致相似。如:頁面上常見的元素包括表單、表格以及常用的審批組件等。
技術分析:A 公司一開始采用傳統(tǒng)的開發(fā)方式,每當新增一種流程時,前端開發(fā)人員都需要開發(fā)所有審批節(jié)點的審批頁面,并重新進行發(fā)布流程。同樣地,服務端開發(fā)人員也需要重新建立一個審批流,通過特定頁面錄入各節(jié)點審批人,并編寫相應的審批流規(guī)則。顯然,這對于前端和服務端開發(fā)人員來說都是十分繁瑣的工作。
解決方案:為了優(yōu)化審批流程,A 公司基于 TinyEngine 提供的前后端解決方案,開發(fā)出一個專為電子審批流設計的低代碼平臺。然后,將所有與流程相關的組件,如模板、評審記錄和流程指引等導入到平臺的物料區(qū)域。并基于 TinyEngine 提供的服務端搭建了一個特定于 flow 類型的低代碼平臺,以實現(xiàn)對審批流程人員編排。這樣,前后端之間的連接就實現(xiàn)了完美的貫通。最后,將這個專注于開發(fā)審批流的低代碼平臺集成到 PDM 元數(shù)據(jù)電子流業(yè)務模塊中。
使用方式:在低代碼平臺上,想要開發(fā)任意一個流程的審批頁面,只需要將流程模板拖入,并在模板中嵌入本流程的表單或表格,即可輕松完成該節(jié)點的審批頁面,極大地提高了開發(fā)效率和便利性!
使用效果:A 公司通過 TinyEngine 搭建的 PDM 元數(shù)據(jù)電子審批流低代碼平臺,大大提升了公司電子流審批的效率,為公司節(jié)省了大量成本。以下是創(chuàng)建電子流表單的效果圖。
DevUI Suites 前端場景解決方案集
華為云針對場景級解決方案集的構建,提出了 DevUI Suites,旨在基于 DevUI 設計規(guī)范與 Design Token,在專業(yè)的工具場景上場景上做到功能先進 & 完善性、體驗一致性。
DevUI Suites 日志場景方案實現(xiàn)
以上文提到的日志場景解決方案,如上圖所示,在基本日志查看上,DevUI Suites 日志提供了信息的分類顯示,不同信息的結構化呈現(xiàn),在信息的快速導航上,可進行小地圖、滾動條導航,快速找到對應信息。
對于快速查找、搜索過濾上,提供了完整的搜索支持,常用關鍵詞、正則搜索等均支持,并且搜索結果可清晰高亮:
若對錯誤信息進行過濾,可過濾出當前不同級別信息,針對錯誤場景,用戶一鍵可篩選錯誤與警告,并且針對錯誤,可進行錯誤解決方案提示:
以上,DevUI Suites 日志場景提供的一系列能力,對內部產(chǎn)品日志場景能力上有了較大提升,且對比業(yè)界各產(chǎn)品來看,在功能豐富度與完善度上也有一定程度超越,并且此為 DevUI Suites 一個場景解決方案,基于 DevUI 設計體系,與 DevUI 基礎組件配合,構建出的場景與項目具有良好體驗一致性。
本文鏈接:http://www.tebozhan.com/showinfo-26-125180-0.html使用華為云場景級前端解決方案及低代碼引擎,助力開發(fā)者生產(chǎn)效能提升
聲明:本網(wǎng)頁內容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 小鵬匯天“陸地航母”完成載人首飛,11 月 12 日中國航展公開亮相
下一篇: 安吉爾 37 周年盛典,超值福利大放送