華為-嚴水峰-ArkUI開發框架在OpenHarmony項目中的實踐和演進.pdf

《華為-嚴水峰-ArkUI開發框架在OpenHarmony項目中的實踐和演進.pdf》由會員分享，可在線閱讀，更多相關《華為-嚴水峰-ArkUI開發框架在OpenHarmony項目中的實踐和演進.pdf（35頁珍藏版）》請在三個皮匠報告上搜索。

1、ArkUI開發框架在OpenHarmony項目中的探索和演進嚴水峰 2023年7月 注：文中涉及觀點的表達僅為個人見解，不代表本人雇主或關聯實體的觀點內容概述業界UI開發框架的演進萬物互聯下的UI開發框架新需求ArkUI開發框架的實踐探索和演進業界UI開發框架的演進移動應用的典型結構和運行業務邏輯應用(APP)用戶界面(UI)組件/布局/動效資源/包清單文件共享庫SDK三方庫應用框架系統基礎服務系統能力API生命周期/權限管理包管理UI編程框架（含語言運行時）圖形引擎窗口合成多媒體內核典型的應用結構系統運行環境事件交互業界UI開發框架的演進UI編程框架簡介用 戶 視 角視 覺交 互體 驗開 發

2、 者 視 角編 程 語 言開 發 界 面業 務 邏 輯系 統 視 角運 行 環 境圖 形 顯 示U I 編 程 框 架運行框架渲染管線動效引擎UI組件事件機制語言運行時開發模型編程語言開發范式UI/API布局引擎平臺適配平臺能力擴展平臺/系統服務適配圖形引擎業界UI開發框架的演進UI開發框架編程模型命令式UI vs 聲明式 UI Apple，Google 都選擇聲明式UI作為新一代應用開發模式，并在底層重構相應的UI組件設計聲明式UI：UI綁定響應式數據，更高效，開發者只要關注數據提供類自然語言的聲明式描述，更直觀命令式UI 面向過程聲明式UI 面向結果StateContainerImageT

3、ext“oldName”ContainerImageText“newName”Rebuild()Data：name_=“oldName”name_=“newName”Data：name_=“newName”ControllerContainerImageText“oldName”ContainerImageText“newName”findView()setText(“newName”)業界UI開發框架的演進Android UI編程框架的演進（來源：https:/ Compose路線圖性能、高級組件封裝、Material 3 組件集擴展、改進工具（預覽和實時編輯）、多平臺支持業界UI開發框架的

4、演進IOS UI編程框架的演進 UIKitSwiftUIMain.storyboard（頁面描述）UIViewController（視圖控制器)簡潔的聲明式語法高效的設計工具高效動畫機制簡化的數據流高級組件集成多設備適配業界UI開發框架的演進web類UI框架的演進WebPhoneGapCrosswalkFugo+PWA ChromeWebViewWeb模式小程序“脫胎換骨”模式WebFlutterWeex 2.0KUNSkyline混合模式WebReactReact NativeVueWeex 1.0 HBSTalos,業界UI開發框架的演進小結 UI編程框架和語言融合增強 數據綁定&數據變更

5、感知 編譯加速 開發工具向多設備演進 多設備UI 實時預覽、組件級預覽等 UI編程框架的變遷 從命令式UI到聲明式UI 個性化，多設備能力 跨平臺能力提升UI編程方式語言特性融合開發工具萬物互聯下的UI開發框架新場景和新需求1.不同形態的設備不同屏幕 （分辨率/長寬/形狀/尺寸/）不同交互 (觸控/鍵鼠/遙控/語音/3D手勢/)3.不同設備之間的交互無縫流轉/協同/.2.不同能力的設備不同處理能力 (CPU/GPU/NPU/藍牙/)不同規格 (RAM/ROM 百KBGB/.)4.多個主流OS的并存 跨OS 5.內容快速部署的需求 動態化內容部署機制萬物互聯下的UI開發框架UI開發框架設計要素

6、開發范式開發范式 組件庫組件庫/基礎庫基礎庫/三方三方庫庫 調試、調優、預覽調試、調優、預覽 性能性能/內存內存/功耗功耗 能力完備度能力完備度 UIUI設計和交互體驗設計和交互體驗不同設備的不同設備的UIUI適配適配不同設備的能力適配不同設備的能力適配跨跨OSOS的代碼復用和體驗的代碼復用和體驗 動態化內容機制動態化內容機制 應用部署應用部署SDKSDK包大小包大小開發效率性能&體驗跨設備&跨OS其他要素ArkUI開發框架的實踐探索和演進ArkUI開發框架簡介ArkUI開發框架為OpenHarmony應用的UI開發提供了完整的基礎設施，包括簡潔的UI語法、豐富的UI功能（組件、布局、動畫、交

7、互事件、多端適配），以及實時界面預覽工具等，可以支持開發者進行可視化界面開發。ArkUI開發框架的實踐探索和演進ArkUI在OpenHarmony中的位置應用程序應用/元服務應用程序框架系統基礎服務能力 Kits用戶程序框架Ability管理包管理通信服務地理位置服務內核圖形引擎分布式服務多媒體服務HMS支撐平臺編譯器&工具鏈研發工具鏈測試平臺與框架IDE渲染管線動效引擎組件管理事件管理Ark虛擬機/運行時布局引擎圖形棧事件通知公共通信品平臺分布式數據管理分布式調度&資源管理AI安全多媒體設備能力無障礙服務無障礙全球化ArkUI擴展機制后臺任務ArkUI開發框架的實踐探索和演進ArkUI開發框

8、架架構示意ArkUI（極簡聲明式范式+類Web范式+高性能聲明式后端引擎+一致性渲染）應用ArkUI-前端ArkTS/JS方舟工具鏈ArkUI 后端方舟運行時方舟編譯器字節碼本地代碼ArkCompiler（統一字節碼+高效FFI+類型加速）OpenHarmonyHarmonyOSAndroidIOSArkUI開發框架的實踐探索和演進開發效率-ArkTS聲明式范式ArkUI開發框架的實踐探索和演進開發效率-ArkTS聲明式范式EntryComponentstruct MyComponent State msg:string=Hello ArkUI build()Column()Text(this

9、.msg).fontSize(100)組件化，入口定義組件化，入口定義自定義自定義buildbuild函數函數裝飾器裝飾器多維狀態管理多維狀態管理（組件內、組件間、頁面間、全局、分布式）單向傳遞，雙向傳遞單向傳遞，雙向傳遞Extend(Text)function MyTextfancy(fontSize:number).fontColor(Color.Red).fontSize(fontSize)Builder CustomText(label:string,size:number)Text(label).width(size).height(this.size)Builder TextRow

10、(label1:string,label2:string,size:number)Row()this.CustomText(label1,size)this.CustomText(label2,size).width(2*size).height(size)動態擴展組件屬性動態擴展組件屬性動態動態BuildBuild，運行時動態創建內容，運行時動態創建內容State,Prop,Link Provide,ConsumeAppStorage,LocalStoragePersistentStorage,DistributedStorageEnvironment極簡描述 多維狀態 動態組合ArkUI開

11、發框架的實踐探索和演進開發效率-多維狀態管理實現UI和數據綁定ParentComponentsApplicationChildStatePropParentChildStateLinkDescendentPropDescendentLinkDescendentProvideConsumeParentChildParentChildAppStorageLocalStorageStorageLink(key)LocalStorageLink(key)LinkStorageProp(key)LocalStorageProp(key)PropBusiness LogicLink(key)/Prop(k

12、ey)PersistentStorageLink(key)EnvironmentAutomaticDistributedStorageLink(key)狀態管理：組件，頁面，全局，分布式數據傳遞：單向，雙向ArkUI開發框架的實踐探索和演進開發效率-開箱即用組件集Componentstruct IndexPage build()Row()TabBar()Tabs()TimelinePage()AlbumSetPage()Componentstruct TimelinePage build()TabContent()Stack()Grid()LazyForEach(data,(item)=Gri

13、dItem()ImageGridItemComponent(item)豐富的開箱即用的組件，積木式組件組合ArkUI開發框架提供90+90+內置組件，涵蓋多種類型，方便開發者開發復雜頁面。涵蓋主流場景：文本、宮格、列表、行列、Flex、圖表、媒體、導航、滾動、翻頁、按鈕、選擇、畫布等ArkUI開發框架的實踐探索和演進開發效率-基于數據驅動設計的隱式和顯式動效屬性變更自動添加動畫支持100+屬性ArkUI開發框架的實踐探索和演進開發效率-基于數據驅動設計的隱式和顯式動效顯式動畫閉包驅動數據變更動效ArkUI開發框架的實踐探索和演進開發效率-更加強大的工具DevEco Studio（OpenHar

14、mony）高效智能代碼編輯低代碼可視化開發多端雙向實時預覽（雙向預覽、實時預覽、動態預覽、組件預覽以及多端設備預覽）全新構建體系一站式信息獲取高效代碼調試https:/ struct CompA State aVar:number=7;build()Column()Text(“Hello$this.aVar”).width(100).height(50)源代碼:class CompA extends View private ObservedPropertySimple _aVar=new ObservedPropertySimple(/*default value*/7,/*subscrib

15、e View for get+set access notifications*/this);private get aVar():number return this._aVar.get();private set aVar(newValue:number)this._aVar.set(newValue);private render():void Column.create(.);Text.create(.);Text.setLabel(Hello$this.aVar);Text.width(100);Text.height(50);Column.pop();編譯后代碼:ColumnCom

16、ponentBoxComponentTextComponentColumnElementBoxElementtTextElementRenderElementComponent源代碼（ArkTS）編譯工具鏈中間代碼方舟運行時ArkUI框架運行時ArkUI框架API組件UI結構數據proxygettersetterText(aVar)clickUI邏輯組件數據依賴表aVar=7收集依賴關系()=aVar=10通知目標組件前后端一體化渲染管線+按需渲染+AOT=對標原生的體驗ArkUI開發框架的實踐探索和演進性能&體驗-高效的視圖比較算法組件級重算高效重用推斷任意節點數據改變新的9究竟是1，還是2

17、，還是新增的？編譯期預處理+運行期Element層類型復用機制任意節點數據改變節點級重算進一步優化 去除視圖比較算法，不會存在二次重建節點問題。數據綁定在節點上，數據改變只更新對應節點的屬性ArkUI開發框架的實踐探索和演進性能&體驗-精簡樹形結構和數據更新路徑ComponentTreeElementTreeRenderTree數據依賴123FrameNodeTree數據依賴1231.多節點組合模型 單節點+屬性組合模型 進一步扁平化&按需構建2.數據依賴組件級更新 細粒度函數級更新 進一步精細化更新范圍3.三顆樹 一顆樹 進一步提升組件構建速度&降低內存渲染速度提升20%內存降低30%指令數

18、減少20%組件結構更新協同渲染信息ArkUI開發框架的實踐探索和演進性能&體驗-統一UX設計風格和交互體驗針對30+內置組件統一UX設計風格，支持默認配色、多態交互、圖形效果、動效優化。ArkUI開發框架的實踐探索和演進跨設備UI適配關鍵能力典型布局：聯合UX對常用組件的組合場景作出定義和輸出Sample Code，包含：頂部、入口、分欄、瀑布、Banner、視頻列表、視頻宮格、圖文、圖片詳情等）頂部入口圖標場景樣例1圓角尺寸邊框字體顏色分層參數/主題風格多態組件交互歸一u 分層參數：支持多設備上采用不同的主題風格，滿足應用的個性化皮膚u 頁面主題：深淺主題，自定義主題樣式u 交互歸一：屏蔽設

19、備差異統一交互邏輯視覺交互多設備個性化視覺/交互歸一3響應式布局：響應式組件+響應式能力u 響應式布局：6個響應式組件（List、Navigation、Grid、Swiper、Tabs、柵格布局組件）、3個響應式能力（柵格系統、自定義斷點系統、媒體查詢）u 自適應布局：4個常用自適應組件+7個自適應能力（隱藏、延伸、縮放、均分、占比、拉伸、折行）自適應布局：自適應組件+自適應能力布局能力多設備典型場景樣例2多設備響應式/自適應布局Row/Column/Stack/Flex自適應布局組件斷點自適應能力列表側邊欄網格柵格斷點系統媒體查詢分欄瀑布流圖文/圖片詳情等大圖大字體典型場景典型場景樣例Ark

20、UI開發框架的實踐探索和演進跨設備組件狀態遷移ArkUI開發框架的實踐探索和演進跨設備路由棧遷移ArkUI開發框架的實踐探索和演進跨OS工程開發 已有Android/iOS基礎支持。https:/ OS適配/API OS適配/工具鏈語言虛擬機/運行時橋接層ArkUI開發框架的實踐探索和演進跨OS工程開發ArkUI開發框架的實踐探索和演進生態擴展-自繪制引擎(地圖/游戲等)接入三方自繪制引擎(地圖/游戲等)接入：低 成 本 框 架 邏 輯 對 開 發 者 透 明 獨 立 管 理 插 件 可 獨 立 編 譯，發 布 e g l/g l e s 標 準 跨 平 臺，獨 立 線 程 共 享 紋 理 無

21、 冗 余 的 數 據 拷 貝，插 件 和 框 架 渲 染 解 耦下一步展望能效提升ColumnRowTextText扁平化渲染管線方舟強類型語言運行時RowTextRowText編譯期處理（類型信息、并行樁點）并行化語法擴展UI組件構建并行State裝飾器settergetter響應式狀態管理 進一步細粒度化屬性級綁定&更新運行構建或視圖更新布局和渲染編譯顯示UI任務池細粒度布局邊界判定布局并行UI 線程池，GPU線程，IO線程，API異步調用線程并發任務接入統一調度下一步展望生態拓展原生應用元服務小程序移植/轉換全新開發1234三方庫圖形引擎JS/TS虛擬機跨平臺抽象層平臺橋接層聲明式UI后端擴展機制Web引擎Web標準聲明式范式-ArkTSAPIWeb標準子集高效，輕量化，跨平臺運行時（對標原生體驗）高效跨平臺API擴展機制+基于WASM能力擴展相關技術演進并行化持續改造&提升跨平臺能力了解更多相關信息OpenHarmony公眾號HarmonyOS公眾號相關鏈接：OpenHarmony官網：https:/