Flutter在贝壳接入实践 张华峰

2020-03-01 230浏览

  • 1.Flutter在贝壳接入实践 张华峰 贝壳移动端架构组 1 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 2.2 2019 2019 KE.COM KE.COM ALL ALL COPYRIGHTS COPYRIGHTS RESERVED RESERVED
  • 3.3 2019 2019 KE.COM KE.COM ALL ALL COPYRIGHTS COPYRIGHTS RESERVED RESERVED
  • 4.目录 • Flutter贝壳接入案例 • Flutter工程基础 • Flutter接入方案介绍与理论基础 • Flutter热更新探索 • 小结 4 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 5.Flutter贝壳接入案例 5 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 6.贝壳flutter实践时间线 成立专项小组 2018/10 B端3个业务15+页面 2019/03 2019/01 租赁业务线开始调研 6 2019 KE.COM ALL COPYRIGHTS RESERVED 2019/05 方案初步完成
  • 7.Flutter贝壳案例-租赁收房测算 7 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 8.Flutter贝壳案例-二手业务 8 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 9.Flutter工程基础 9 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 10.Flutter SDK概述 10 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 11.Flutter工程类型 • Flutter Application： - Flutter标准应用程序 • Flutter Plugin： - Flutter封装Native工程的基础插件工程 • Flutter Package： - 纯Dart库工程 • Flutter Module： - 作为已有工程的Module 11 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 12.Flutter Application工程 12 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 13.现有原生工程接入Flutter Android依赖(gradle)： iOS依赖(podfile)： 13 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 14.Flutter接入方案介绍 14 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 15.Flutter官方接入方案 • 不适用： - 原生App与Flutter耦合度较高 - 原生开发感知到flutter，关联flutter module时需要配置 Flutter环境 - 无法满足我们已有的插件化业务工程分离的模式 - flutter代码所有业务耦合在同一个module中 - 运行构建成本较高，需要完整构建原生应用 • 适用： - 原生App比较轻量 15 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 16.业界已有接入方案 • 不适用： - Flutter开发需要与原生工程耦合，FE等不熟悉 iOS/Android的同学，上手难度较大 - 无法满足我们已有的插件化业务工程分离的模式 - 运行构建成本较高，需要完整构建flutter和原生应用 • 优点： - 原生开发与flutter实现解耦 16 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 17.贝壳接入方案考虑点 • 原生解耦：对原生开发者影响最小 • 屏蔽平台：开发者可以是Android/iOS/FE，只要熟悉Dart和Flutter UI API • 业务分离：必须满足当前业务线分散且独立维护的特点 • 开发阶段：解耦的情况下，能继续保持开发阶段的效率 • 集成阶段：方便集成，减少人工干预和维护（版本修改、构建感知），一次配置，无需维护 17 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 18.贝壳接入方案集成模式 18 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 19.贝壳接入方案开发模式 19 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 20.贝壳接入方案多渠道打包 20 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 21.贝壳接入方案优点 业务分离 各个业务独立代码仓库，只需关注自己 只关注业务核心逻辑，无需关注 业务代码与其他业务解耦 iOS/Android，我们帮助封装平台特性 研发效率 21 平台无关 集成无感 开发时只构建flutter，同时支持在业务 持续集成在Android实现无感知，QA在 package工程中热重载(hotreload) 构建过程中无需关注flutter相关事宜 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 22.Flutter方案理论基础 22 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 23.Flutter编译模式 23 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 24.Flutter构建流程Debug模式 24 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 25.Flutter构建流程Release模式 25 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 26.Flutter构建工具链 26 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 27.Flutter构建工具 • vscode/intellij flutter plugin • xcode build/gradle（修改） • flutter_tools.snapshot（修改） • frontend server.dart.snapshot • get_sanpshot 27 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 28.Flutter gradle脚本修改 • 支持生成aar • 对armeabi的支持 • 支持拷贝icudtl.dat到产物aar中 • 支持flutter plugin全部收敛于唯一产物aar中 • 支持upload和自定义uploadversion • 支持直接构建产物并启动原生App 28 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 29.Flutter构建工具flutter_tools修改 • flutter_tools修改： - flutter build apk/ios增加--upload、--upload-version、--plugin和--portal-root选项 - flutter attach增加--portal-root - flutter run --plugin强制改成flutter build apk/ios –plugin - 扩展--flavor选项在dart层的支持，实现dart层的flavor 29 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 30.Flutter日常开发构建流程（以Android为例） 30 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 31.Flutter持续集成构建流程（以Android为例） 31 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 32.Flutter热更新探索 32 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 33.热更新方案 • 动态产物下载： - 缺点：只支持Android，flutter插件中的原生代码无法动态修复 - 优点：实现相对简单 • 类React Native（xml/css/dsl->flutter widget）： - 缺点：实现较复杂，投入产出比不高 - 或者页面支持组件化，动态生成widget组件来实现动态化 - 增加flutter在apple生态中危险度 - 优点：支持双端 • 我们考虑的是？ 33 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 34.Flutter动态更新之flutter for web • 修改点（preview版本）： •Yaml:-sdk:flutter改为flutter_web和flutter_web_ui - 增加build_runner和build_web_compiler依赖 - 删除资源和字体的配置 • Dart代码（import）: -Package:flutter改为package:fltter_web-Dart:ui改为package:flutter_web_ui/ui.dart• 创建web目录: - 将资源assets移动web/assets目录下 - 增加web/index.html - 增加web/main.dart调用原来入口main()以及 ui.webOnlyInitializePlatform即可 34 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 35.Flutter for Web业务实验 35 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 36.Flutter热更新 • Android： - 使用当前的插件化框架将flutter业务做成单独插件 - 优势：除了支持dart的热更新，也支持flutter插件中的原生代码修改的热更新，利用公司现有成 熟插件管理体系，实现成本低 • iOS： - 规避iOS热更新带来的风险，暂不实现，待flutter for web正式发布，可以通过从内置flutter页 面切换成flutter for web页面来实现动态效果 • flutter for web： 在后续性能可靠的情况下，将运营类需要动态更新的页面使用flutter for web实现，同时可以将 flutter for web作为内置flutter业务的兜底实现，出现问题时可以动态将线上flutter页面切换成 flutter for web页面 36 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 37.小结 37 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 38.小结 • 接入方案： - 平台无关 - 业务分离 - 研发效率 - 集成无感 • 热更新计划： - Android使用插件化 - iOS使用flutter for web • 开源计划： 在iOS的研发效率解决后，会开源，供有共同业务场景flutter使用者提供参考 38 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 39.Thank you，Q&A 39 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 40.40 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 41.41 2019 KE.COM ALL COPYRIGHTS RESERVED
  • 42.42 2019 KE.COM ALL COPYRIGHTS RESERVED