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

饿了么跨端技术的演进、实践与落地 饿了么前端⼯程负责⼈/刘宇 ⽬录 •跨端技术背景与演进历程 •基于⼩程序跨端的⾏业现状和思考 •基于⼩程序DSL的跨端解决⽅案 •展望未来 跨端技术背景与演进历程 设备平台 操作系统 移动应⽤ 渲染容器 PC/Mobile/OTT/IoT Android/iOS/HarmonyOS 微信/⽀付宝/⼿淘/抖⾳ Webview/ReactNative/Flutter （ 业务特点 围绕线上线下服务 多⾏业精细化运营 多形态多渠道投放时空体验规模成本 经营诉求 商家：曝光和成交平台：规模和流量 渠 道 流 量 ⽤户流量、订单规模对⼤盘贡献度⾼ …… 新渠道也在持续涌现和接⼊中 （ 线上 O2O 业 务 到家 零售 物流 SaaS …… 线下 服务 消费者 时、空、⼈、货 平台 曝光、成交 商家 区域经营 渠道差异与限制 渠道的运⾏环境 渠道的流量特性 渠道的业务定位 渠道的管控规则 ⾼度不确定性 渠道环境不确定性 1.商业能⼒与产品思路 2.能⼒成熟度与完整度 3.研发配套（语法、⼯具） 业务诉求不确定性 1.⽤户特性与诉求 2.渠道定位 3.业务运营策略 应⽤复杂度提升 业务关联关系 团队协作模式 功能对⻬策略 能⼒感知范围 渠道问题 ⼩程序（主）+H5（辅）：N个渠道、N个业务、N个应⽤、N个框架、N个团队 围绕“研发体验⼀致性提升与复杂应⽤协作机制改进”双向保障业务⾼效迭代 渠道业务灵活性？研发体验和效率？ 诉策 求略 研发框架升级⼤概率带来业务重构 前端协同需求vs差异化视⻆与节奏 推动框架统⼀实现⼀码多端 理想现实 降本增效 思考 渠道流量 ⼩程序>H5 影响与成本 决策：以⼩程序为第⼀视⻆来实现多端 基于⼩程序跨端的⾏业现状和思考 共同的特点：基于 React或者VueDSL 衡 量因 素 改造 成本 性能 体验 业务 协同 淘⽀微⼩程序运营多年 存量业务多以⽀付宝或 微信⼩程序DSL编写 渠道业务是重要的流量阵地 重视程度与App⽆差 对性能和体验要求⾼ 每个渠道都是⼀个⼩型饿了么App 业务复杂度⾼/多业务域协同 应⽤集成困难/全链路功能衔接困难 以⼩程序DSL构建跨端解决⽅案 上述开源框架能否解决我们⾯临的问题？——并不能 基于⼩程序DSL的跨端解决⽅案 如何解决⼩程序多端编译？ 单端 多端 适配 ⽬标 JSAPI差异 配置差异 ⽂件类型差异 模版指令差异 语法差异 ⽣命周期差异 引⽤⽅式差异 功能⽀持差异 ⾃定义组件差异 …… 差异分析 性能和体验 衡量因素 编译时（重） 运⾏时（轻） ⽅案选择 ⼩程 序JS 静态编 译 Typescript模块运⾏时引⽤JS 配置差异 ⽂件类型差异 模版指令差异 引⽤⽅式差异 功能⽀持差异 语法差异 …… 抹平注⼊ ⼩程序 原WXS/SJS 解决 理 Typescript模块 运⾏时 抹平注⼊引⽤ WXS/SJS ⽀付宝⼩程序微信⼩程序 Files 微信/⽀付宝 ⼩程序DSL WXML/AXML 模版内置事件 组件代理 PostHtml 指令属性特殊语法 WXML/AXML/QML/SWAN/TTML QQ⼩程序百度⼩程序字节⼩程序 JSON WXSS/ACSS JSON配置项引⽤ PostCSS选择器引⽤ JSON WXSS/ACSS/QSS/CSS/TTSS 钉钉⼩程序淘宝⼩程序快⼿⼩程序 项⽬源⽂件 Source 源码类型 SourceType ⽂件类型 Type 转换层 Transformer 多端产物 Outcome 执⾏createComponentwComponent/aComponent ⼊⼝函数调⽤ 触发Component初始 化插件逻辑 注⼊Mixins和 Behavior⽀持 转换Component多端 结构和逻辑差异 Component初始化 Component⽣命期 多端差异抹平 执⾏⼩程序 Component函数 ⼩程序启 动 运 ⾏时动态补 偿 触发注册Page ⽣命周期插件逻辑 Page⽣命周期 多端差异抹平 Page初始化 转换Page多端结构和 逻辑差异 注⼊Mixins⽀持 触发Page初始化 插件逻辑 执⾏createPage/wPage/aPage ⼊⼝函数调⽤ 触发注册App ⽣命周期插件逻辑 App初始化 触发注册App 初始化插件逻辑 初始化Plugin并 注册⽣命周期 业务Solution执⾏ 执⾏createApp/wApp/aApp ⼊⼝函数调⽤ 运⾏⼩程序跨端API转 换代码 JSAPI差异 ⽣命周期差异 实例⽅法差异 ⾃定义组件差异 运⾏时扩展 …… 解决 细分渠道或⾮⼩程序环境渠道 银⾏⾦融渠道、客户端极⼩包、⼴告投放等以H5来承接 业务投放 研发成本和维护成本 独⽴维护⼀套H5划不来 衡量因素 ⼩程序转Web 编译时+运⾏时 ⽅案 ⼩程 序JS 静态编 译 Typescript模块运⾏时引⽤JS 抹平注⼊ 重点解决 原理 Files 微信/⽀付宝 ⼩程序DSL WXS/SJS WXML/AXML Typescript模块 模版 PostHtml 运⾏时 抹平注⼊引⽤ 内置事件 组件代理 WXS/SJS WXML/AXML JS React Web Web组件 •将JS、WXS/SJS、WXML/AXML、JSON ⽂件合并为JS JSON 指令属性特殊语法 JSON配置项引⽤ JSON 组件 CSS Web应⽤ ⽂件并转换为 React组件 •WXSS/ACSS转换为CSS⽂件 WXSS/ACSS PostCSS选择器引⽤ WXSS/ACSS 项⽬源⽂件 Source 源码类型 SourceType ⽂件类型 Type 转换层 Transformer 多端产物 Outcome •getApp差异 •App应⽤⽣命周期差异 •全局样式差异 •NPM使⽤限制 •接⼝调⽤限制 •路由差异 …… 痛点：由于形态差异，各端分别维护⼀套代码⽅案：消除形态差异（业务难以适配的部分） ⼊淘：⽀付宝⼩程序接⼊淘宝作为⼩程序插件 ⼊微：⽀付宝⼩程序接⼊微信作为⼩程序分包 ⼊⽀：微信分包接⼊⽀付宝作为⼩程序插件 ⼊饿：⽀付宝⼩程序插件接⼊饿了么作为⼩程序 …… 解决应⽤架构与研发协作问题 特征 跨业务领域 ⻓周期 多团队协同 主链路+多分⽀ 表现 应⽤形态多样 业务诉求多样 关联业务⾯⼴ …… “复杂⼩程序”的定义 饿了么微信⼩程序业务形态 核⼼痛点 ⾼耦合 流程弱 编译慢 体积⼤ 主包：⾸⻚、订单、我的 频道分包 店铺分包 搜索分包 评价分包 零售分包 地址分包 会员分包 分包xN N个业务相互耦合，⽆法独⽴部署，研发效率低 研发流程不规范，业务稳定性较差，发版质量难以保障 所有分包编译完才能预览，单⼀分包失败导致整体失败 整包⼤⼩接近⼤⼩上限，存在⼤量重复依赖 解决⽅案 线下线上结合的集成研发能⼒ 由主包+N个分包组合⽽成 集成前：各个业务以不同形态存在相互解耦，独⽴研发、调试、部署 ⼩程序形态转换 集成与基础能⼒注⼊集成后：合并为⼀个完整⼩程序宿主+多形态业务+依赖及⻚⾯聚合 ⼩ 程业务D 序插件 插 件 ⼩ 程业务D 序分包 分 包 业务E插件 业务E分包 业务F插件 业务F分包 复杂⼩程序集成 通信机制路由约定 能⼒注⼊模块编译 模块合并产物复⽤ 数据隔离依赖共享 业务A分包 业务D分包 业务G分包 业务B分包 业务E分包 业务H分包 完整⼩程序 业务C分包 业务F分包 业务I分包 独 ⽴ ⼩程 序 业务A ⼩程序 业务B ⼩程序 业务C ⼩程序 ⼩程序宿 主 宿主⼩程序 （⼩程序宿主，提供基础能⼒） （⼩程序宿主，提供基础能⼒，由各个分包消费） 场景化 多业务/多场 景/多形态 ⼯程化 研发框架及 平台 标准化 DSL及研发 规范 业务 功能 业务1 业务2 业务3 业务4 业务5 …… 业务N 渠道统⼀应 业务⽤主体 多端 形态 ⼩程序主包 ⼩程序分包 ⼩程序插件 Application 渠道应⽤主体 业务灵 活闭环 渠道扩 展策略 业务差异分层定制 研发能⼒定制 基础框架扩展 壳⼯程 产品能 ⼒承接 产品⻚⾯ 业务组件 抽象模块 ⼯具配套 渠道扩 展定制 渠道投放 … 多端 应基通 础⽤ ⽤能能 分 ⼒⼒ 账号绑定 定位管理 ⼯具库 配置化运⾏ 渠道编译配置 运⾏时业务配置 基础API ⽹络请求 全局路由 安全⻛控 轻量化的 宿主⼯程 Framework 宿主应⽤框架 数据&实验 监控&快排 标准化接⼊ 统⼀接⼝标准 渠道差异抹平 标准化的 能⼒沉淀 基础组件 Webview 多端组件库 授权登录 最佳实践 动线时序策略 基础性能优化 中⼼化管理 SDK统⼀收⼝ 能⼒服务可插拔 基础能⼒ 持续升级 供沉 给淀 层 架构 基础服务 研发规范 多端研发框架 多端研发平台 多端研发规范 研发 ⽀撑 饿了么⽀付宝⼩程序饿了么微信⼩程序饿了么淘宝⼩程序 饿了么淘特⼩程序 饿了么抖⾳⼩程序 饿了么M站（Web） •研发提效：采⽤⼀码多端和集成研发模式的业务平均提效70%，同构的端越多提效越多 •多端占⽐：饿了么内部85%+的多端业务基于该⽅案实现多渠道业务研发和投放 •业务覆盖：涵盖了饿了么全域等各个业务板块 编译 分析 集成 预览 构建 多端 插件 脚⼿架 Mock 统计 MorJS 多端研发框架 技术能⼒开源 https://github.com/eleme/morjs ⼊⼝增强 标准⼩程序⼯程⼩程序分包⼯程⼩程序插件⼯程⼩程序App⼩程序⻚⾯初始化aAppaPage init/create 运⾏时Solution⼯程 脚⼿架Mor编译插件⼯程运⾏时插件⼯程运⾏时⼩程序组件⼩程序插件 aComponentaPlugin @morjs/plugin-generator核⼼库 模版⽣成⼩程序组件⼩程序模版⼩程序⻚⾯@morjs/拓展能⼒ generate core代码混⼊通信/共享MixinShare ⽀付宝⼩程序⽀持⽣命周期插件能⼒ 微信DSL@morjs/plugin-compiler-alipayHooksPlugin 多端编译微信⼩程序⽀持 @morjs/plugin-compiler-wechat解决⽅案 ⽀付宝DSLSolution QQ⼩程序⽀持 @morjs/plugin-compiler-qq 条件编译⽂件/代码纬度可百度⼩程序⽀持基础能⼒ 扩@morjs/plugin-compiler-baidu ⼯程化编译展差异兼容事件派发 ⽀撑@morjs/plugin-compiler编字节⼩程序⽀持运⾏时APIEvent多端组件⽀持译@morjs/plugin-compiler-bytedance基础库 @morjs/cli⼩程序插钉钉⼩程序⽀持上下⽂管理路由约定件@morjs/plugin-compiler-dingding@morjs/ContextNavigate 淘宝⼩程序⽀持api 多端形态⼀体分包@morjs/plugin-compiler-taobao状态管理⽹络请求StoreRequest 快⼿⼩程序⽀持 @morjs/plugin-compiler-kuaishou 插件Web应⽤⽀持多端兼容 @morjs/plugin-compiler-web运⾏时 ⼩程序运⾏时兼容Web运⾏时兼容 适配库runtime-miniruntime-web 集成 @morjs/plugin-composercompose命令⽀持，提供宿主、分包、插件、模块等的集成功能及可插拔机制 Mor⽣态（规划中） MorUI组件库Mor社区插件 分析analyze命令⽀持，提供代码分析检查、依赖分析和包⼤⼩分析等功能 @morjs/p