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

饿了么前端⼯程负责⼈/刘宇 ⽬录 •跨端技术背景与演进历程•基于⼩程序跨端的⾏业现状和思考•基于⼩程序DSL的跨端解决⽅案•展望未来 跨端技术背景与演进历程 跨端，跨的究竟是哪些端？ 移动跨端技术演进历程 业务特点 围绕线上线下服务多⾏业精细化运营多形态多渠道投放时空体验规模成本 经营诉求 商家：曝光和成交 平台：规模和流量 饿了么跨端投放现状—问题、诉求和策略 渠道差异与限制 应⽤复杂度提升 ⾼度不确定性 渠道问题 渠道环境不确定性 渠道的运⾏环境渠道的流量特性渠道的业务定位渠道的管控规则 业务关联关系团队协作模式功能对⻬策略能⼒感知范围 业务诉求不确定性 2.渠道定位 3.业务运营策略 ⼩程序（主）+ H5（辅）：N个渠道、N个业务、N个应⽤、N个框架、N个团队 策略 渠道业务灵活性？研发体验和效率？ 围绕“研发体验⼀致性提升与复杂应⽤协作机制改进”双向保障业务⾼效迭代 饿了么跨端投放现状—残酷的现实 现实 基于⼩程序跨端的⾏业现状和思考 为什么饿了么选择以⼩程序DSL为基础实现跨端？ 上述开源框架能否解决我们⾯临的问题？——并不能 以⼩程序DSL构建跨端解决⽅案 基于⼩程序DSL的跨端解决⽅案 如何解决⼩程序多端编译—静态编译原理 如何解决⼩程序多端编译—运⾏时补偿原理 如何解决⼩程序转Web？ 业务投放 细分渠道或⾮⼩程序环境渠道银⾏⾦融渠道、客户端极⼩包、⼴告投放等以H5来承接 衡量因素 研发成本和维护成本独⽴维护⼀套H5划不来 ⼩程序转Web编译时+运⾏时 ⽅案 重点解决 •将JS、WXS/SJS、WXML/AXML、JSON⽂件合并为JS⽂件并转换为React组件 •WXSS/ACSS转换为CSS⽂件 如何解决⼩程序转Web —运⾏时原理 如何解决多端多形态的问题？ 痛点：由于形态差异，各端分别维护⼀套代码 ⼊淘：⽀付宝⼩程序接⼊淘宝作为⼩程序插件 •getApp差异•全局样式差异•NPM使⽤限制•App应⽤⽣命周期差异•接⼝调⽤限制•路由差异 ⼊微：⽀付宝⼩程序接⼊微信作为⼩程序分包 ⼊⽀：微信分包接⼊⽀付宝作为⼩程序插件 ⼊饿：⽀付宝⼩程序插件接⼊饿了么作为⼩程序 形态差异解决办法举例—⽣命周期与全局函数 形态差异解决办法举例—全局样式 形态差异解决办法举例— NPM构建⽀持 如何治理“复杂⼩程序”？ 解决应⽤架构与研发协作问题 表现 如何治理“复杂⼩程序” —业务示例、问题剖析与解法 核⼼痛点 饿了么微信⼩程序 业务形态 解决⽅案 线下线上结合的集成研发能⼒ 如何治理“复杂⼩程序” —线下集成研发 复杂⼩程序—线上研发协作 跨端成果—业务效果&研发提效 •研发提效：采⽤⼀码多端和集成研发模式的业务平均提效70%，同构的端越多提效越多 •多端占⽐：饿了么内部85%+的多端业务基于该⽅案实现多渠道业务研发和投放 •业务覆盖：涵盖了饿了么全域等各个业务板块 能⼒沉淀—饿了么⾃研MorJS多端研发框架 能⼒沉淀—饿了么⾃研MorJS多端研发框架—⽀持情况 微信/⽀付宝/百度/字节快⼿/钉钉/⼿淘/QQ/Web 微信⼩程序DSL⽀付宝⼩程序DSL ⼩程序分包/⼩程序多端组件 能⼒沉淀—饿了么⾃研MorJS多端研发框架—特性介绍 能⼒沉淀—饿了么⾃研MorJS多端研发框架—使⽤案例 淘宝⼩程序 能⼒沉淀—饿了么⾃研MorJS多端研发框架—⽤户原声 能⼒沉淀—饿了么⾃研MorJS多端研发框架—初⼼ 能⼒沉淀—饿了么⾃研MorJS多端研发框架—社区服务 欢迎使⽤钉钉扫码加⼊ 群号：29445021084 展望未来 未来与愿景