饿了么跨端技术的演进实践与落地-刘宇

饿了么跨端技术的演进、实践与落地饿了么前端工程负责人/刘宇跨端，跨的究竟是哪些端?PC/Mobile/OTT/loTAndroid/iOS/HarmonyOSWebview/ReactNative/Flutter移动跨端技术演进历程2Hybrid阶段3框架+原生阶段4自绘渲染阶段5小程序阶段Cordova渠道(流量)业务经营诉求渠道(流量)业务经营诉求线商家版用户流量、订单规模对大盘贡献度高放心点新渠道也在持续涌现和接入中业务特点线零售物流服务时、空、人、货曝光、成交渠道问题诉求渠道问题诉求渠道差异与限制高度不确定性2.能力成熟度与完整度3.研发配套(语法、工具)1.用户特性与诉求2.渠道定位3.业务运营策略应用复杂度提升渠道业务灵活性?研发体验和效率?策略饿了么跨端投放现状一残酷的现实降本增效推动框架统一实现一码多端研发框架升级大概率带来业务重构这不维护这改才行文档过期了才行单向数据流重构吧框架开发思考重构吧框架开发新特性影响与成本影响与成本渠道流量小程序>H5前端协同需求vs差异化视角与节奏基于小程序跨端的行业现状和思考业界有哪些面向于小程序的研发框架?公司京东阿里集团蚂蚁集团滴滴美团支持平台12个15个7个7个8个1个实现机制运行时编译时Runtime层，通过模拟种DSL,运行时较重小程序端通过提供vue-时相对较重基于Webpack,主要用基于vue-runtime魔较重样共同的特点：基于衡量因素衡量因素上述开源框架能否解决我们面临的问题?-—并不能对性能和体验要求高案跨端解决方案适配单端单端生命周期差异配置差异引用方式差异文件类型差异模版指令差异语法差异功能支持差异自定义组件差异编译时(重)运行时(轻)小程序静态编译原理如何解决小程序多端编译-静态编译原理小程序静态编译原理配置差异小程序WXS/SJS支付宝小程序文件类型差异微信小程序模版指令差异QQ小程序FilesWXML/AXML/QML/百度小程序字节小程序功能支持差异钉钉小程序淘宝小程序语法差异快手小程序WXSS/ACSS/QSS/CSS/TTSSSourceSourceType文件类型TypeTransformer小程序启动运行时动态补偿小程序启动运行时动态补偿wPage/aPagewComponent/aComponent换代码执行createApp/WApp/aApp触发注册App逻辑差异解决执行结构和逻辑差异银行金融渠道、客户端极小包、广告投放等以H5来承接编译时+运行时小程序静态编译原理如何解决小程序转Web-编译原理小程序静态编译原理WXS/SJSWXS/SJSWXML/AXMLWXML/AXML组件WebSJS、WXMU/AXML、JSON文件并转换为文件类型转换层多端产物如何解决小程序转Web-运行时原理小程序对等运行时能力实现App/Page/Component.view/scroll-view/button..WXML/AXML业务运行时自定义能力WXSS/ACSS分包形态如何解决多端多形态的问题?分包形态痛点：由于形态差异，各端分别维护一套代码方案：消除形态差异(业务难以适配的部分)小程序形态入微：支付宝小程序接入微信作为小程序分包入支：微信分包接入支付宝作为·接口调用限制形态差异解决办法举例一生命周期与全局函数插件或分包无应用(APP)生命周期怎么办?getApp方法调用缺失以及转换后的getApp实例冲突怎么办?App({Page({})转换前小程序页面自动引用appjs,确保appjs的自动初始化require('../app.js')varG=require('./subpackage.global.js');Page({onLoad(options)//somelogtc}转换后的小程序页面})(G.getApp)转换后的小程序页面var$app;module.exports.getApp=function(){if($app!=null)return$app;if(typeofgetApp===function')returngetApp();if(typeofgetApp==='function'){$app.proto=getApp();if(typeof$app.onLaunch==='function'){varfn=wx['getLaunchoptionsSync'];}形态差异解决办法举例一全局样式小程序转分包或插件之后全局样式失效怎么办?@import"../../app.wxss";@import"../../app.wxss";.banner-wrap{position:relative;}.banner{}}}形态差异解决办法举例—NPM构建支持不同小程序平台对npm构建支持不同且不友好怎么解?组件提取组件编译组件提取入口配置依赖分析动态分组引用替换产物输出如何治理"复杂小程序"?如何治理"复杂小程序"一业务示例、问题剖析与解法零售分包评价分包地址分包由主包+N个分包组合而成复依赖独立小程序小程序插件小程序分包独立小程序小程序插件小程序分包小程序宿主分包形态集成前：各个业务以不同形态存在相互解耦，独立研发、调试、部署小程序形态转换集成与基础能力注入集成后：合并为一个完整小程序宿主+多形态业务+依赖及页面聚合复杂小程序集成分包分包小程序形态插件插件插件插件分包分包分包插件小程序小程序分包分包分包分包完整小程序复杂小程序一线上研发协作开发阶段集成阶段发布阶段发布完成主工程(主包)本地代码开发子工程(插件、分包)确认参与迭代的业务主、子工程关联部署测试完成开发关联主工程迭代主、子工程关联部署测试生成体验版集成部署集成测试完成集成退回集成多渠道分发删除分支、打上多渠道分发完成关联的aone工作项完成发布同步各分包完成发布完成迭代进入准备发布状态中止发布同步删除分支、打上进入准备发布状态中止发布同步完成关联的aone工作项集成窗口结束，锁定版本并关闭分包部署入口多端应用分层架构基础能力供给多端应用分层架构基础能力供给通用能力沉淀渠道投放多业务/多场景/多形态研发框架及DSL及研发Application壳工程数据&实验监控&快排配置化运行标准化接入统一应轻量化的宿主工程能力沉淀持续升级跨端成果一业务效果&研发提效饿了么支付宝小程序饿了么微信小程序饿了么淘宝小程序水果水果饿了么淘特小程序◎近铁城市广场南座饿了么抖音小程序Q大润发星巴克专星送(近铁城市广场..我的·研发提效：采用一码多端和集成研发模式的业务平均提效70%,同构的端越多提效越多·多端占比：饿了么内部85%+的多端业务基于该方案实现多渠道业务研发和投放·业务覆盖：涵盖了饿了么全域等各个业务板块能力沉淀一饿了么自研MorJS多端研发框架编译集成多端研发框架能力沉淀一饿了么自研MorJS多端研发框架一架构呈现@morjs/plugin-compller-alipay序细节设计compose命令支持，提供宿主、分包、插件、模块等的集成功能及可插拔机制analyze命令支持，提供代码分析检查、依赖分析和包大小分析等功能社区生态(规划中)规范小程序宿主、分包、插件、模块等可插拔机制研发规范小程序多端开发工具&套件&插件扩展规范小程序JS依赖库规范小程序多端组件库规范序多端运行时规范能力沉淀-饿了么自研MorJS多端研发框架-支持情况微信小程序DSL小程序/小程序插件小程序分包/小程序多端组件能力沉淀一饿了么自研MorJS多端研发框架一特性介绍此外还支持插件和插件集，以满足功能和MorJS内置了脚手架、构建、分析、多端经饿了么内部100+公司项目的验证，值流、复杂小程序集成、小程序形态转换技术的探索。比如多端扩充、高性能渲染方案等。微信小程序支付宝小程序抖音小程序淘宝小程序能力沉淀一饿了么自研MorJS多端研发框架-使用案例微信小程序支付宝小程序抖音小程序淘宝小程序饿了么饿了么饿了么饿了么智能服务饿了么超市蜂鸟跑腿组件库示例饿了么超市蜂鸟跑腿组件库示例蜂鸟跑腿饿了么果园医疗口腔饿了么外卖下单蜂鸟跑腿饿了么果园医疗口腔饿了么饿了么拼团阿里本地生活联盟饿了么拼团饿了么智能服务饿了么拼团饿了么M站能力沉淀一饿了么自研MorJS多端研发框架-用户原声效果还不错!赞!帮我