1. ArkUI开发框架的创新和生态探索 华为UI框架首席架构师 / 余枝强

2.

3. ArkUI开发框架的创新 和生态探索

4. 议程 • ArkUI - 总览 • ArkUI - 设计 • ArkUI - 生态

5. UI开发框架概述 用户视角： • 视觉 • 交互 开发模型 • 体验 开发者视角： • 编程语言 • 开发界面 UI开发框架 运行框架 UI/ API 开发 范式 布局引擎 控件机制 动效引擎 事件机制 渲染管线 图形引擎 • 业务逻辑 系统视角： 平台适配 平台抽象/桥接 • 运行环境 • 图形显示 目标：更高的开发效率，更好的性能，适应更多的设备/平台 编程 语言 语言 虚拟 机

6. UI开发框架的演进 Flutter 1.0 SwiftUI 1.0 UI开发框架 语言 SwiftUI 2.0 • UI框架的变迁 SwiftUI 3.0 SwiftUI 4.0 Swift5.7 Kotlin1.7 Kotlin1.0 Jetpack Compose 支持 Kotlin支持 工具 （以Android Studio为例） 2014 Flutter 3.3 Jetpack Compose Jetpack Compose 1.3 1.0 Jetpack Compose Preview Swift1.0 Flutter 2.5 2016 2017 2018 2019 • UI框架和语言融合进一步增强 2020 多设备工程/ 部署 /布局检查 2021 2022 • 开发工具向多设备演进 • 从命令式UI到声明式UI • 数据绑定&数据变更感知 • 多设备UI • 跨平台能力提升 • 编译加速 • 实现预览，组件级预览等 • 个性化，多设备能力

7. 编程语言热度排行榜 2012-2022 综合考虑了Github & StackOverflow JS/TS持续领先 图片来源于RedMonk官网： https://redmonk.com/rstephens/2022/03/28/top-20-jan-2022/

8. 对标原生：JS/TS运行时现状&不足 JavaScript TypeScript Parser 类型信息只 在编译时用 Abstract Syntax Tree Feedback Interpreter Byecode Generator Bytecode JIT AOT 主要不足 • 未能在运行时有效利用类型信息；缺失精细化类型 • AOT缺失 • 细粒度的并行化缺失

9. 对标原生：JS/TS相关UI框架现状&不足 JS应用层代码 WebView Surface 应用层 JS Bridge 自绘制引擎 + 语言运行时 OS层 Surface 1 关键技术：标准Web渲染模式， 响应式前端框架 典型代表：Web引擎 主要不足 应用层代码 OS 原生组件 Event 资源占用高， 性能较弱 JS应用层代码 Surface Event 2 关键技术：JS+原生组件直通渲染， 轻量布局引擎&JS引 擎 典型代表：ReactNative Event 3 关键技术： 自绘制，AOT， 组合式按需渲染 典型代表： Flutter 依赖原生的渲染路径 语言性能问题&桥接层损耗 平台一致性弱 独立语言生态，如需兼容JS 生态需额外桥接，性能和内存 都有额外损耗 • 性能体验，以及性能体验和生态的平衡 • HTML+CSS+JS三段式开发方式和业界领先的声明式开发 （SwiftUI）相比有较大差距，需进一步提升

10. 业界相关的改进持续进行， 但缺失系统性的跨越！

11. ArkUI – 鸿蒙生态的开发框架 ArkUI开发语言&运行时： 基于JS/TS进一步演进 • 自研编译器/运行时 – 类型信息优化，AOT，… • 在JS/TS基础上，扩展了声明式UI语法 • 后续会进一步扩展更多语言/标准库的能力 – 轻量级并行/分布式/严格类型等 ArkUI框架设计： 极 简 开 发 / 高 性 能 / 跨 设 备 跨 平 台 • 新一代声明式开发范式 • 一体化渲染管线 • 组件化，跨平台化

12. ArkUI开发框架概览 ArkUI ArkCompiler （极简声明式范式+类Web范式+高性能后端引擎+一致性渲染） （统一字节码+高效FFI+类型加速） 应用 声明式UI范式  类Web范式 ArkUI - 前端 转换层 方舟编译器 和运行时 声明式UI后端引擎 （前后端一体化渲染管线） I D E / 工 具 链 eTS/JS 方舟工具链（端外编译，调试调优） 字节码/二进制 ArkUI-后端 渲染引擎 方舟运行时 平台适配层 & 平台桥接层 本地代码 OpenHarmony/HarmonyOS Android iOS … 极简开发，高性能，跨设备跨平台 方舟编译器

13. 装饰器 自定义组件 UI描述 ArkUI声明式范式 概念简介 状态管理 内置组件 属性方法 事件方法

14. ArkUI - 声明式范式关键特征示例 1、极简自然声明式语法， 统一UI表达 2、多态组件/动态布局， 简化多设备UI适配 3、多维度状态管理， 简化数据传递&UI变更 极简语法 – 动效 @Component struct ImageGridItemComponent { build() { Stack() { Image(this.pixelMap) .sharedTransition(this.shareId) }.onClick(() => { // 路由跳转 router.push({uri:'/pages/PhotoItem'}) }) } } 类自然语言的UI结构描述，开箱即用的多态组件，积木式组件组合 @Component struct IndexPage { build() { Row() { TabBar() Tabs() { TimelinePage() AlbumSetPage() } } } } @Component struct TimelinePage { build() { TabContent() { Stack() { Grid() { LazyForEach(data, (item) => { GridItem() { ImageGridItemComponent(item) } …… } 极简语法 – 多维状态管理 DistributedStorage.Link(‘isNav’) @Entry @Component Struct Navigator{ @StorageLink (‘isNav’) isNav:Boolean … build(){ Column(){ if (this.isNav){ Image()…… } …… }

15. ArkUI - 多维状态管理（UI<>数据）：多层组件，全局，跨设备 Application Persistent Storage Environment Link(key) Distributed Storage AppStorage Ability @Prop @StorageLink(key) 父组件 子组件 @State @Link 父组件 子组件 父组件 @Provide @Link @Consume @Link 孙子组件 业务逻辑 LocalStorage Component @State Link(key) 孙子组件 @StorageProp(key) 父组件 @Prop 子组件 子组件

16. ArkUI运行机制概览 扁平化管线/按需组合/数据绑定/AOT = 对标原生体验的高效渲染 编译工具链 源代码 （.ets） 中间代码 方舟运行时 ArkUI框架运行时 ArkUI框架API ArkUI源代码: @Component struct CompA { @State aVar : number = 7; build() { Column() { Text(“Hello ${this.aVar}”) .width(100) .height(50) } } } 工具链编译后的代码: class CompA extends View { private ObservedPropertySimple<number> __aVar = new ObservedPropertySimple(/* default value */ 7, /* subscribe 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(); } Element Component Column Component Column Element Box Component BoxElementt Text Component TextElement Render 组件数据依赖表 组件 UI结构 Text('{aVar}' ) 逻辑 click () =>aVar = 10 数据 aVar=7 proxy getter setter 收集依赖关系 通知目标组件

17. 相应示例应用代码量 比Java降低~65%，比JS降低~35% 性能 对标安卓原生 对比项 Java JS eTS 代码行数 ~800 ~280 ~180 文件数 10 6 2 实现难度 难 中 易 性能场景 ArkUI Android View 启动时延 (ms) 383 742 滑动时延 (ms) 82.1 81.1 滑动帧率 (fps) 60 60 跳转帧率 (fps) 60 60 初始内存 (MB) 75.83 54.19 峰值内存 (MB) 697.77 888.53 备注：上述数据以电商场景为例，在同一台设备上运行。 更多场景构建中..

18. 单设备  跨设备

19. ArkUI – 跨设备：组件状态迁移 设备A 图片 设备B 列表项 6 图片 列表项 7 搜索文本输入框 搜索文本输入框 列表项 8 列表项 6 列表项 7 列表项 8 ID: Input1, 输入位置:4 ID: List1, 滚动位置:6

20. ArkUI – 跨设备：路由栈迁移 设备A 设备B 路由管理 UI组件 页面路由栈 Page N (uri:xxx/pagen) … Page 2 (uri:xxx/page2) Page 1 (uri:xxx/page1) 路由序列化数据 当前页面路由栈 恢复路由栈 Page N (uri:xxx/pagen) Page N (uri:xxx/pagen) … … Page Y (uri:xxx/pagey) Page 2 (uri:xxx/page2) Page X (uri:xxx/pagex) Page 1 (uri:xxx/page1) 数据处理模块 路由管理模块

21. ArkUI - 生态扩展概览 W3C MiniApp 标准 开发者 社区 原子化服务标准 三方开源库 三方开发工具整 合 工具 框架 组件仓库 关键应用使能 Taro … 地图 游戏 电商 … 跨OS平台扩展 以关键应用为牵引，通过工具、社区协同，逐步夯实相应能力； 并布局标准培育长线影响力

22. ArkUI生态扩展 – XComponent XComponent框架 XComponent 三方实现 ① ② Bridge 插件ID Manager Render Pipeline gl Texture ArkUI 加载 校验 XComponent Logic 纹理ID 同步 共享 egl/gles gl Texture ③ ④ 三方插件（js/so） 三方自绘制引擎(地图/游戏等)接入： ① 低成本 框架逻辑对开发者透明 ② 独立管理 插件可独立编译，发布 ③ egl/gles标准 跨平台，独立线程 ④ 共享纹理 无冗余的数据拷贝， 插件和框架渲染解耦

23. ArkUI生态扩展 – 跨OS平台 OpenHarmony仓 ArkUI OS适配层/工具链/API OS适配 ArkUI/ohos API定义和实现/etc ArkUI OS适配层 Android 工具链 iOS ohos JS API OS适配层 … 类Web范式 声明式范式 声明式UI后端 事件机制 布局系统 动效 渲染管线 … UI组件 Web 引擎 扩展 机制 图形引擎 NDK 跨平台抽象层 平台桥接层 OpenHarmony 目前华为和阿里巴巴，美的，深开鸿一起共建（目前是定向开源），已有Android/iOS初步支持

24. ArkUI跨OS平台项目基础演示 跨平台开发框架SDK和Sample工程构建演示 下载代码->构建SDK->创建工程->编译目标平台可执行文件 同一Sample工程 在iOS和Android上运行示例

25. 小结 • ArkUI设计 - 在TS基础上演进出可对标原生体验的极简声明式开发框架 语言运行时：声明式语法，类型加速，AOT 极简声明式范式；多维状态管理；高效跨设备渲染体验 • ArkUI生态 高级自绘制组件接入 跨OS平台能力

26. One more thing ...

27. 范式升级：2D  3D 3D模型一键引入， 进一步提升开发效率并实现酷炫体验 ！

28. 3D范式原型实现 统一的2D和3D声明式范式; 2D/3D渲染无缝融合 目前处于原型阶段，更多能力构建进行中…

29.

30. 欢迎一起探索，一起打造 更丰富，更具创新的应用生态！ 谢谢！ https://developer.harmonyos.com/cn/develop/arkUI https://gitee.com/openharmony/arkui_ace_engine