Flutter GMTC

Transcript

1. 使⽤Flutter快速构建集美 观与⾼性能于⼀体的移动 应⽤ Xiao Yu (于潇) ⾕谷歌Flutter框架⼯工程师
2. Build beautiful
 native apps in record time
4. 移动/台式机的使⽤用时间
5. 移动应⽤用/⽹网站的使⽤用时间
6. 中国⽤用户的移动应⽤用使⽤用时间
7. 移动应⽤用使⽤用时间的分配
9. 电⼦子商务交易易量量
10. Confidential + Proprietary • 多平台 • ⾼高性能 ⽤用户的需求
 Market Needs
11. Confidential + Proprietary 获奖软件
 Award-Winning Apps
12. Confidential + Proprietary 获奖软件
 Award-Winning Apps
13. Confidential + Proprietary 国内流⾏行行软件
 Popular Apps in China
14. Confidential + Proprietary ⽤用户的需求
 Market Needs • 多平台 • ⾼高性能 • 精美的定制设计
15. Confidential + Proprietary 移动软件开发的困难
 Mobile Development Challenges • 开发太贵 • 开发太慢 • ⾼高质量量太难 • ⼯工程资源太难共享
16. Confidential + Proprietary 移动软件开发的困难
 Mobile Development Challenges 肯定有更更好的办法
17. Confidential + Proprietary 个⼈人背景
 Speaker Background • 移动软件⼯工程师 • 移动软件设计初创企业 • YouTube安卓客户段 • Flutter框架
18. Confidential + Proprietary ⽬目标
 Goals • Fast Development • 让开发者处在⾼高⼯工作效率的状态 • Expressive and Flexible UI • 可创造出任何设计师期望的局⾯面与效果 • High Performance • 不不牺牲原⽣生的运⾏行行速度
19. Confidential + Proprietary Flutter的特点
 Flutter Summary Fast Development • Hot Reload • 快速搭构，快速调试 • Declarative+Reactive • 减低认知负荷 • Testing • ⽆无需看界⾯面的界⾯面测试 Expressive and Flexible UI • Compositional API • 重建框架与开发者的关系 • Render Directly to GPU • 提供更更紧密的界⾯面细节控制 Native Performance • Optimized Performance • 实现Flutter⾼高性能的原理理 • Compiles to Native • 编译⾄至ARM代码
20. Confidential + Proprietary Flutter的特点
 Flutter Summary Fast Development • Hot Reload • 快速搭构，快速调试 • Declarative+Reactive • 减低认知负荷 • Testing • ⽆无需看界⾯面的界⾯面测试 Expressive and Flexible UI • Compositional API • 重建框架与开发者的关系 • Render Directly to GPU • 提供更更紧密的界⾯面细节控制 Native Performance • Optimized Performance • 实现Flutter⾼高性能的原理理 • Compiles to Native • 编译⾄至ARM代码
21. Confidential + Proprietary 热重载
 Hot Reload “我的代码还在 编译ing”
22. Confidential + Proprietary 热重载
 Hot Reload 写code
23. Confidential + Proprietary 热重载
 Hot Reload Demo
24. Confidential + Proprietary 热更更新
 Hot Reload
25. Confidential + Proprietary 热更更新
 Hot Reload
26. Confidential + Proprietary 声明式+响应式开发模式
 Declarative, Reactive Development
27. Confidential + Proprietary 声明式+响应式开发模式
 Declarative, Reactive Development
28. Confidential + Proprietary ? ? ? 声明式+响应式开发模式
 Declarative, Reactive Development
29. Confidential + Proprietary 声明式+响应式开发模式
 Declarative, Reactive Development
30. Confidential + Proprietary 界⾯面测试
 UI Testing
31. Confidential + Proprietary 界⾯面测试
 UI Testing Demo
32. Confidential + Proprietary 界⾯面测试
 UI Testing
33. Confidential + Proprietary Flutter的特点
 Flutter Summary Fast Development • Hot Reload • 快速搭构，快速调试 • Declarative+Reactive • 减低认知负荷 • Testing • ⽆无需看界⾯面的界⾯面测试 Expressive and Flexible UI • Compositional API • 重建框架与开发者的关系 • Render Directly to GPU • 提供更更紧密的界⾯面细节控制 Native Performance • Optimized Performance • 实现Flutter⾼高性能的原理理 • Compiles to Native • 编译⾄至ARM代码
34. 组合性的API
 Compositional API API 秘制⼤大招
35. 组合性的API
 Compositional API API 秘制⼤大招
36. Confidential + Proprietary 组合性的API
 Compositional API
37. Confidential + Proprietary 组合性的API
 Compositional API Demo
38. Confidential + Proprietary 组合性的API
 Compositional API
39. Confidential + Proprietary 直通GPU渲染
 Render Directly to GPU Demo
40. Confidential + Proprietary 直通GPU渲染
 Render Directly to GPU
41. Confidential + Proprietary Flutter的特点
 Flutter Summary Fast Development • Hot Reload • 快速搭构，快速调试 • Declarative+Reactive • 减低认知负荷 • Testing • ⽆无需看界⾯面的界⾯面测试 Expressive and Flexible UI • Compositional API • 重建框架与开发者的关系 • Render Directly to GPU • 提供更更紧密的界⾯面细节控制 Native Performance • Optimized Performance • 实现Flutter⾼高性能的原理理 • Compiles to Native • 编译⾄至ARM代码
42. Confidential + Proprietary 性能优化 - 互联⽹网
 Performance Optimization - Web 对⽐比、 更更新 Real DOM Virtual DOM 应⽤用 平台 渲 染 Canvas Events
43. Confidential + Proprietary 性能优化 - 移动端
 Performance Optimization - Mobile 对⽐比、 更更新 平台组件 框架组件 应⽤用 平台 渲 染 Canvas Events 线程跳跃
44. Confidential + Proprietary 性能优化 - Flutter
 Performance Optimization - Flutter 渲 染 更更 新 框架组件 应⽤用 平台 Canvas Events
45. Confidential + Proprietary 性能优化 - Flutter
 Performance Optimization - Flutter 渲 染 更更 新 框架组件 应⽤用 平台 Canvas Events
46. Confidential + Proprietary 性能优化 - 布局
 Performance Optimization - Layout ⼤大⼩小 约束 VS 传统多次布局 单次布局
47. 当前进展
 Current Progress
48. 闲⻥鱼
 Alibaba Xianyu
49. Value Axis 7500 15000 22500 30000 2015-04 2016-02 2016-11 2017-08 2018-06 GitHub关注
 GitHub Stars Beta 1
50. Flutter Release Preview 1 Announcing Flutter ⾸首个发布预览版 宣布
51. Confidential + Proprietary 社区
 Community 开源开发 - 始于第⼀一⾏行行代码 GitHub github.com/flutter/flutter 官⽹网 flutter.io 中⽂文资源 flutter-io.cn