餓了么跨端技術(shù)的演進(jìn)實(shí)踐與落地-劉宇

餓了么跨端技術(shù)的演進(jìn)、實(shí)踐與落地餓了么前端工程負(fù)責(zé)人/劉宇跨端，跨的究竟是哪些端?PC/Mobile/OTT/loTAndroid/iOS/HarmonyOSWebview/ReactNative/Flutter移動(dòng)跨端技術(shù)演進(jìn)歷程2Hybrid階段3框架+原生階段4自繪渲染階段5小程序階段Cordova渠道(流量)業(yè)務(wù)經(jīng)營(yíng)訴求渠道(流量)業(yè)務(wù)經(jīng)營(yíng)訴求線商家版用戶流量、訂單規(guī)模對(duì)大盤貢獻(xiàn)度高放心點(diǎn)新渠道也在持續(xù)涌現(xiàn)和接入中業(yè)務(wù)特點(diǎn)線零售物流服務(wù)時(shí)、空、人、貨曝光、成交渠道問(wèn)題訴求渠道問(wèn)題訴求渠道差異與限制高度不確定性2.能力成熟度與完整度3.研發(fā)配套(語(yǔ)法、工具)1.用戶特性與訴求2.渠道定位3.業(yè)務(wù)運(yùn)營(yíng)策略應(yīng)用復(fù)雜度提升渠道業(yè)務(wù)靈活性?研發(fā)體驗(yàn)和效率?策略餓了么跨端投放現(xiàn)狀一殘酷的現(xiàn)實(shí)降本增效推動(dòng)框架統(tǒng)一實(shí)現(xiàn)一碼多端研發(fā)框架升級(jí)大概率帶來(lái)業(yè)務(wù)重構(gòu)這不維護(hù)這改才行文檔過(guò)期了才行單向數(shù)據(jù)流重構(gòu)吧框架開(kāi)發(fā)思考重構(gòu)吧框架開(kāi)發(fā)新特性影響與成本影響與成本渠道流量小程序>H5前端協(xié)同需求vs差異化視角與節(jié)奏基于小程序跨端的行業(yè)現(xiàn)狀和思考業(yè)界有哪些面向于小程序的研發(fā)框架?公司京東阿里集團(tuán)螞蟻集團(tuán)滴滴美團(tuán)支持平臺(tái)12個(gè)15個(gè)7個(gè)7個(gè)8個(gè)1個(gè)實(shí)現(xiàn)機(jī)制運(yùn)行時(shí)編譯時(shí)Runtime層，通過(guò)模擬種DSL,運(yùn)行時(shí)較重小程序端通過(guò)提供vue-時(shí)相對(duì)較重基于Webpack,主要用基于vue-runtime魔較重樣共同的特點(diǎn)：基于衡量因素衡量因素上述開(kāi)源框架能否解決我們面臨的問(wèn)題?-—并不能對(duì)性能和體驗(yàn)要求高案跨端解決方案適配單端單端生命周期差異配置差異引用方式差異文件類型差異模版指令差異語(yǔ)法差異功能支持差異自定義組件差異編譯時(shí)(重)運(yùn)行時(shí)(輕)小程序靜態(tài)編譯原理如何解決小程序多端編譯-靜態(tài)編譯原理小程序靜態(tài)編譯原理配置差異小程序WXS/SJS支付寶小程序文件類型差異微信小程序模版指令差異QQ小程序FilesWXML/AXML/QML/百度小程序字節(jié)小程序功能支持差異釘釘小程序淘寶小程序語(yǔ)法差異快手小程序WXSS/ACSS/QSS/CSS/TTSSSourceSourceType文件類型TypeTransformer小程序啟動(dòng)運(yùn)行時(shí)動(dòng)態(tài)補(bǔ)償小程序啟動(dòng)運(yùn)行時(shí)動(dòng)態(tài)補(bǔ)償wPage/aPagewComponent/aComponent換代碼執(zhí)行createApp/WApp/aApp觸發(fā)注冊(cè)App邏輯差異解決執(zhí)行結(jié)構(gòu)和邏輯差異銀行金融渠道、客戶端極小包、廣告投放等以H5來(lái)承接編譯時(shí)+運(yùn)行時(shí)小程序靜態(tài)編譯原理如何解決小程序轉(zhuǎn)Web-編譯原理小程序靜態(tài)編譯原理WXS/SJSWXS/SJSWXML/AXMLWXML/AXML組件WebSJS、WXMU/AXML、JSON文件并轉(zhuǎn)換為文件類型轉(zhuǎn)換層多端產(chǎn)物如何解決小程序轉(zhuǎn)Web-運(yùn)行時(shí)原理小程序?qū)Φ冗\(yùn)行時(shí)能力實(shí)現(xiàn)App/Page/Component.view/scroll-view/button..WXML/AXML業(yè)務(wù)運(yùn)行時(shí)自定義能力WXSS/ACSS分包形態(tài)如何解決多端多形態(tài)的問(wèn)題?分包形態(tài)痛點(diǎn)：由于形態(tài)差異，各端分別維護(hù)一套代碼方案：消除形態(tài)差異(業(yè)務(wù)難以適配的部分)小程序形態(tài)入微：支付寶小程序接入微信作為小程序分包入支：微信分包接入支付寶作為·接口調(diào)用限制形態(tài)差異解決辦法舉例一生命周期與全局函數(shù)插件或分包無(wú)應(yīng)用(APP)生命周期怎么辦?getApp方法調(diào)用缺失以及轉(zhuǎn)換后的getApp實(shí)例沖突怎么辦?App({Page({})轉(zhuǎn)換前小程序頁(yè)面自動(dòng)引用appjs,確保appjs的自動(dòng)初始化require('../app.js')varG=require('./subpackage.global.js');Page({onLoad(options)//somelogtc}轉(zhuǎn)換后的小程序頁(yè)面})(G.getApp)轉(zhuǎn)換后的小程序頁(yè)面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'];}形態(tài)差異解決辦法舉例一全局樣式小程序轉(zhuǎn)分包或插件之后全局樣式失效怎么辦?@import"../../app.wxss";@import"../../app.wxss";.banner-wrap{position:relative;}.banner{}}}形態(tài)差異解決辦法舉例—NPM構(gòu)建支持不同小程序平臺(tái)對(duì)npm構(gòu)建支持不同且不友好怎么解?組件提取組件編譯組件提取入口配置依賴分析動(dòng)態(tài)分組引用替換產(chǎn)物輸出如何治理"復(fù)雜小程序"?如何治理"復(fù)雜小程序"一業(yè)務(wù)示例、問(wèn)題剖析與解法零售分包評(píng)價(jià)分包地址分包由主包+N個(gè)分包組合而成復(fù)依賴獨(dú)立小程序小程序插件小程序分包獨(dú)立小程序小程序插件小程序分包小程序宿主分包形態(tài)集成前：各個(gè)業(yè)務(wù)以不同形態(tài)存在相互解耦，獨(dú)立研發(fā)、調(diào)試、部署小程序形態(tài)轉(zhuǎn)換集成與基礎(chǔ)能力注入集成后：合并為一個(gè)完整小程序宿主+多形態(tài)業(yè)務(wù)+依賴及頁(yè)面聚合復(fù)雜小程序集成分包分包小程序形態(tài)插件插件插件插件分包分包分包插件小程序小程序分包分包分包分包完整小程序復(fù)雜小程序一線上研發(fā)協(xié)作開(kāi)發(fā)階段集成階段發(fā)布階段發(fā)布完成主工程(主包)本地代碼開(kāi)發(fā)子工程(插件、分包)確認(rèn)參與迭代的業(yè)務(wù)主、子工程關(guān)聯(lián)部署測(cè)試完成開(kāi)發(fā)關(guān)聯(lián)主工程迭代主、子工程關(guān)聯(lián)部署測(cè)試生成體驗(yàn)版集成部署集成測(cè)試完成集成退回集成多渠道分發(fā)刪除分支、打上多渠道分發(fā)完成關(guān)聯(lián)的aone工作項(xiàng)完成發(fā)布同步各分包完成發(fā)布完成迭代進(jìn)入準(zhǔn)備發(fā)布狀態(tài)中止發(fā)布同步刪除分支、打上進(jìn)入準(zhǔn)備發(fā)布狀態(tài)中止發(fā)布同步完成關(guān)聯(lián)的aone工作項(xiàng)集成窗口結(jié)束，鎖定版本并關(guān)閉分包部署入口多端應(yīng)用分層架構(gòu)基礎(chǔ)能力供給多端應(yīng)用分層架構(gòu)基礎(chǔ)能力供給通用能力沉淀渠道投放多業(yè)務(wù)/多場(chǎng)景/多形態(tài)研發(fā)框架及DSL及研發(fā)Application殼工程數(shù)據(jù)&實(shí)驗(yàn)監(jiān)控&快排配置化運(yùn)行標(biāo)準(zhǔn)化接入統(tǒng)一應(yīng)輕量化的宿主工程能力沉淀持續(xù)升級(jí)跨端成果一業(yè)務(wù)效果&研發(fā)提效餓了么支付寶小程序餓了么微信小程序餓了么淘寶小程序水果水果餓了么淘特小程序◎近鐵城市廣場(chǎng)南座餓了么抖音小程序Q大潤(rùn)發(fā)星巴克專星送(近鐵城市廣場(chǎng)..我的·研發(fā)提效：采用一碼多端和集成研發(fā)模式的業(yè)務(wù)平均提效70%,同構(gòu)的端越多提效越多·多端占比：餓了么內(nèi)部85%+的多端業(yè)務(wù)基于該方案實(shí)現(xiàn)多渠道業(yè)務(wù)研發(fā)和投放·業(yè)務(wù)覆蓋：涵蓋了餓了么全域等各個(gè)業(yè)務(wù)板塊能力沉淀一餓了么自研MorJS多端研發(fā)框架編譯集成多端研發(fā)框架能力沉淀一餓了么自研MorJS多端研發(fā)框架一架構(gòu)呈現(xiàn)@morjs/plugin-compller-alipay序細(xì)節(jié)設(shè)計(jì)compose命令支持，提供宿主、分包、插件、模塊等的集成功能及可插拔機(jī)制analyze命令支持，提供代碼分析檢查、依賴分析和包大小分析等功能社區(qū)生態(tài)(規(guī)劃中)規(guī)范小程序宿主、分包、插件、模塊等可插拔機(jī)制研發(fā)規(guī)范小程序多端開(kāi)發(fā)工具&套件&插件擴(kuò)展規(guī)范小程序JS依賴庫(kù)規(guī)范小程序多端組件庫(kù)規(guī)范序多端運(yùn)行時(shí)規(guī)范能力沉淀-餓了么自研MorJS多端研發(fā)框架-支持情況微信小程序DSL小程序/小程序插件小程序分包/小程序多端組件能力沉淀一餓了么自研MorJS多端研發(fā)框架一特性介紹此外還支持插件和插件集，以滿足功能和MorJS內(nèi)置了腳手架、構(gòu)建、分析、多端經(jīng)餓了么內(nèi)部100+公司項(xiàng)目的驗(yàn)證，值流、復(fù)雜小程序集成、小程序形態(tài)轉(zhuǎn)換技術(shù)的探索。比如多端擴(kuò)充、高性能渲染方案等。微信小程序支付寶小程序抖音小程序淘寶小程序能力沉淀一餓了么自研MorJS多端研發(fā)框架-使用案例微信小程序支付寶小程序抖音小程序淘寶小程序餓了么餓了么餓了么餓了么智能服務(wù)餓了么超市蜂鳥跑腿組件庫(kù)示例餓了么超市蜂鳥跑腿組件庫(kù)示例蜂鳥跑腿餓了么果園醫(yī)療口腔餓了么外賣下單蜂鳥跑腿餓了么果園醫(yī)療口腔餓了么餓了么拼團(tuán)阿里本地生活聯(lián)盟餓了么拼團(tuán)餓了么智能服務(wù)餓了么拼團(tuán)餓了么M站能力沉淀一餓了么自研MorJS多端研發(fā)框架-用戶原聲效果還不錯(cuò)!贊!幫我