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

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