1、MTFlutter:美团外卖 Flutter 容器化态建设实践录 业务背景Flutter 的优势和挑战Flutter 容器化态建设展望和总结美团外卖 Flutter 实践历史美团外卖户端调研2018 Q2美团技术博客:Flutter 的原理及美团的实践美团技术博客2018年阅读量前三美团外卖商家端接2018 Q42019 Q2业务需求占30%,数15,指标与Native持平确定技术选型向,铺开业务实践,沉淀基建美团点评多个事业部中后台业务线上规模应MTFlutter 容器化基础设施及周边具链建设截1215,共10个 BU,12个 App 接中后台业务特点向户标准化程度低(1个 C 端 App
2、& 对应 N 个 B 端 App & ),逻决数据产、运营管理的问题,多端致性要求产具类应使时间(持续个时),性能和稳定性要求产品迭代周期短产品两周迭代,每个迭代需求众多,开发效率要求录 业务背景Flutter 的优势和挑战Flutter 容器化态建设展望和总结MTFlutterFlutterSDK定制适场景程构建集成具效率、性能、稳定性、多端体验致动态性、包特殊诉求UI代码动成CI/CD动态化能运维能产物托管FlutterMTFlutter业务背景录 Flutter 的优势和挑战Flutter 容器化态建设MTFlutter 具链业务撑展望和总结MTFlutter 标准作流将作为原程上游的
3、Flutter 模块开发,抽象为原依赖产物的程管MTFlutter - 脚架解决环境配置、团队/项环境统打包作流命令具程初始化SAKGems宿主/CI环境gem install flutter_cli -v “0.3.3开发调试美团云install version autodotfilesuninstall构建打包flutter_linux_v1.2.1-hotfix.1-stable.tar.xzupgrade versionflutter_macos_v1.2.1-hotfix.1-stable.tar.xzdowngrade versionhelp发布托管config project=p
4、ath sdk-versionconfig project=path consistent-sdk原集成MTFlutter - SDK定制程构建定制模板程,适配公司基建态,修复已知问题等,持续提供免坑版SDKninjaFlutter.frameworklibflutter.sogen_snapshotFlutter SDKengine 源码美团云开发调试Flutter 引擎、Dart SDKbin/cachebin/internal/engine.versionflutter precache 已知 bug 修复 低版本 gradle 兼容Flutter 框架、持具packages、flutt
5、er_tools构建打包其他(开发具、demo等)发布托管开发机打包机flutter_linux_v1.5.4-hotfix.100-mt-stable.tar.xzflutter_macos_v1.5.4-hotfix.103-mt-stable.zip原集成美 云团MTFlutter - 混合容器程构建容器需求:Native setResultURL 跳转1. 能够通过 URL 打开或关闭某个 Flutter setResult 实线:跳其他Flutter虚线:其他跳 Flutter开发调试FlutterBoost by统 URL 规范AOP闲URL 跳转Flutter 跳其它URL 跳转
6、参数带回其它跳Flutter参数带回发送播Dart注解解耦注册Flutter Flutter 容器H5 发送播2. 能够与其他互相转递参数构建打包URL 跳转URL跳转MethodChannelURL跳转3. 能够调系统播的功能发送播发送播EventChannel发布托管RN 原集成MTFlutter - CI/CD程构建解决 Flutter 项打包、依赖关联问题1.Dart 产物编译2.业务资源复制开发调试3.Flutter 引擎集成4.原侧编译流程对接5.三插件处理6.版本号管理打包构建发布托管升级版本号,更新 pubspec/pom/yaml触发 Flutter CI,编译 Flutte
7、r 产物触发原 CI,部署到 app原集成MTFlutter - Dart代码托管程构建解决 Flutter Package 发布托管问题https:/开发调试pub clientPub server美团云打包构建nodeJS + ssopackagesFlutter Package发布托管 lib xxx.dart main.dart pubspec.lock pubspec.yaml test counter_test.dart flutter_hello_world.iml原集成MTFlutter - 进制产物托管程构建解决Flutter项原构建产物托管问题业务部分(代码与资源)andr
8、oid: snapshot*iOS: App.framework资源:flutter_assetsFlutter Project开发调试 lib框架部分 main.dart assets打包构建美团云android: flutter.jarlibflutter.soiOS: flutter.framework .ios .android发布托管flutter plugins pubspec.yaml .flutter-pluginsandroid: plugin1 projplugin2 projiOS: plugin1 local podplugina local pod原集成MTFlutt
9、er - 集成插件程构建以原式解决中型团队集成 Flutter Module 的侵问题业务部分(代码与资源)gradle.ext.flutterModuleAAR=“com.example.business:your_flutter_module_name:1.2.0开发调试build.gradleapply plugin: flutter_integrationNativeProject打包构建框架部分集成插件android: flutter.jar美团云libflutter.soAARGradleiOS: flutter.framework发布托管CocoapodsPodflutter p
10、luginssource http:/ doGemfilePodfilegem cocoapods-flutter-plugin, 0.0.27endandroid: plugin1 projplugin2 projiOS: plugin1 local podplugina local pod原集成target :your_target_name doflutter your_flutter_module_name, 1.2.0end业务背景录 Flutter 的优势和挑战Flutter 容器化态建设MTFlutter 具链业务撑展望和总结MTFlutter - UI 代码动成设计痛点:前端还
11、原度低开发说实现不了卖家秀 VS 买家秀研发痛点:设计格不统、量界开发调试作PM 痛点:改个样式动则5+天标:打通视觉稿转换 UI 代码链路,减少信息/资源损耗MTFlutter - UI 代码动成普通案1.Sketch 插2.切割布局3.语义模板视觉稿结构与代码对应,组件识别粒度低,布局层级冗余,可维护性低如何优化结构化数据?MTFlutter - UI 代码动成视觉1.图像2.多级3.校正4.相似by 美团配送与视觉部/视觉图像中MTFlutter - UI 代码动成AI 案1.Sketch 插2.AI 识别服3.切割布局4.语义模板遵守设计规范,贴近开发员的书写格和习惯,可识别阶组件,冗
12、余层级,可维护性MTFlutter - UI 代码动成视觉稿直转 Flutter、视觉规范集成云协复阶组件,布局视觉稿云协作平台-印迹MTFlutter - 动态化动态化技术是运营类业务必备的基础能,也是缩减包的重要段但出于应市场合规、性能和安全考虑,Flutter 官并持计划业界两向:产物替换vm_snapshot_data、vm_snapshot_instr、isolate_snapshot_data、isolate_snapshot_instr仅持 Android,且必须是纯 Flutter 应 DSL引 JS 虚拟机,包增加,且技术栈需要切换为 JS 动态解析(JS 运时解析)?静态解
13、析MTFlutter - 动态化开发阶段转换阶段运MTFlutter - 动态化以静态映使 prox通过 Dart解析 AST持通编MTFlutter - 动态化沿 Flutter 态,技术栈切换成本线下解析,持常规开发范式静态渲染,运时依赖,执效率接近 AOT复原基建,持随时发版、灰度能MTFlutter/Dymanic各阶段产物流转录 业务背景Flutter的优势和挑战Flutter容器化态建设展望和总结MTFlutter - 总结1. 中后台业务的特点和 Flutter 的优势标准化程度低、使时间、迭代周期短效率、性能、稳定性、多端体验致2. 美团外卖 Flutter 态建设标准作流及 MTFlutter 具链UI代码动成:引 CV 算法,复阶组件,视觉规范云化动态化:线下解析,静态渲染,持通编程范式,沿 FlutteMTFlutter - 规划1. 业务复业务模板/标准框架/开发体化简化需求交付链路(视觉稿-动态 DSL-灰度-全量)SDK瘦身2. 终端技术融合统上层 DSL,按需选择底层渲染技术