闲鱼研发框架应用和探索

2020-08-14 140浏览

  • 1. 闲⻥鱼研发框架应用用和探索 讲师：梁梁治峰(花名：玄玄川)
  • 2. 自自我介绍 梁梁治峰(玄玄川) 阿里里里巴巴 – 闲⻥鱼 –无无线技术专家 现任阿里里里巴巴闲⻥鱼买家链路路客户端负责人人,负责闲⻥鱼客户端主 链路路架构升级，主导闲⻥鱼flutter化的落地和研发框架演进。
  • 3. • 闲⻥鱼Flutter 研发框架使用用现状 • Flutter 研发框架下一一体化模式 • Flutter 研发框架下动态能力力力 • Flutter 研发框架下互动能力力力 • 后续规划和展望
  • 4. 闲⻥鱼Flutter研发框架使用用现状 FishRedux 重逻辑 一一体化 重界面面 动态模版 重特效 互动引擎
  • 5. Flutter 研发框架下一一体化模式
  • 6. 一一体化模式 Android Client Service DoMain iOS H5 UI 逻辑 协作
  • 7. 一一体化模式 状态 展示 状态 逻辑 逻辑 领域 Action 展示 逻辑 领域 (Action) => Action 副作用用 副作用用 传统 新型 Client Server FaaS
  • 8. 一一体化模式 Client Flutter UI State LogicEngine Loacl Logic Protocol Diff Nexus Nexus 是一一套一一体化C/S 协议 解决逻辑归一一问题 面面向接口口 Nexus Protocol 类型安全 高高性能 Action Action|State|diff 高高于API 业务逻辑 VM服务 Saker 日日志/监控 限流/熔断 应用用服务 FaaS 容器器 应用用基础服务 平台相关性 Dart For FaaS Gaia 通信协议 BaaS HSF 中间件 逻辑内聚
  • 9. 一一体化模式 状态复杂 状态变化多 云端交互多 UseGuarantee Action ChangeAddress Action UserRedPacket Action Init Action CretaOrder Action 云端模型统一一 屏蔽协议 逻辑归一一 代码量量减少 业务闭环
  • 10. Flutter 研发框架下动态能力力力
  • 11. 动态性 逻辑动态性 电商业务具有强运营强时效性特性 UI动态性
  • 12. 动态模版 DX平台编辑模版 组件渲染 编译生生成二二进制文文 件 数据解析绑定 事件/表达式 注册 动态模板化是集团内较为成熟的一一套基于Native技术的模板化方方案，专注于 UI 模板渲染 生生成模板下载链接 模板下载解压
  • 13. 核心心问题-Layout UI = Decoration + Layout + Content Flutter 约束特点 RenderBox RenderSliver 共性 Min Max Flex Row Stack 动态模版 SliverGrid 特性 match parent wrap content • 尽可能大大的约束 • 跟随内容大大小小的约束 描述上样式和布局彻底分离 量量行行行描述 感性描述
  • 14. 布局表达 最大大值估算 实际值
  • 15. 业务效果
  • 16. 性能参考 FPS平均值在55以上
  • 17. 性能下一一步探索 FPS 55 60 高高级控件特性 Flutter 原生生 DX
  • 18. Flutter 研发框架下互动能力力力
  • 19. 背景和现状 ๏ UI 与游戏引擎的边界 单边 UI 不不互通 Canvas 传统游戏引擎 Flutter App Skia ๏用用游戏化的方方式创造更更有表现力力力的交互体验，创造新的业务玩法和价值
  • 20. 核心心问题-融合 应用用 Flame GameObject GameObjectWidget GameObjectElement GameObjectRenderObject UI Game RenderObject GameObject->RenderObject • 游戏系统不完善 • 缺少局部刷新支持 • 缺少GUI系统 • 动画支持格式少 Paint Layout HitTest
  • 21. Candy 整体设计 GameObject GameObjectWidget GameObjectElement GameObjectRenderObject ๏ 架构设计：按照ECS标准 游戏行行行业开发者 ๏ 接又设计：对齐集团互动EVA App应用用开发者 ๏ 应用能力：融入Flutter绘制体系 UED视觉设计者 ๏ 扩展能力：游戏子系统化能力补充 Candy——符合ECS标准的与Flutter高高度融合的原生生开发高高性能互动开发引擎
  • 22. 效果 • 按游戏模式开发逻辑 • 动画能力封装为Widget • Flutter UI无缝插入游戏 场景 • 按Flutter模式开发逻辑 • 游戏最终以Widget形式 插入Flutter页面 • 动画Widget无缝插入
  • 23. 效果-⻣骨骼 DragonBones
  • 24. 效果-调试
  • 25. 性能参考
  • 26. 后续规划和展望
  • 27. 互动 编排 = Candy Nexus SSR 布局 绘制 Dart = DX 云端一一体化研发 Flutter + Serverless Fass
  • 28. 【淘系技术】微信公众号 扫码获取本期ppt内容及回放 【闲⻥鱼技术】微信公众号 加入入我们