HDC技術(shù)分論壇：HarmonyOS新一代UI框架的全面解讀
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
在Harmony 3.0.0開發(fā)者預(yù)覽版中，包含了新一代的聲明式UI框架ArkUI 3.0、多語言跨平臺編譯器ArkCompiler 3.0、跨端開發(fā)工具DevEco Studio3.0，以及基于TS/JS語言的API 7，全面提升開發(fā)者體驗。
本期，我們要為大家重點介紹HarmonyOS新一代聲明式UI框架ArkUI 3.0。
一、UI編程框架
在介紹ArkUI 3.0之前，我們先來簡要了解一下什么是UI編程框架。
UI編程框架，是為應(yīng)用開發(fā)者提供的開發(fā)UI的基礎(chǔ)設(shè)施，主要包括UI控件(按鈕/列表等)，視圖布局(擺放/排列相應(yīng)的UI控件)，動畫機制(動畫設(shè)計以及效果呈現(xiàn))，交互事件處理(點擊/滑動等)，以及相應(yīng)的編程語言和編程模型等。從系統(tǒng)運行的維度來看，UI編程框架也包括一個運行時，負責應(yīng)用在系統(tǒng)中執(zhí)行時所需的資源加載、UI渲染和事件響應(yīng)等。
總體而言，UI編程框架提供了開發(fā)以及運行UI界面所需要的框架能力，主要架構(gòu)如下圖所示：
圖1 UI編程框架
- 開發(fā)模型： 對開發(fā)者提供開發(fā)范式、UI控件/布局/動效/交互、編程語言等。它體現(xiàn)的是開發(fā)效率與難易程度。
- 運行框架： UI界面渲染及交互的基礎(chǔ)能力框架，包括相應(yīng)的布局引擎、控件機制、動效引擎、事件機制、渲染管線等，并結(jié)合語言虛擬機和圖形引擎，將開發(fā)者的程序運行在具體系統(tǒng)平臺上。它體現(xiàn)的是應(yīng)用運行的性能體驗。
- 平臺適配： 承載框架的具體操作系統(tǒng)或平臺適配層。
UI編程框架的關(guān)鍵需求，主要有以下兩類：
(1)開發(fā)效率： 包括代碼量、學(xué)習(xí)曲線、工具、社區(qū)、三方庫完備度等。
(2)性能體驗： 包括啟動速度、幀率、響應(yīng)時延、酷炫效果、資源占用等。
另外，隨著智能設(shè)備的急劇增長，UI編程框架還需要考慮如何更好地適配不同設(shè)備的差異性，包括設(shè)備形態(tài)差異(比如屏幕形狀、尺寸、分辨率、交互模式等)，以及設(shè)備能力差異(比如內(nèi)存、CPU、GPU等)。
二、ArkUI框架的演進
為了更好地滿足開發(fā)效率和性能體驗等相關(guān)的需求， ArkUI 3.0綜合考慮了UI渲染以及語言和運行時，圍繞著極簡開發(fā)、高性能、跨設(shè)備跨平臺進一步演進。下圖描述了ArkUI整體架構(gòu)的演進：
圖2 ArkUI框架演進
圖的左側(cè)是2020年發(fā)布的JS UI框架的架構(gòu)示意圖。它主要支持類Web的前端開發(fā)范式，通過DSL(domain-specific language，領(lǐng)域特定語言)轉(zhuǎn)換層，跨語言對接到聲明式UI后端引擎，并結(jié)合JS引擎完成整體UI渲染。圖的右側(cè)是新的ArkUI 3.0框架，主要有以下幾個關(guān)鍵的變化：
(1)引入了新一代的聲明式UI開發(fā)范式，實現(xiàn)極簡的UI描述語法。
(2)設(shè)計了統(tǒng)一的前后端扁平化渲染機制，進一步提升UI渲染的性能并降低內(nèi)存消耗。
(3)深度結(jié)合ArkCompiler 3.0的方舟編譯器和方舟運行時，提升語言的執(zhí)行性能和跨語言通信能力。
(4)在工具方面，針對新一代的聲明式UI開發(fā)范式構(gòu)建了新的編譯工具鏈和預(yù)覽引擎，提供了所見即所得的實時預(yù)覽機制。
另外，在ArkUI 3.0框架中，類Web范式會繼續(xù)保留，即類Web范式和新一代的聲明式UI范式都可以支持，可以各自獨立使用，但不能混用。
三、ArkUI 3.0的關(guān)鍵特性
接下來我們展開詳細介紹一下ArkUI 3.0的關(guān)鍵特性。
1. 新一代的聲明式UI開發(fā)范式
具體而言，ArkUI 3.0中的新一代聲明式UI開發(fā)范式，主要特征如下：
(1)基于TypeScript擴展的聲明式UI描述語法，提供了類自然語言的UI描述和組合。
(2)開箱即用的多態(tài)組件。多態(tài)是指UI描述是統(tǒng)一的，UI呈現(xiàn)在不同類型設(shè)備上會有所不同。比如Button組件在手機和手表會有不同的樣式和交互方式。
(3)多維度的狀態(tài)管理機制，支持靈活的數(shù)據(jù)驅(qū)動的UI變更。
下面我們以一個具體的示例來說明新一代聲明式UI開發(fā)范式的基本組成。如圖3所示的代碼示例，UI界面會顯示一個“Hello World”的文本和一個“Click me”按鈕。當用戶點擊“Click me”按鈕時，字符串變量myText的值會從“World”變?yōu)?ldquo;ACE”，文本最終顯示為“Hello ACE”。
圖3 聲明式UI開發(fā)范式的基本概念
以上示例中所包含的聲明式UI開發(fā)范式的基本組成說明如下：
- 裝飾器 ：用來裝飾類、結(jié)構(gòu)體、方法以及變量，賦予其特殊的含義，如上述示例中@Entry、@Component、@State都是裝飾器。@Component表示這是個自定義組件;@Entry則表示這是個入口組件;@State表示組件中的狀態(tài)變量，這個狀態(tài)變化會引起UI變更。
- 自定義組件 ：可復(fù)用的UI單元，可組合其它組件，如上述被@Component裝飾的struct Hello。
- UI描述 ：聲明式的方式來描述UI的結(jié)構(gòu)，如上述build()方法內(nèi)部的代碼塊。
- 內(nèi)置組件 ：框架中默認內(nèi)置的基礎(chǔ)和布局組件，可直接被開發(fā)者調(diào)用，比如示例中的Column、Text、Divider、Button。
- 事件方法 ：用于添加組件對事件的響應(yīng)邏輯，統(tǒng)一通過事件方法進行設(shè)置，如跟隨在Button后面的onClick()。
- 屬性方法 ：用于組件屬性的配置，統(tǒng)一通過屬性方法進行設(shè)置，如fontSize()、width()、height()、color()等，可通過鏈式調(diào)用的方式設(shè)置多項屬性。
上述示例中，用@State裝飾過的變量myText，包含了一個基礎(chǔ)的狀態(tài)管理機制，即myText的值的變化，會引起相應(yīng)的UI變更(Text組件)。ArkUI 3.0還提供多維度的狀態(tài)管理機制。和UI相關(guān)聯(lián)的數(shù)據(jù)，不僅僅在組件內(nèi)使用，還可以在不同組件層級間傳遞，比如父子組件之間，爺孫組件之間，也可以是全局范圍內(nèi)的傳遞，還可以是跨設(shè)備傳遞。另外，從數(shù)據(jù)的傳遞形式來看，可以分為只讀的單向傳遞和可變更的雙向傳遞。開發(fā)者可以靈活的利用這些能力來實現(xiàn)數(shù)據(jù)和UI的聯(lián)動。
ArkUI采用嵌入式領(lǐng)域特定語言(embedded Domain Specific Language， eDSL)的形式，結(jié)合宿主語言能力實現(xiàn)UI開發(fā)。通過eDSL，結(jié)合語法糖或者語言原生的元編程能力，設(shè)計了統(tǒng)一的UI開發(fā)范式，并能夠結(jié)合不同語言來實現(xiàn)應(yīng)用的邏輯處理部分。
2. 關(guān)鍵渲染性能
下面通過一個簡單的示例代碼，為大家講述從代碼到UI顯示的整體渲染流程。如圖4所示，此示例會在UI界面顯示一個“Click me”按鈕，按鈕下面同步顯示按鈕的點擊次數(shù)。當用戶點擊按鈕時，下面的點擊次數(shù)會相應(yīng)增加。
圖4 整體渲染流程
整個渲染過程分為兩個階段：
(1)初始顯示流程(步驟①~⑤)
① 源代碼通過相應(yīng)的工具鏈，編譯為帶有類型標志的目標文件，同時也包含了如何創(chuàng)建UI結(jié)構(gòu)信息的指令流。
② 通過跨語言調(diào)用并生成了C++層Component樹(UI描述層)。
③ 通過Component樹進一步生成Element樹。Element是Component的實例，表示一個具體的組件節(jié)點，它形成的Element樹負責維持界面在整個運行時的樹形結(jié)構(gòu)，方便計算更新時的局部更新算法等。
④ 對于每個可顯示的Element都會為其創(chuàng)建對應(yīng)的RenderNode。RenderNode負責一個節(jié)點的顯示信息，它形成的Render樹維護著整個界面渲染需要用到的信息，包括位置、大小、繪制命令等。后續(xù)的布局、繪制都是在Render樹上進行的。
⑤ 實現(xiàn)真正的渲染并顯示繪制結(jié)果。
(2)按鈕被點擊后的顯示流程(步驟⑥~⑪)
⑥ 點擊事件傳遞到組件，組件的onClick事件方法被觸發(fā)執(zhí)行。
⑦ 由于onClick事件方法中@State注解過的變量改變了，相應(yīng)getter/setter函數(shù)會被觸發(fā)。
⑧ 狀態(tài)管理模塊定位出關(guān)聯(lián)的UI組件。
⑨ 狀態(tài)管理模塊更新相應(yīng)的Element樹的信息。
⑩ 更新相應(yīng)的UI組件的渲染信息。
⑪ 界面顯示，與⑤類似。
整個渲染過程中所需的關(guān)鍵能力，除了極簡的開發(fā)范式本身，主要包含以下三個部分：
編譯優(yōu)化以及跨語言調(diào)用。 結(jié)合目標文件中的類型信息標志，ArkCompiler會實現(xiàn)相應(yīng)的代碼優(yōu)化。另外，ArkCompiler也提供了高效的JS/TS -> C++跨語言調(diào)用機制。
扁平化渲染機制以及小對象組合機制。 組件信息的結(jié)構(gòu)在前后端有基本一致的表示，進一步減少了轉(zhuǎn)換開銷，實現(xiàn)了扁平化的渲染。同時，UI組件內(nèi)部都是通過輕量化對象來按需組合，內(nèi)存消耗也進一步降低。
狀態(tài)管理機制。 通過監(jiān)聽變量的存取操作，實現(xiàn)數(shù)據(jù)變化的自動化感知并計算出相應(yīng)的最小化UI組件更新范圍，實現(xiàn)高效的UI變更。
除此之外，長列表渲染是一種典型的應(yīng)用場景，里面可能會涉及到大量的數(shù)據(jù)，如果處理不當，會引起極大影響性能以及資源占用。ArkUI 3.0針對這類常用的場景，提供了一種LazyForEach懶加載機制，會自動根據(jù)具體情況計算出合適的渲染數(shù)據(jù)，實現(xiàn)數(shù)據(jù)的按需加載，從而提升UI刷新效率。LazyForEach可以結(jié)合常用的列表類組件(比如List、Grid等)靈活配合使用。
3. 高級UI組件庫
高級的UI組件庫可以進一步助力高效的應(yīng)用開發(fā)。HarmonyOS的歐洲研發(fā)團隊基于ArkUI 3.0，構(gòu)建了一些高階組件示例，比如：常用的圖表類組件、瀑布流布局組件等。開發(fā)者可以通過幾行代碼就可以實現(xiàn)復(fù)雜酷炫的UI效果，比如自適應(yīng)的圖片增刪、行列變化，以及相應(yīng)的酷炫動效效果。
示例如下：
圖5 圖表組件
圖6 瀑布流布局組件
4. 多設(shè)備開發(fā)
除了UI開發(fā)套件，ArkUI 3.0圍繞著多設(shè)備開發(fā)，還提供了多維度的方案，進一步簡化開發(fā)：
(1)基礎(chǔ)能力層 ： 包括基礎(chǔ)的分層參數(shù)配置(比如色彩、字號、圓角、間距等)，柵格系統(tǒng)，原子化布局能力(比如拉伸、折行、隱藏等)。
(2)零部件組件層： 包括多態(tài)控件，統(tǒng)一交互能力，以及在此基礎(chǔ)上的組件組合。
(3)面向典型場景： 提供分類的頁面組合模板以及示例代碼。
關(guān)于多設(shè)備開發(fā)，后面我們會有更詳細的文章介紹，請大家持續(xù)關(guān)注。
5. 實時預(yù)覽機制
整個開發(fā)流程中還有一個很重要的方面——預(yù)覽能力，即可以在PC上通過IDE(集成開發(fā)環(huán)境)就可以實時看到應(yīng)用的渲染效果，而無需通過具體設(shè)備來部署運行。預(yù)覽的關(guān)鍵需求主要包括：
(1)一致性渲染： 和目標設(shè)備一致的UI呈現(xiàn)效果。
(2)實時預(yù)覽&雙向預(yù)覽： 改動相應(yīng)的代碼，實時呈現(xiàn)出相應(yīng)UI效果。另外，代碼能夠和UI雙向聯(lián)動，代碼改動的同時UI也實時變更，UI改動的同時代碼也相應(yīng)地變更。
(3)多維度預(yù)覽： 頁面級預(yù)覽、組件級預(yù)覽、多設(shè)備預(yù)覽。
以上這些能力都需要UI編程框架具備相應(yīng)的基礎(chǔ)設(shè)施才能達成。ArkUI 3.0的預(yù)覽器的整體架構(gòu)如下圖所示：
圖7 ArkUI 3.0的預(yù)覽器架構(gòu)
ArkUI 3.0基于底層的畫布通過自繪制實現(xiàn)了不同平臺上一致化的渲染體驗，并通過渲染側(cè)的跨平臺對接層完成了整體渲染效果。另外，ArkUI 3.0通過實時代碼變化檢測和增量編譯機制，再配合前面所提到的高效渲染性能，實現(xiàn)了實時編寫預(yù)覽。
通過ArkUI 3.0的基礎(chǔ)設(shè)施，結(jié)合IDE可視化工具(即預(yù)覽器前端)，就實現(xiàn)了上面的實時預(yù)覽、雙向預(yù)覽等能力，進一步提升了開發(fā)者的開發(fā)效率。
四、結(jié)束語
總體而言，UI編程框架在應(yīng)用開發(fā)中起了至關(guān)重要的作用。目前，擁有全新開發(fā)范式的新一代的UI框架——ArkUI 3.0走出了堅實的第一步，并已開始支撐更多的關(guān)鍵應(yīng)用。接下來，除了基礎(chǔ)設(shè)施的持續(xù)完善，我們會重點支持生態(tài)擴展，主要包括高級UI能力的提升，比如三方地圖，游戲的融合，以及Web能力增強等。同時，我們也會圍繞跨設(shè)備、性能體驗持續(xù)地創(chuàng)新。歡迎廣大的開發(fā)者加入進來，一起探索，一起改進，共建萬物互聯(lián)的應(yīng)用生態(tài)!未來，有跡可循!
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
