王树彬 架构中新技术引入的权衡和挑战 FlutterFaaS 三端一体化架构

文字内容
1. Flutter&Dart云端⼀一体化架构思考 王树彬 阿⾥里里巴巴
4. 王树彬(国有) 阿里巴巴高级技术专家 现任阿里巴巴闲鱼架构负责人。负责闲鱼整体架构升 级,2017年首次引入Flutter到闲鱼。 2009年加入阿里巴巴,对服务端、大数据、无线跨端技 术方向较为熟悉。
5. • 传统Native+Web+服务端混合开发的挑战 • Flutter跨端解决方案及选型原因 • Dart在Server侧的优势及挑战 • Flutter/Dart云端一体化架构及效果 • 小结与思考
6. 传统Native+Web+服务端研发现状 无线时代 富客户端 PC时代 瘦客户端 Android Web Server iOS Server 业务扩散 H5
7. 传统Native+Web+服务端研发问题 协同几何增长 n*(n-1)/2 效率下降
8. 基于Flutter/Dart的云+端技术栈统⼀一 JS + Node Flutter + Dart
9. 不不只是技术栈统⼀一 更多问题: - 一体化的业务闭环红利如何最大化? - 如何消除云端技术壁垒? - 如何使工作总量减少 ( 1+1<2 )? - 如何促进生产关系重塑?
10. • 传统Native+Web+服务端混合开发的挑战 • Flutter双端统一及选型原因 • Dart在Server侧的优势及挑战 • Flutter/Dart三端一体化架构及效果 • 小结与思考
11. 跨平台框架前世今⽣生 原生 Android 1.0 2008 iPhone OS 2008 Windows Phone 2010 第一代 Xamarin 2011 PhoneGap 2011 第二代 React Native 2015 Weex 2016 第三代 Flutter 2017
12. 性能 vs 动态 Dart AOT 跨平台 Flutter 高性能 React Native /Weex 动态性 + 自建UI绘制引擎
13. Flutter与RN/Weex更更多对⽐比 Flutter RN / Weex 性能 和Native一致 一致性 强 接近原生,但在长列表、富 动画场景弱 弱 动态性 无 强 标准 自建 W3C子集 技术栈 Dart Javascript & Native 跨平台 Mobile&Web&Desktop&Emb edded 高速成长 Mobile& Weex-Web 成熟 社区
14. Flutter两端统⼀一 创建 编码 集成 监控
15. Flutter两端统⼀一效果 替代Native • 闲鱼核心基础链路 • Native能力复用 • 性能原生,稳定性 更好(Crash率) 研发效率提升 • 跨端研发 • 更少代码 • 更快调试 Native同学全部转型 Flutter • Android/iOS开发 比问题
16. • 传统Native+Web+服务端混合开发的挑战 • Flutter双端统一及选型原因 • Dart在Server侧的优势及挑战 • Flutter/Dart三端一体化架构及效果 • 小结与思考
17. Dart在Server端的定位 Flutter 用户端 Server端 业务拼装层 Server端 领域层 Dart Server Java Server Java Server
18. Dart⽤用在Server侧的优缺点 Dart vs Java Dart具备服务端能力 Dart for Flutter • • • • • Dart for Web 强类型,可预测性 GC 异步和并发 高性能的JIT Profiler Dart for Server • • • • 启动快 2s,vs Java 部署快 2s,vs Java 简单可靠的异步编程 更简洁的语法 Dart vs Node.js ... 缺点 • 生态 • 基建成本 3min 15min
19. Dart服务端解决⽅方案 开发期 运行期 调试: HotReload FaaS 并发: Isolate 上下文跟踪: Zone 生态融合: C++ Extension 开发隔离: Isolate
20. • 传统Native+Web+服务端混合开发的挑战 • Flutter双端统一及选型原因 • Dart在Server侧的优势及挑战 • Flutter/Dart三端一体化架构及效果 • 小结与思考
21. 三端⼀一体化 架构一体 业务闭环 领域下沉 生产关系
22. 系统分层权衡 旧变化比 易变业务层 领域层 目标变化比 2 5 1 1 0.01 0.01 大中台业务平台层
23. 消除云端技术壁垒 前端写后端 后端写前端 • FaaS • BaaS • 领域下沉 • UI2Code (根据图片生成UI代码) • 页面框架模板化 (页面容器,数据管理)
24. 使⼯工作总量量减少(1+1<2) • 消除协议层 • 研发工具一体化
25. 开发⼈人员的⼀一体化意愿度 • 业务型人员的成长空间 - 业务架构、整合技术以快速获取业务结果 • 客户端/前端人员的成长诉求 - 业务闭环 - 服务器技术能力扩充 • 服务端人员的成长诉求 - 忙于简单业务,很多领域建设需要完善
26. ⼀一体化架构及问题回顾 - 如何消除云端技术壁垒 - UI2Code - 全回放 - FaaS/Service Mesh - 工具集 Protocol/ - 如何使工作总量减少 ( 1+1<2 ) - 一体化下的架构沉淀 Dart FaaS ServiceMesh Server - 如何发挥带来的业务闭环红利 - 业务层一体化聚焦+业务架构沉淀 - 如何促进生产关系重塑 - 业务研发人员成长,业务闭环和领域 沉淀价值
27. 效果示例例-资源均衡 • 仅客户端两端一体化: 4客户端,4服务端 客户端出现瓶颈,服务端资 源有剩余。 • 三端一体化: 8 客户端+服务端 UI2Code+服务端开发
28. 效果示例例-业务闭环 一个前端同学一体化开发, 聚焦业务逻辑: 用户增长业务个性化插入 - Feeds - 首页Card - Poplayer - Banner … 客户端UI UI组件 服务端数据拼 装接口 切 面 插入逻辑 注:由于业务披露保护原因, 此截图仅作示意用,非真实场景。 服务端领域接 口
29. 效果概括 资源 以往常见的资源均衡问题 端侧同学的业务成长 多端 多端的UI、逻辑一致性提升 协同 协同边数大幅减少 免接口约定 测试 测试效率提升 业务 1业务开发100%关注 PRD、 1领域层开发20%关注 PRD 适用场景排序 前端H5 简单业务 新业务 维护型业务 复杂业务
30. • 传统Native+Web+服务端混合开发的挑战 • Flutter双端统一及选型原因 • Dart在Server侧的优势及挑战 • Flutter/Dart三端一体化架构及效果 • 小结与思考
31. 讲了了什什么 Flutter与RN/Weex的对比和选择 Dart在Server端的优势 一体化的架构思考及效果
32. 展望 工程一体化 业务一体化 • 业务组件化 • 业务平台化 • 数据/智能一体化
33. 参考资料料 联系我: guoyou@alibaba-inc.com https://github.com/alibaba/fish-redux https://github.com/alibaba/flutter_boost https://github.com/alibaba-flutter/aspectd “闲鱼技术” 技术细节文章