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

1、饿了么跨端技术的演进、实践与落地饿了么前端程负责/刘宇录 跨端技术背景与演进历程 基于程序跨端的业现状和思考 基于程序 DSL 的跨端解决案 展望未来跨端技术背景与 演进历程跨端，跨的究竟是哪些端？设备平台PC/Mobile/OTT/IoT操作系统Android/iOS/HarmonyOS移动应微信/付宝/淘/抖渲染容器Webview/ReactNative/Flutter移动跨端技术演进历程饿了么跨端投放现状 概览业务特点围绕线上线下服务多业精细化运营经营诉求商家：曝光和成交多形态多渠道投放时空体验规模成本平台：规模和流量SaaS到家物流零售业务渠道（流量（线上线下O2O消费者平台商家时、空

2、、货曝光、成交服务区域经营户流量、订单规模对盘贡献度新渠道也在持续涌现和接中饿了么跨端投放现状 问题、诉求和策略策略渠道差异与限制渠道的运环境渠道的流量特性渠道的业务定位渠道的管控规则度不确定性渠道环境不确定性业务诉求不确定性1.商业能与产品思路2.能成熟度与完整度3.研发配套（语法、具）1.户特性与诉求2.渠道定位3.业务运营策略应复杂度提升业务关联关系团队协作模式功能对策略能感知范围渠道业务灵活性？研发体验和效率？渠道问题诉求程序（主）+H5（辅）：N 个渠道、N 个业务、N 个应、N个框架、N个团队围绕“研发体验致性提升与复杂应协作机制改进”双向保障业务效迭代饿了么跨端投放现状 残酷的现

3、实前端协同需求 vs 差异化视与节奏研发框架升级概率带来业务重构推动框架统实现码多端理想现实渠道流量程序 H5思考决策：以程序为第视来实现多端降本增效影响与成本基于程序跨端的业现状和思考业界有哪些向于程序的研发框架？共同的特点：基于 React 或者 Vue DSL为什么饿了么选择以程序 DSL 为基础实现跨端？改造成本性能体验业务协同淘微程序运营多年存量业务多以付宝或微信程序 DSL 编写渠道业务是重要的流量阵地重视程度与 App 差对性能和体验要求每个渠道都是个型饿了么 App业务复杂度/多业务域协同应集成困难/全链路功能衔接困难衡量因素以程序 DSL 构建跨端解决案上述开源框架能否解决我

4、们临的问题？并不能基于程序 DSL 的跨端解决案如何解决程序多端编译？差异分析编译时（重）运时（轻）案选择JSAPI 差异配置差异件类型差异模版指令差异语法差异命周期差异引式差异功能持差异定义组件差异衡量因素性能和体验标单端多端适配如何解决程序多端编译 静态编译原理Files微信/付宝程序 DSLWXS/SJSWXML/AXMLWXSS/ACSSJSONJSTypescript模块运时抹平注引PostHtml内置组件指令属性模版事件代理特殊语法PostCSS选择器引JSON配置项引WXS/SJSWXML/AXML/QML/SWAN/TTMLWXSS/ACSS/QSS/CSS/TTSSJSONJ

5、S项源件Source源码类型Source Type件类型Type转换层Transformer多端产物Outcome程序付宝程序微信程序QQ 程序百度程序字节程序钉钉程序淘宝程序快程序Typescript模块引运时抹平注程序静态编译原理配置差异件类型差异模版指令差异语法差异引式差异功能持差异解决如何解决程序多端编译 运时补偿原理运程序跨端 API 转换代码执 createApp/wApp/aApp 函数调触发注册 App 初始化插件逻辑App 初始化程序启动执 createPage/wPage/aPage函数调转换 Page 多端结构和逻辑差异Page 初始化注 Mixins 持执 create

6、ComponentwComponent/aComponent函数调转换 Component 多端结构和逻辑差异执程序 Component 函数注 Mixins 和Behavior 持业务 Solution 执初始化 Plugin 并注册命周期触发注册 App命周期插件逻辑触发 Page 初始化插件逻辑Page 命周期多端差异抹平触发注册 Page命周期插件逻辑触发 Component 初始化插件逻辑Component 初始化Component 命期多端差异抹平运时动态补偿解决JSAPI 差异命周期差异实例法差异定义组件差异运时扩展如何解决程序转 Web？程序转 Web案衡量因素研发成本和维护成