DanceUI 原理-如何设计一个 iOS 平台的声明式 UI 框架

1. DanceUI 原理 -如何设计一个 iOS 平台上的声明式 UI 框架陈奕字节跳动-抖音基础技术-研发工程师

2. 目录 01 DanceUI 介绍 02 DanceUI 实现原理 03 业务实践

3.

4. DanceUI 介绍

5. DanceUI 介绍声明式 UI DanceUI 是什么 SwiftUI 生态兼容

6. DanceUI 介绍 —声明式 UI 在 iOS 上使用 UIKit 实现一个列表页的场景

7. DanceUI 介绍 —声明式 UI 在 iOS 上使用 UIKit 实现一个列表页的场景

8. DanceUI 介绍 —声明式 UI 在 iOS 上使用 UIKit 实现一个列表页的场景

9. DanceUI 介绍 —声明式 UI 在 iOS 上使用 UIKit 实现一个列表页的场景

10. DanceUI 介绍 —声明式 UI 在 iOS 上使用 UIKit 实现一个列表页的场景

11. DanceUI 介绍 —声明式 UI iOS 上的声明式 UI —— SwiftUI 1. 直观简洁，所见即所得 2. 数据绑定，逻辑清晰 3. 代码可读性高，维护成本低

12. DanceUI 介绍 —声明式 UI

13. DanceUI 介绍 —声明式 UI iOS 上的声明式 UI —— SwiftUI 1. 版本限制，仅支持 iOS 13 以上 2. Bug 修复依赖系统版本发布 3. 版本差异大，接入成本高局限性

14. DanceUI 介绍 —DanceUI 是什么 DanceUI 是由抖音基础技术团队研发的一个 iOS 平台上的声明式 UI 框架 1. 向下兼容到 iOS 10 2. 与 SwiftUI 的语法和接口完全一致 3. 能力对齐 SwiftUI 4. 版本一致性

15. DanceUI 介绍声明式 UI DanceUI 是什么 SwiftUI 生态兼容

16. DanceUI 介绍 — SwiftUI 生态兼容占位效果可以用 SwiftUI 社区的Shimmer 组件来实现

17. DanceUI 介绍 — SwiftUI 生态兼容占位效果可以用 SwiftUI 社区的Shimmer 组件来实现

18. DanceUI 介绍 — SwiftUI 生态兼容占位效果可以用 SwiftUI 社区的Shimmer 组件来实现

19. DanceUI 介绍 — SwiftUI 生态兼容占位效果可以用 SwiftUI 社区的Shimmer 组件来实现

20. DanceUI 介绍 — SwiftUI 生态兼容占位效果可以用 SwiftUI 社区的Shimmer 组件来实现

21. DanceUI 介绍 — SwiftUI 生态兼容占位效果可以用 SwiftUI 社区的Shimmer 组件来实现

22. DanceUI 介绍 — SwiftUI 生态兼容占位效果可以用 SwiftUI 社区的Shimmer 组件来实现

23. DanceUI 介绍 — SwiftUI 生态兼容 DanceUI 不支持的能力 1. 基于系统高版本 UIView 实现的组件 2. 最新版本 SwiftUI 新增能力，持续开发并向下兼容

24. DanceUI 介绍 — SwiftUI 生态兼容 DanceUI 实现 SwiftUI lab 上项目的炫酷效果

25. DanceUI 介绍 — SwiftUI 生态兼容 DanceUI 能力拓展 —— PinchToZoom

26. DanceUI 实现原理

27. DanceUI 实现原理 — 架构分层业务视图计算引擎（有向无环图）渲染引擎宿主容器计算节点渲染树

28. DanceUI 实现原理 — 上屏流程 DanceUI 通过将「业务视图」送入「宿主容器」，创建对应的「计算引擎」，完成视图内容计算，输出渲染树 UI 的渲染。 UIHostingController 业务视图计算引擎渲染上屏渲染树

29. DanceUI 实现原理 — 上屏流程 Hello，world 的示例

30. DanceUI 实现原理 — 上屏流程 Hello，world 的示例 External<ContentView> External<_SafeAreaInsetsModifier> External<ViewOrigin> StaticBody<ViewBodyAccessor<ContentView>> External<ViewSize> ResolvedTextFilter RootGeometry StyledTextLayoutComputer StyledTextChildGeometry View LayoutPositionQuery size position containerPosition 创建计算节点（内容、几何体位置、遮罩、混合模式……）视图计算 LeafDisplayList<StyledTextContentView> 渲染树

31. DanceUI 实现原理 — 更新机制当视图内容的数据源发生变化时，计算引擎的计算流程会被再次触发。完成状态更新后的渲染上屏。

32. DanceUI 实现原理 — 更新机制 DanceUI 状态更新示例

33. DanceUI 实现原理 — 更新机制 DanceUI 状态更新示例

34. DanceUI 实现原理 — 更新机制 DanceUI 状态更新示例 External<ContentView> External<()> External<_SafeAreaInsetsModifier> External<ViewOrigin> DynamicBody<ViewBodyAccessor<ContentView>> StaticBody<ViewBodyAccessor<ContentView>> External<ViewSize> ResolvedTextFilter RootGeometry StyledTextLayoutComputer StyledTextChildGeometry View LayoutPositionQuery size position containerPosition LeafDisplayList<StyledTextContentView> 渲染树

35. DanceUI 实现原理 — 更新机制 DanceUI 状态更新示例 External<ContentView> External<()> External<_SafeAreaInsetsModifier> External<ViewOrigin> DynamicBody<ViewBodyAccessor<ContentView>> StaticBody<ViewBodyAccessor<ContentView>> External<ViewSize> ResolvedTextFilter RootGeometry StyledTextLayoutComputer StyledTextChildGeometry View LayoutPositionQuery size position containerPosition LeafDisplayList<StyledTextContentView> 触发新状态的视图计算数据源发生变化渲染树渲染树

36. DanceUI 实现原理 — 更新机制 DanceUI 更新机制中的特点 & 优化 External<ContentView> 1. 计算流程的按需更新 External<()> External<_SafeAreaInsetsModifier> External<ViewOrigin> StaticBody<ViewBodyAccessor<ContentView>> DynamicBody<ViewBodyAccessor<ContentView>> External<ViewSize> ResolvedTextFilter RootGeometry StyledTextLayoutComputer StyledTextChildGeometry View LayoutPositionQuery size position containerPosition LeafDisplayList<StyledTextContentView> 渲染树渲染树

37. DanceUI 实现原理 — 更新机制 DanceUI 更新机制中的特点 & 优化 1. 计算流程的按需更新 2. 事务进行提交更新

38. DanceUI 实现原理 — 更新机制 DanceUI 更新机制中的特点 & 优化 1. 计算流程的按需更新 State-0 State-1 Attribute-3 2. 事务进行提交更新 Attribute-0 Attribute-1 3. 计算节点不进行重复计算 Attribute-2 render tree 渲染树

39. 业务实践

40. DanceUI 业务实践 DanceUI 在字节跳动的多个产品落地

41. DanceUI 业务实践 DanceUI 在字节跳动的多个产品落地滤镜多列表协同滚动场景

42. DanceUI 业务实践 DanceUI 在字节跳动的多个产品落地滤镜多列表协同滚动场景新业务使用

43. DanceUI 业务实践 DanceUI 在业务上与 UIKit 进行 AB 实验 • 研发效率 • 性能 • 业务指标

44. DanceUI 业务实践 DanceUI 在业务上与 UIKit 进行 AB 实验 • 研发效率开发周期（投入人日）：大约减少 30% 的开发人天数代码规模：DanceUI 与 UIKit 相比，代码量大约减小 30% Preview 实时预览： Preview 耗时 20+s，UIKit 增量编译 1分半钟-2分钟 • 性能 • 业务指标

45. DanceUI 业务实践 DanceUI 在业务上与 UIKit 进行 AB 实验 • 研发效率 • 性能流畅度：DanceUI 与 UIKit 持平内存/CPU 占用：DanceUI 相比 UIKit 有一定优化 UIKit 组件复用：DanceUI 中复用 UIKit 组件几乎没有性能损耗 • 业务指标

46. DanceUI 业务实践 DanceUI 在业务上与 UIKit 进行 AB 实验 • 研发效率 • 性能 • 业务指标 DanceUI 与 UIKit 线上业务核心指标数据打平

47. DanceUI 业务实践 DanceUI 相比于其他声明式 UI 框架（自研） • 优势框架本身投入成本：文档、学习成本、社区生态建设性能：DanceUI 性能优势业务指标：DanceUI 的业务指标与 UIKit 数据打平 • 劣势暂不支持跨端的能力 iOS 独有，不太适合其他的平台的开发者

48. DanceUI 业务实践 DanceUI 和 SwiftUI 相比 • 优势研发效率、性能 SwiftUI 一致社区生态兼容，没有额外学习成本向下兼容、系统版本一致性，更低的接入成本开放性、源码兼容，提供更多的创造性 • 劣势新版本新功能支持

49. DanceUI 开源计划： 23年12月之前！！

50. 扫码回复「D2」获取第十七届 D2 演讲 PDF 材料后续也将推送 D2 会后技术文章，敬请关注！！

51. 感谢大家观看