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