HDC技術分論壇:HarmonyOS新一代UI框架的全面解讀

語言: CN / TW / HK

作者:yuzhiqiang,UI程式設計框架首席技術專家

在Harmony 3.0.0開發者預覽版中,包含了新一代的宣告式UI框架ArkUI 3.0、多語言跨平臺編譯器ArkCompiler 3.0、跨端開發工具DevEco Studio3.0,以及基於TS/JS語言的API 7,全面提升開發者體驗。

本期,我們要為大家重點介紹HarmonyOS新一代宣告式UI框架ArkUI 3.0。

一、UI程式設計框架

在介紹ArkUI 3.0之前,我們先來簡要了解一下什麼是UI程式設計框架。

UI程式設計框架,是為應用開發者提供的開發UI的基礎設施,主要包括UI控制元件(按鈕/列表等),檢視佈局(擺放/排列相應的UI控制元件),動畫機制(動畫設計以及效果呈現),互動事件處理(點選/滑動等),以及相應的程式語言和程式設計模型等。從系統執行的維度來看,UI程式設計框架也包括一個執行時,負責應用在系統中執行時所需的資源載入、UI渲染和事件響應等。

總體而言,UI程式設計框架提供了開發以及執行UI介面所需要的框架能力,主要架構如下圖所示:

1.jpg

​圖1 UI程式設計框架

  • 開發模型: 對開發者提供開發正規化、UI控制元件/佈局/動效/互動、程式語言等。它體現的是開發效率與難易程度。
  • 執行框架: UI介面渲染及互動的基礎能力框架,包括相應的佈局引擎、控制元件機制、動效引擎、事件機制、渲染管線等,並結合語言虛擬機器和圖形引擎,將開發者的程式執行在具體系統平臺上。它體現的是應用執行的效能體驗。
  • 平臺適配: 承載框架的具體作業系統或平臺適配層。

UI程式設計框架的關鍵需求,主要有以下兩類:

  1. 開發效率: 包括程式碼量、學習曲線、工具、社群、三方庫完備度等。
  2. 效能體驗: 包括啟動速度、幀率、響應時延、酷炫效果、資源佔用等。

另外,隨著智慧裝置的急劇增長,UI程式設計框架還需要考慮如何更好地適配不同裝置的差異性,包括裝置形態差異(比如螢幕形狀、尺寸、解析度、互動模式等),以及裝置能力差異(比如記憶體、CPU、GPU等)。 

二、ArkUI框架的演進

為了更好地滿足開發效率和效能體驗等相關的需求, ArkUI 3.0綜合考慮了UI渲染以及語言和執行時,圍繞著極簡開發、高效能、跨裝置跨平臺進一步演進。下圖描述了ArkUI整體架構的演進:

2.jpg

圖2 ArkUI框架演進

圖的左側是2020年釋出的JS UI框架的架構示意圖。它主要支援類Web的前端開發正規化,通過DSL(domain-specific language,領域特定語言)轉換層,跨語言對接到宣告式UI後端引擎,並結合JS引擎完成整體UI渲染。圖的右側是新的ArkUI 3.0框架,主要有以下幾個關鍵的變化:

(1)引入了新一代的宣告式UI開發正規化,實現極簡的UI描述語法。

(2)設計了統一的前後端扁平化渲染機制,進一步提升UI渲染的效能並降低記憶體消耗。

(3)深度結合ArkCompiler 3.0的方舟編譯器和方舟執行時,提升語言的執行效能和跨語言通訊能力。

(4)在工具方面,針對新一代的宣告式UI開發正規化構建了新的編譯工具鏈和預覽引擎,提供了所見即所得的實時預覽機制。

另外,在ArkUI 3.0框架中,類Web正規化會繼續保留,即類Web正規化和新一代的宣告式UI正規化都可以支援,可以各自獨立使用,但不能混用。

三、ArkUI 3.0的關鍵特性

接下來我們展開詳細介紹一下ArkUI 3.0的關鍵特性。

1. 新一代的宣告式UI開發正規化

具體而言,ArkUI 3.0中的新一代宣告式UI開發正規化,主要特徵如下:

(1)基於TypeScript擴充套件的宣告式UI描述語法,提供了類自然語言的UI描述和組合。

(2)開箱即用的多型元件。多型是指UI描述是統一的,UI呈現在不同型別裝置上會有所不同。比如Button元件在手機和手錶會有不同的樣式和互動方式。

(3)多維度的狀態管理機制,支援靈活的資料驅動的UI變更。

下面我們以一個具體的示例來說明新一代宣告式UI開發正規化的基本組成。如圖3所示的程式碼示例,UI介面會顯示一個“Hello World”的文字和一個“Click me”按鈕。當用戶點選“Click me”按鈕時,字串變數myText的值會從“World”變為“ACE”,文字最終顯示為“Hello ACE”。

3.jpg

圖3 宣告式UI開發正規化的基本概念

以上示例中所包含的宣告式UI開發正規化的基本組成說明如下:

  • 裝飾器: 用來裝飾類、結構體、方法以及變數,賦予其特殊的含義,如上述示例中@Entry、@Component、@State都是裝飾器。@Component表示這是個自定義元件;@Entry則表示這是個入口元件;@State表示元件中的狀態變數,這個狀態變化會引起UI變更。
  • 自定義元件: 可複用的UI單元,可組合其它元件,如上述被@Component裝飾的struct Hello。
  • UI描述: 宣告式的方式來描述UI的結構,如上述build()方法內部的程式碼塊。
  • 內建元件: 框架中預設內建的基礎和佈局元件,可直接被開發者呼叫,比如示例中的Column、Text、Divider、Button。
  • 事件方法: 用於新增元件對事件的響應邏輯,統一通過事件方法進行設定,如跟隨在Button後面的onClick()。
  • 屬性方法: 用於元件屬性的配置,統一通過屬性方法進行設定,如fontSize()、width()、height()、color()等,可通過鏈式呼叫的方式設定多項屬性。

上述示例中,用@State裝飾過的變數myText,包含了一個基礎的狀態管理機制,即myText的值的變化,會引起相應的UI變更(Text元件)。ArkUI 3.0還提供多維度的狀態管理機制。和UI相關聯的資料,不僅僅在元件內使用,還可以在不同元件層級間傳遞,比如父子元件之間,爺孫元件之間,也可以是全域性範圍內的傳遞,還可以是跨裝置傳遞。另外,從資料的傳遞形式來看,可以分為只讀的單向傳遞和可變更的雙向傳遞。開發者可以靈活的利用這些能力來實現資料和UI的聯動。

ArkUI採用嵌入式領域特定語言(embedded Domain Specific Language, eDSL)的形式,結合宿主語言能力實現UI開發。通過eDSL,結合語法糖或者語言原生的超程式設計能力,設計了統一的UI開發正規化,並能夠結合不同語言來實現應用的邏輯處理部分。

2. 關鍵渲染效能

下面通過一個簡單的示例程式碼,為大家講述從程式碼到UI顯示的整體渲染流程。如圖4所示,此示例會在UI介面顯示一個“Click me”按鈕,按鈕下面同步顯示按鈕的點選次數。當用戶點選按鈕時,下面的點選次數會相應增加。

4.jpg

圖4 整體渲染流程

整個渲染過程分為兩個階段:

(1)初始顯示流程(步驟①~⑤)

① 原始碼通過相應的工具鏈,編譯為帶有型別標誌的目標檔案,同時也包含了如何建立UI結構資訊的指令流。

② 通過跨語言呼叫並生成了C++層Component樹(UI描述層)。

③ 通過Component樹進一步生成Element樹。Element是Component的例項,表示一個具體的元件節點,它形成的Element樹負責維持介面在整個執行時的樹形結構,方便計算更新時的區域性更新演算法等。

④ 對於每個可顯示的Element都會為其建立對應的RenderNode。RenderNode負責一個節點的顯示資訊,它形成的Render樹維護著整個介面渲染需要用到的資訊,包括位置、大小、繪製命令等。後續的佈局、繪製都是在Render樹上進行的。

⑤ 實現真正的渲染並顯示繪製結果。

(2)按鈕被點選後的顯示流程(步驟⑥~⑪)

⑥ 點選事件傳遞到元件,元件的onClick事件方法被觸發執行。

⑦ 由於onClick事件方法中@State註解過的變數改變了,相應getter/setter函式會被觸發。

⑧ 狀態管理模組定位出關聯的UI元件。

⑨ 狀態管理模組更新相應的Element樹的資訊。

⑩ 更新相應的UI元件的渲染資訊。

⑪ 介面顯示,與⑤類似。

整個渲染過程中所需的關鍵能力,除了極簡的開發正規化本身,主要包含以下三個部分:

  • 編譯優化以及跨語言呼叫。 結合目標檔案中的型別資訊標誌,ArkCompiler會實現相應的程式碼優化。另外,ArkCompiler也提供了高效的JS/TS -> C++跨語言呼叫機制。
  • 扁平化渲染機制以及小物件組合機制。 元件資訊的結構在前後端有基本一致的表示,進一步減少了轉換開銷,實現了扁平化的渲染。同時,UI元件內部都是通過輕量化物件來按需組合,記憶體消耗也進一步降低。
  • 狀態管理機制。 通過監聽變數的存取操作,實現資料變化的自動化感知並計算出相應的最小化UI元件更新範圍,實現高效的UI變更。

除此之外,長列表渲染是一種典型的應用場景,裡面可能會涉及到大量的資料,如果處理不當,會引起極大影響效能以及資源佔用。ArkUI 3.0針對這類常用的場景,提供了一種LazyForEach懶載入機制,會自動根據具體情況計算出合適的渲染資料,實現資料的按需載入,從而提升UI重新整理效率。LazyForEach可以結合常用的列表類元件(比如List、Grid等)靈活配合使用。

3. 高階UI元件庫

高階的UI元件庫可以進一步助力高效的應用開發。HarmonyOS的歐洲研發團隊基於ArkUI 3.0,構建了一些高階元件示例,比如:常用的圖表類元件、瀑布流佈局元件等。開發者可以通過幾行程式碼就可以實現複雜酷炫的UI效果,比如自適應的圖片增刪、行列變化,以及相應的酷炫動效效果。

示例如下:

5 gif.gif

圖5 圖表元件

6 gif.gif

圖6 瀑布流佈局元件

4. 多裝置開發

除了UI開發套件,ArkUI 3.0圍繞著多裝置開發,還提供了多維度的方案,進一步簡化開發:

(1)基礎能力層: 包括基礎的分層引數配置(比如色彩、字號、圓角、間距等),柵格系統,原子化佈局能力(比如拉伸、折行、隱藏等)。

(2)零部件元件層: 包括多型控制元件,統一互動能力,以及在此基礎上的元件組合。

(3)面向典型場景: 提供分類的頁面組合模板以及示例程式碼。

關於多裝置開發,後面我們會有更詳細的文章介紹,請大家持續關注。

5. 實時預覽機制

整個開發流程中還有一個很重要的方面——預覽能力,即可以在PC上通過IDE(整合開發環境)就可以實時看到應用的渲染效果,而無需通過具體裝置來部署執行。預覽的關鍵需求主要包括:

(1)一致性渲染: 和目標裝置一致的UI呈現效果。

(2)實時預覽&雙向預覽: 改動相應的程式碼,實時呈現出相應UI效果。另外,程式碼能夠和UI雙向聯動,程式碼改動的同時UI也實時變更,UI改動的同時代碼也相應地變更。

(3)多維度預覽: 頁面級預覽、元件級預覽、多裝置預覽。

以上這些能力都需要UI程式設計框架具備相應的基礎設施才能達成。ArkUI 3.0的預覽器的整體架構如下圖所示:

7.jpg

圖7 ArkUI 3.0的預覽器架構

ArkUI 3.0基於底層的畫布通過自繪製實現了不同平臺上一致化的渲染體驗,並通過渲染側的跨平臺對接層完成了整體渲染效果。另外,ArkUI 3.0通過實時程式碼變化檢測和增量編譯機制,再配合前面所提到的高效渲染效能,實現了實時編寫預覽。

通過ArkUI 3.0的基礎設施,結合IDE視覺化工具(即預覽器前端),就實現了上面的實時預覽、雙向預覽等能力,進一步提升了開發者的開發效率。

四、結束語

總體而言,UI程式設計框架在應用開發中起了至關重要的作用。目前,擁有全新開發正規化的新一代的UI框架——ArkUI 3.0走出了堅實的第一步,並已開始支撐更多的關鍵應用。接下來,除了基礎設施的持續完善,我們會重點支援生態擴充套件,主要包括高階UI能力的提升,比如三方地圖,遊戲的融合,以及Web能力增強等。同時,我們也會圍繞跨裝置、效能體驗持續地創新。歡迎廣大的開發者加入進來,一起探索,一起改進,共建萬物互聯的應用生態!未來,有跡可循!