解密HarmonyOS UI框架
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
萬物互聯(lián)的時代，作為應(yīng)用開發(fā)者，你是否面臨著同一應(yīng)用要部署在手機(jī)、手表、大屏、車機(jī)、平板、電腦甚至更小的IoT設(shè)備上的難題?你是否花費大量時間在不同設(shè)備的屏幕適配上?你是否面臨同一應(yīng)用需要支持超十種分布于不同設(shè)備的不同交互方式的挑戰(zhàn)?
開發(fā)多設(shè)備場景下應(yīng)用，開發(fā)者面臨著設(shè)備形態(tài)差異帶來的開發(fā)挑戰(zhàn)：不同設(shè)備屏幕大小、屏幕分辨率以及屏幕形狀不盡相同，由此讓不同設(shè)備UI樣式開發(fā)難度加大。同時，不同設(shè)備上交互模式不同也帶來了交互維度的開發(fā)挑戰(zhàn)。
面對設(shè)備形態(tài)差異帶來的開發(fā)挑戰(zhàn)，HarmonyOS針對性地提出了兩方面的解決策略，一方面是圍繞UI維度，另一方面圍繞交互維度。
針對終端形態(tài)差異挑戰(zhàn)的解決策略
圍繞UI維度的解決策略，主要包括以下方面：
- 多態(tài)控件
同樣一個控件，在不同設(shè)備上有不同的形態(tài)以及交互模式，這就是多態(tài)。舉個例子，一個開關(guān)按鈕在不同設(shè)備上的UI效果訴求是不一樣的。在手機(jī)一般采用滑動條的形式，大屏基本上是打勾打叉選擇的形式，而不是滑動條。
然而大家會發(fā)現(xiàn)，雖然形態(tài)不同，但對描述來說，或者實現(xiàn)的結(jié)果，都是相同的。HarmonyOS的多態(tài)控件可以做到對同一種按鈕做一樣的描述，但在不同設(shè)備上有不同呈現(xiàn)，有不同的體驗，同時設(shè)計能夠直接貼合相應(yīng)設(shè)備的設(shè)計規(guī)范。HarmonyOS通過多態(tài)控件做”表述統(tǒng)一”從而幫助開發(fā)者進(jìn)一步降低開發(fā)成本。
- 動態(tài)布局
我們都知道，單單解決控件問題是不夠的，開發(fā)還會涉及布局的問題。布局問題如果再細(xì)分的話，又可分兩個維度：內(nèi)容框架和界面元素。
內(nèi)容框架 指的是布局的整個內(nèi)容，比如說橫屏或豎屏，內(nèi)容呈現(xiàn)大致形式是什么樣。
界面元素 是指布局在內(nèi)容框架中的元素，開發(fā)需要解決的問題是它們應(yīng)該如何排列，能否進(jìn)行擴(kuò)展等問題。
HarmonyOS通過動態(tài)布局，達(dá)到按需取用。本質(zhì)上來說，就是針對不同分辨率可選不同的布局。同時，在分辨率變化的情況下，提供柵格化原子化布局能力，針對UI元素進(jìn)行組合，如縮放，自動折行，自動隱藏等。通過這種基礎(chǔ)能力實現(xiàn)更好的屏幕適配，幫助開發(fā)者在屏幕布局上做進(jìn)一步增強(qiáng)。
圍繞交互維度，HarmonyOS引入交互事件歸一的解決策略：
- 事件歸一
雖然我們都知道在不同平臺上交互模式是不一樣的，但其想達(dá)到的效果卻是一樣的，在這樣想法的驅(qū)使下，HarmonyOS通過框架層，屏蔽輸入差異，把不同的輸入變成統(tǒng)一的事件，把交互事件的接口盡量一致化， 使得開發(fā)者在響應(yīng)控件時，只需關(guān)心一致化的事件，達(dá)到更好的一致化響應(yīng)交互行為。
以上是HarmonyOS針對設(shè)備形態(tài)差異挑戰(zhàn)的解決策略。這些解決策略將被封裝成HarmonyOS UI框架，讓開發(fā)者可以通過調(diào)用相應(yīng)接口直接開發(fā)，提高開發(fā)效率。
HarmonyOS UI框架
HarmonyOS的這一套UI框架，全稱為AbilityCross-platform Environment，ACE UI框架，可支持主流的開發(fā)語言——Java以及JavaScript，分別對應(yīng)命令式和聲明式兩種開發(fā)模式。
對于Java UI框架，命令式開發(fā)模式而言，相對來說都是細(xì)粒度的API，完全由開發(fā)者控制。開發(fā)者操縱UI實現(xiàn)具體變更，通過調(diào)用API來實現(xiàn)整個UI編程的目標(biāo)。這是一種由開發(fā)者來處理的較為常用的開發(fā)模式。
JavaUI框架基本架構(gòu)是上層細(xì)粒度UI編程接口，中間是命令式UI后端引擎(包含UI組件，布局計算，視圖管理….),緊接著是跨平臺渲染引擎基礎(chǔ)設(shè)施。
同時，HarmonyOS也提供JavaScript UI框架，即JS UI 框架，聲明式模式，對UI描述是相對高層的，本質(zhì)上聲明式對UI操縱主要靠描述，對于開發(fā)者來說，只需描述即可，剩下的UI變更是通過數(shù)據(jù)驅(qū)動實現(xiàn)，這些變更的真正操作是通過框架層來處理。相當(dāng)于開發(fā)者只要通過聲明式描述好UI，以及明確什么樣的數(shù)據(jù)狀態(tài)改變，涉及什么樣的UI變更，其余由框架層來具體實現(xiàn)。
JS UI框架基本架構(gòu)是上層為高層UI描述接口，中間是聲明式UI后端引擎，包含UI組件，布局計算，視圖管理….，緊接著是跨平臺渲染引擎基礎(chǔ)設(shè)施。
下面讓我們展開看一下 JS UI和Java UI的框架 到底是怎么樣的。
JS UI 框架
- 總體架構(gòu)
從上面的圖可以看到，JS UI 總體架構(gòu)大的維度主要分為前端和后端。
一、前端
前端主要是JavaScript的前端框架。這里采用的是類web的前端開發(fā)模式，開發(fā)相應(yīng)的UI。
二、后端
后端主要分為以下幾個部分：
- UI 引擎部分
即呈現(xiàn)的構(gòu)建部分**，這當(dāng)中包含JS執(zhí)行引擎本身**， 由C++構(gòu)建的聲明式UI后端引擎(包括UI組件實現(xiàn)、布局視圖、動畫事件)和渲染引擎，這些共同構(gòu)建了整個UI的呈現(xiàn)。
- 中間轉(zhuǎn)換層
通過中間轉(zhuǎn)化層，把前面JS的UI描述，轉(zhuǎn)化成聲明式UI，讓后端引擎去執(zhí)行。
- 能力擴(kuò)展
HarmonyOS提供“擴(kuò)展API“包括各種各樣的分布式能力、系統(tǒng)的基礎(chǔ)能力。通過能力擴(kuò)展基礎(chǔ)設(shè)施，開發(fā)者可以調(diào)用JavaScript API來實現(xiàn)更豐富的邏輯功能。
- 跨平臺的適配層
從設(shè)計上來說，HarmonyOS可以實現(xiàn)跨設(shè)備跨OS。主要是因為整個渲染路徑是由后端完全自己繪制的，通過一個底層畫布來實現(xiàn)UI功能，這樣對OS的依賴相對較少，能達(dá)到跨平臺的效果。
- 平臺橋接層
從架構(gòu)設(shè)計上來說，我們是可以運(yùn)行在HarmonyOS上，其實也可以在其他OS上運(yùn)行。這里前提條件是HarmonyOS會與其他OS內(nèi)的基礎(chǔ)設(shè)施以及基礎(chǔ)能力做橋接，從而達(dá)到能力擴(kuò)展的目標(biāo)。
當(dāng)然同時我們離不開工具的幫助，通過IDE包括其他相應(yīng)一些工具鏈就實現(xiàn)通過JS開發(fā)后，部署到不同的設(shè)備上的目標(biāo)。
總的來說，通過聲明式UI框架，借用類Web前端的簡易開發(fā)能力，同時結(jié)合后端引擎的高性能能力，HarmonyOS幫助開發(fā)者達(dá)到易開發(fā)，高性能的目標(biāo)。通過HarmonyOS的跨平臺渲染基礎(chǔ)設(shè)施，能夠達(dá)到相對比較一致的跨平臺的體驗。如電視或手表上的預(yù)覽路徑、渲染路徑基本保持一致，達(dá)到一個較好的實時預(yù)覽效果，從而得到較一致的渲染體驗。
- 運(yùn)行流程
通過上述流程圖我們可以看到，當(dāng)一個應(yīng)用啟動時，最早是從Ability(HarmonyOS運(yùn)行的最基礎(chǔ)單元)出發(fā)，Ability內(nèi)有UI的框架部分。前端框架的整體職責(zé)就是加載解析和運(yùn)行JS應(yīng)用，并完成前端開發(fā)范式的組件樹到聲明式后端渲染框架層Component樹的復(fù)雜對接。后端渲染框架是實現(xiàn)整個渲染流水線管理的核心部分，維護(hù)了三棵渲染相關(guān)的樹：Component樹、Element樹和Render樹，一些耗時的IO操作，例如圖片相關(guān)的獲取和加載放在了單獨的IO線程，這些都納入到了容器的統(tǒng)一管理之中，配合動畫、事件等，完成UI線程的繪制，最終由渲染引擎負(fù)責(zé)光柵化以及合成上屏，構(gòu)建了高效的渲染流水線。
這當(dāng)中完全是多線程設(shè)計的，也就是說前端部分，JS 線程，UI線程，以及IO線程都可以并行化處理，從而達(dá)到較好的執(zhí)行效率，以及較高的性能，這是一個大致ACE JS的運(yùn)行流程。
- 應(yīng)用示例
我們來看具體一個例子——一個音樂應(yīng)用，可以在手表和大屏上同時運(yùn)行。
代碼組成分為三個部分——模板、樣式及業(yè)務(wù)邏輯。
- 模板
基本描述了整個UI結(jié)構(gòu)。
- 樣式
對整個UI結(jié)構(gòu)的呈現(xiàn)模式進(jìn)行描述。
- 業(yè)務(wù)邏輯
具備數(shù)據(jù)綁定的聲明，以此獲取數(shù)據(jù)之間的關(guān)聯(lián)。擴(kuò)展能力聲明，可調(diào)用系統(tǒng)里面各種各樣的Ability來做功能擴(kuò)展。
在多UI自適應(yīng)上面，HarmonyOS支持業(yè)界主流機(jī)制，做到動態(tài)布局以及UI自適應(yīng)能力。
- JS UI 為百K級設(shè)備提供輕量化框架
上述說提到的都是關(guān)于富設(shè)備的設(shè)備UI架構(gòu)。所謂的富設(shè)備，就是內(nèi)存相對比較充足的，至少有512Mb以上的。那對于輕設(shè)備，內(nèi)存較小的設(shè)備來說，HarmonyOS提供輕量化框架。
在輕量化框架中，HarmonyOS把一些核心框架做下沉，C++化及提供輕量級的JS引擎，包括UI組件，達(dá)到非常輕量的目標(biāo)，通過統(tǒng)一的開發(fā)范式，可以在百K資源上運(yùn)行起來。但由于是在輕量化的框架設(shè)備上，能力還是有限的，有些資源的限制可能API沒辦法提供，但對公共部分的API是完全共通的。
Java UI框架
與JS的聲明式不同，Java更多是面向命令式開發(fā)模式，從API維度而言會更加豐富更加細(xì)粒度一點。也擁有多態(tài)控件，布局等能力。
- 總體架構(gòu)
從邏輯上來說，它的整個架構(gòu)分為五個部分。
- JavaUI框架接口層
包括控件、布局、動效和描述。
- 多態(tài)控件、布局和動效實現(xiàn)
核心的C++層，有相應(yīng)的多態(tài)控件布局，各種各樣動效實現(xiàn)。
- 視圖管理
生成UI控件對應(yīng)的View對象，管理View對象的生命周期(更新，掛載，卸載，刪除),維護(hù)View對象組成的UI hierarchies關(guān)系。
- 渲染樹
維護(hù)View對象對應(yīng)的Render Node, 維護(hù)UI組件變更引起的渲染樹的變更，生成Render Node對應(yīng) Draw Command。
- 2D/3D渲染引擎
執(zhí)行Draw Command, 生成UI控件所包含的線條，面，文本對象。
最終到系統(tǒng)的合成，總體構(gòu)成了整個ACE Java架構(gòu)。
- 渲染流程
這里簡要描述整個渲染流程。
JavaUI渲染采用多線程設(shè)計，分為幾個階段：在應(yīng)用框架部分，創(chuàng)建窗口，創(chuàng)建相應(yīng)的Java UI接口。在資源加載之后，由相應(yīng)的UI框架組件部分轉(zhuǎn)化成Native視圖，Native視圖包括整個控件布局實現(xiàn)、動效實現(xiàn)、視圖抽象、事件處理、渲染抽象等，同步UI線程，渲染樹會交給UI框架渲染部分(GPU線程)來做相應(yīng)的渲染以及最終的合成，這就是整個ACE Java的渲染過程。
- 應(yīng)用示例
我們來看一個Java例子，其實跟傳統(tǒng)的或說常用的Java開發(fā)模式類似。
通過XML描述整個布局，這當(dāng)中少不了多態(tài)控件的支撐。通過屬性和值來制定具體XML指定不同樣式，以此創(chuàng)建組件。創(chuàng)建完成后，開發(fā)者可以設(shè)置各種各樣的交互、相應(yīng)的事件處理及后續(xù)UI變更。當(dāng)然，HarmonyOS提供相應(yīng)的API為后續(xù)變更做支撐。
當(dāng)然多設(shè)備場景開發(fā)還是有很多挑戰(zhàn)，需要我們持續(xù)不斷地增強(qiáng)和提升。當(dāng)然也希望眾多的開發(fā)者一起加入進(jìn)來，與我們一起圍繞著跨設(shè)備開發(fā)相關(guān)內(nèi)容，多一些碰撞，共同把多設(shè)備開發(fā)體驗逐步增強(qiáng)。
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
