《饿了么跨端技术的演进实践与落地_刘宇.pdf》由会员分享,可在线阅读,更多相关《饿了么跨端技术的演进实践与落地_刘宇.pdf(39页珍藏版)》请在三个皮匠报告上搜索。
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案衡量因素研发成本和维护成
7、本业务投放细分渠道或程序环境渠道银融渠道、客户端极包、告投放等以 H5 来承接编译时+运时独维护套 H5 划不来如何解决程序转 Web 编译原理重点解决 将 JS、WXS/SJS、WXML/AXML、JSON 件合并为 JS 件并转换为 React 组件 WXSS/ACSS 转换为 CSS 件Files微信/付宝程序 DSLWXS/SJSWXML/AXMLWXSS/ACSSJSONJSTypescript模块运时抹平注引PostHtml内置组件指令属性模版事件代理特殊语法PostCSS选择器引JSON配置项引WXS/SJSWXML/AXMLWXSS/ACSSJSONJS项源件Source源码类
8、型Source Type件类型Type转换层Transformer多端产物OutcomeTypescript模块引运时抹平注WebWeb 组件Web 应JSCSS程序静态编译原理React 组件如何解决程序转 Web 运时原理如何解决多端多形态的问题?痛点:由于形态差异,各端分别维护套代码淘:付宝程序接淘宝作为程序插件:微信分包接付宝作为程序插件饿:付宝程序插件接饿了么作为程序微:付宝程序接微信作为程序分包案:消除形态差异(业务难以适配的部分)getApp差异 全局样式差异 NPM使限制 App 应命周期差异 接调限制 路由差异形态差异解决办法举例 命周期与全局函数形态差异解决办法举例 全局样
9、式形态差异解决办法举例 NPM 构建持如何治理“复杂程序”?特征跨业务领域周期多团队协同主链路+多分表现应形态多样业务诉求多样关联业务“复杂程序”的定义解决应架构与研发协作问题如何治理“复杂程序”业务示例、问题剖析与解法核痛点由 主包+N个分包组合成耦合流程弱编译慢体积N个业务相互耦合,法独部署,研发效率低所有分包编译完才能预览,单分包失败导致整体失败研发流程不规范,业务稳定性较差,发版质量难以保障整包接近上限,存在量重复依赖解决案线下线上结合的集成研发能饿了么微信程序 业务形态主包:、订单、我的频道分包店铺分包搜索分包评价分包零售分包地址分包会员分包分包 x N如何治理“复杂程序”线下集成研
10、发业务 D分包业务 E分包业务 A分包业务 B分包业务 C分包业务 F分包业务 G分包业务 H分包业务 I分包完整程序(程序宿主,提供基础能,由各个分包消费)宿主程序(程序宿主,提供基础能)业务 D插件业务 E插件业务 A程序业务 B程序业务 C程序业务 F插件独程序程序插件程序宿主业务 D分包业务 E分包业务 F分包程序分包集成前:各个业务以不同形态存在相互解耦,独研发、调试、部署集成与基础能注集成后:合并为个完整程序宿主+多形态业务+依赖及聚合程序形态转换复杂程序集成通信机制路由约定能注模块编译模块合并产物复数据隔离依赖共享复杂程序 线上研发协作再进步,多端业务最佳实践Applicatio
11、n渠道应主体壳程 产品能 承接 渠道 业务Framework宿主应框架基础服务研发规范 渠道扩 展策略 多端 形态抽象模块业务组件具配套业务差异分层定制研发能定制统应主体业务灵活闭环标准化的能沉淀轻量化的宿主程渠道扩展定制基础能供给通能沉淀基础框架扩展基础组件基础 API最佳实践数据&实验多端组件库动线时序策略基础性能优化安全控账号绑定络请求全局路由具库Webview授权登录定位管理监控&快排基础能持续升级标准化接渠道差异抹平统接标准配置化运中化管理运时业务配置能服务可插拔SDK 统收渠道编译配置产品多端研发框架多端研发平台多端研发规范程序主包程序分包程序插件 业务 功能业务 1研发撑业务 2
12、业务 3业务 4业务 5业务 N渠道投放多端应分层架构标准化DSL及研发规范程化研发框架及平台场景化多业务/多场景/多形态跨端成果 业务效果&研发提效饿了么付宝程序饿了么微信程序饿了么淘宝程序饿了么抖程序饿了么淘特程序饿了么M站(Web)研发提效:采码多端和集成研发模式的业务平均提效70%,同构的端越多提效越多 多端占:饿了么内部85%+的多端业务基于该案实现多渠道业务研发和投放 业务覆盖:涵盖了饿了么全域等各个业务板块能沉淀 饿了么研 MorJS 多端研发框架多端研发框架多端集成编译构建脚架插件Mock统计分析预览MorJS技术能开源https:/ 饿了么研 MorJS 多端研发框架 架构呈
13、现程化撑morjs/cli运时核库morjs/core增强程序AppaApp程序aPage程序组件aComponent程序插件aPlugin拓展能代码混Mixin通信/共享Share命周期Hooks插件能Plugin基础能差异兼容API事件派发Event上下管理Context路由约定NavigateMor 态(规划中)Mor UI 组件库解决案Solution状态管理Store络请求Request程序 JS 依赖库规范程序多端组件库规范程序多端运时规范程序宿主、分包、插件、模块等可插拔机制研发规范程序多端开发具&套件&插件扩展规范社区态(规划中)社区程序原组件库开源 Utils 等Mor 社区
14、插件运时基础库morjs/api多端兼容程序运时兼容runtime-miniWeb 运时兼容runtime-web运时适配库开源态编译morjs/plugin-compiler集成morjs/plugin-composer微信 DSL付宝 DSL付宝程序持morjs/plugin-compiler-alipay微信程序持morjs/plugin-compiler-wechatQQ 程序持morjs/plugin-compiler-qq百度程序持morjs/plugin-compiler-baidu字节程序持morjs/plugin-compiler-bytedance钉钉程序持morjs/pl
15、ugin-compiler-dingding快程序持morjs/plugin-compiler-kuaishou脚架morjs/plugin-generator模版成generate程序分包程程序插件程Mor 编译插件程初始化init/create运时插件程运时 Solution 程程序组件程序模版分析morjs/plugin-analyzer多端编译多端形态体程序分包插件可扩展编译插件compose 命令持,提供 宿主、分包、插件、模块 等的集成功能及可插拔机制程序analyze 命令持,提供 代码分析检查、依赖分析和包分析等功能条件编译件/代码纬度多端组件持标准程序程Mockmorjs/p
16、lugin-mockerMock 能持,提供了标准化的 mock 能,如 JSAPI、络请求等Web 应持morjs/plugin-compiler-web淘宝程序持morjs/plugin-compiler-taobao多端研发规范实现细节架构设计技术思考能沉淀 饿了么研 MorJS 多端研发框架 持情况2 种 DSL4 种形态9 个平台微信程序 DSL 付宝程序 DSL程序/程序插件 程序分包/程序多端组件微信/付宝/百度/字节快/钉钉/淘/QQ/Web能沉淀 饿了么研 MorJS 多端研发框架 特性介绍能沉淀 饿了么研 MorJS 多端研发框架 使案例微 信 程 序 付 宝 程 序抖 程 序淘 宝 程 序H5能沉淀 饿了么研 MorJS 多端研发框架 户原声当前市最接地的程序框架 是否 KPI 项,会期维护么?MorJS 考虑持下快应么?有状态管理(Store)持么?持社区组件库么?效果还不错!对 Taro 和 UniApp 的优势是什么?赞!帮我解决了微信程序转H5 的问题能沉淀 饿了么研 MorJS 多端研发框架 初 KPI项量项使期持续迭代历经数年打磨能沉淀 饿了么研 MorJS 多端研发框架 社区服务欢迎使钉钉 扫码加群号:29445021084展望未来扩展编译标平台提升多端可度完善社区组件库兼容未来与愿景MorJS 框架向未来愿景成为程序多端研发的基础设施