闲鱼研发框架应用和探索
Flutter是開源的UI工具包,其能夠幫助開發(fā)者通過一套代碼庫高效構(gòu)建多平臺(tái)精美應(yīng)用,支持移動(dòng)、Web、桌面和嵌入式平臺(tái)。在AliFlutter 系列第二場直播中,阿里巴巴閑魚無線技術(shù)專家梁治峰為大家分享了閑魚在Flutter中研發(fā)框架應(yīng)用和探索,從分別從三個(gè)方向介紹Flutter一體化研發(fā)模式、Flutter動(dòng)態(tài)化能力、Flutter互動(dòng)能力。
演講嘉賓簡介:梁治峰(花名:玄川),阿里巴巴無線技術(shù)專家,閑魚買家鏈路客戶端負(fù)責(zé)人,主導(dǎo)閑魚Flutter化的落地和研發(fā)框架演進(jìn)。
本文內(nèi)容根據(jù)演講視頻以及PPT整理而成。
觀看回放http://mudu.tv/watch/5466337
本次分享的主題主要包括以下五個(gè)方面:
一、閑魚Flutter研發(fā)框架使用現(xiàn)狀
二、Flutter研發(fā)框架下一代模式
三、Flutter研發(fā)框架下動(dòng)態(tài)能力
四、Flutter研發(fā)框架下互動(dòng)能力
五、后續(xù)規(guī)劃和展望
一、閑魚Flutter研發(fā)框架使用現(xiàn)狀
閑魚是一個(gè)側(cè)重于電商業(yè)務(wù)的平臺(tái),因此隨著業(yè)務(wù)的不斷增長,系統(tǒng)的邏輯復(fù)雜度也在不斷提升。因?yàn)閷儆陔娚虡I(yè)務(wù),所以對(duì)于流量和運(yùn)營的數(shù)據(jù)具有較高的需要,因此在閑魚的體系中也需要具備動(dòng)態(tài)性的能力,并且還需要通過增加特效的能力來增加用戶的感知,豐富用戶的體驗(yàn)。
二、Flutter研發(fā)框架下一代模式
一體化模式
下圖中左側(cè)是傳統(tǒng)的客戶端-服務(wù)器架構(gòu)。在這樣的CS架構(gòu)下,對(duì)于客戶端開發(fā)者而言,往往都會(huì)經(jīng)歷相似的痛點(diǎn)。當(dāng)產(chǎn)品的需求過來,可能客戶端的開發(fā)同學(xué)并不能自己完成,而需要牽扯到服務(wù)端的開發(fā),可能需要對(duì)于協(xié)議進(jìn)行補(bǔ)充或者添加更多的接口能力。而對(duì)于后端開發(fā)同學(xué)而言,面對(duì)一個(gè)需求也可能需要領(lǐng)域服務(wù)的支持。這樣一來,一個(gè)貌似很簡單的需求,卻需要從客戶端到后端再到領(lǐng)域服務(wù)的相互協(xié)調(diào),進(jìn)而會(huì)影響需求的排期問題。而如果客戶端也可以寫服務(wù)端的代碼,這樣的問題是否就能夠被解決掉呢?
在目前閑魚所給予的FaaS框架下的一些場景中也存在上述痛點(diǎn)。如下圖所示的是傳統(tǒng)基于FaaS的模式,可以看出使用FaaS能夠?qū)⑦壿嫼蚒I徹底進(jìn)行分離,但是在端上的邏輯部分,無外乎兩種,一種是數(shù)據(jù)的拉去和推送,另外一種是數(shù)據(jù)的主賬號(hào)。在后端也會(huì)有類似的邏輯,只不過此時(shí)不是客戶端找服務(wù)端要數(shù)據(jù),而是服務(wù)端找各個(gè)領(lǐng)域?qū)右枰臄?shù)據(jù),然后進(jìn)行數(shù)據(jù)的加工,再將數(shù)據(jù)以面向客戶端協(xié)議的部分進(jìn)行主賬號(hào)推送。而上述兩個(gè)部分存在著一定的邏輯割裂,并且也存在一定的重復(fù)工作,因?yàn)閿?shù)據(jù)轉(zhuǎn)化被執(zhí)行了兩次。那么,是否能夠?qū)⑸鲜鰞煞N邏輯合二為一,并且讓端上的同學(xué)進(jìn)行開發(fā),同時(shí)將邏輯后端化呢?結(jié)合如今Serverless的能力,可以做到在輕量級(jí)能力下支持多語言的開發(fā)。
基于上述的背景,閑魚在今年實(shí)現(xiàn)了一體化的研發(fā)解決方案。在云側(cè)兼容了集團(tuán)通用的Gaia容器化能力,用Dart語言實(shí)現(xiàn)了容器化的部分。之所以使用Dart是因?yàn)檫@部分與Flutter對(duì)應(yīng)。阿里巴巴希望客戶端寫后端的情況與Flutter使用一體化的語言來完成,屏蔽兩者之間的差異。在端側(cè)研發(fā)了Nexus一體化插件,將現(xiàn)在面向Action的部分可以實(shí)現(xiàn)端側(cè)與云側(cè)的一體化。這樣的好處在于在端側(cè)叫Action,在云側(cè)也叫Action,而在端上進(jìn)行開發(fā)的時(shí)候并沒有感知云側(cè)Action的存在,這就是Nexus的核心作用。此外,現(xiàn)在面向于通信協(xié)議其實(shí)就是面向于API接口的一部分,這樣能夠?qū)崿F(xiàn)端上的高性能和邏輯內(nèi)聚。
這里簡單介紹一下一體化框架的具體落地場景。對(duì)于下圖所示的閑魚下單的頁面而言,在原有模式下可能需要5個(gè)請(qǐng)求接口,這部分請(qǐng)求接口可能部分在端上,部分在云上,并且通過一條信息流進(jìn)行合并。這種情況下如果需要修改某種狀態(tài)就會(huì)非常復(fù)雜。在改造完成之后就將原來的5個(gè)請(qǐng)求接口全部實(shí)現(xiàn)Action協(xié)議化,這樣的好處在于云端的模型統(tǒng)一了,無論是對(duì)于云還是客戶端都在寫同樣的邏輯,只不過這樣的邏輯部署到了云上。其次,還屏蔽掉了協(xié)議的具體部分,只留下了協(xié)議名稱。第三點(diǎn)好處在于實(shí)現(xiàn)了邏輯的歸一,所有的邏輯都實(shí)現(xiàn)了云端化,大家在書寫這樣的邏輯時(shí)不會(huì)存在割裂,最終書寫的邏輯都是面向云模型的狀態(tài)。第四個(gè)優(yōu)點(diǎn)是冗余代碼將會(huì)大大減少。而最大的好處在于形成了很好的業(yè)務(wù)的閉環(huán),讓客戶端開發(fā)也可以應(yīng)用開發(fā)的部分工作。
三、Flutter研發(fā)框架下動(dòng)態(tài)能力
閑魚本質(zhì)上主要是一個(gè)電商業(yè)務(wù)平臺(tái),其在于流量側(cè)具有強(qiáng)運(yùn)營時(shí)效的特性,很多的運(yùn)營活動(dòng)或者決策需要得到及時(shí)的響應(yīng),如果在這種情況下不具有動(dòng)態(tài)性就會(huì)陷入被動(dòng)。完整的動(dòng)態(tài)性包括了邏輯動(dòng)態(tài)性和UI動(dòng)態(tài)性,但是在流量側(cè)部分更加注重UI動(dòng)態(tài)性,輕邏輯重UI。接下來將與大家分享在Flutter側(cè)如何使用這樣一個(gè)微能力的解決方案。
動(dòng)態(tài)模板
動(dòng)態(tài)模板在阿里巴巴整個(gè)集團(tuán)內(nèi)部都是一套比較成熟的解決方案。首先,通過DX平臺(tái)編輯模板,編輯成二進(jìn)制文件并生成模板下載鏈接,之后模板下載解壓,進(jìn)行表達(dá)式或者事件的注冊(cè),并對(duì)于數(shù)據(jù)進(jìn)行綁定解析,使得組件得到渲染。借助于集團(tuán)動(dòng)態(tài)模板的成熟方案,所需要解決的就是在Flutter側(cè)如何滿足DSL的UI表達(dá),來實(shí)現(xiàn)UI布局。
核心問題-Layout
熟悉安卓或者Flutter的人會(huì)發(fā)現(xiàn)這兩部分的UI表達(dá)其實(shí)是格格不入的,那么如何在Flutter側(cè)實(shí)現(xiàn)一套安卓UI布局呢?其實(shí)完整的UI表達(dá)是樣式+布局+內(nèi)容組合實(shí)現(xiàn)的。根據(jù)Flutter的源碼可以看出,在其布局表達(dá)里面,樣式、布局、內(nèi)容三個(gè)要素表達(dá)是徹底分離的。相反而言,在安卓的DSL的架構(gòu)里面,樣式和布局是結(jié)合的,內(nèi)容部分是分離的。如果將安卓的部分也進(jìn)行拆分可以一一映射到Flutter中,雖然描述部分可以很容易地做映射,但是核心困難在于布局部分,主要是關(guān)于大小的抽象性描述,因此需要了解在Flutter側(cè)是如何表達(dá)布局的約束的。
其實(shí)在Flutter側(cè)主要有兩種對(duì)于布局的約束設(shè)計(jì),分別是盒子模型和條子模型,而以上兩種都是感性描述的約束性布局。除此之外,還提供了30多個(gè)布局的容器部分。這是因?yàn)榛谏厦娴母行悦枋龅募s束布局情況下,Flutter可能會(huì)存在大量的冗余代碼,在約束布局情況下就會(huì)顯得特別復(fù)雜。另外一部分在于性能部分,感性描述遠(yuǎn)遠(yuǎn)沒有大于量行描述,因此Flutter提供的30多個(gè)量行約束是對(duì)于性能的考究。反觀安卓的布局部分,相對(duì)比較少,大約為4、5個(gè),所以這里的問題就是如何將安卓的布局部分使用Flutter的布局來表達(dá)或者描述。如果想要使用特性來做映射是很困難的,如果退而求其次,使用共性部分的盒子模型和條子模型似乎可以表達(dá)。
布局表達(dá)
如果在端側(cè)已經(jīng)完成對(duì)于動(dòng)態(tài)模板樹形結(jié)構(gòu)的解析之后,就能夠很容易地將樹形結(jié)構(gòu)的節(jié)點(diǎn)實(shí)現(xiàn)如下圖所示的一拆三結(jié)構(gòu)。第一層是裝飾層結(jié)構(gòu),中間層可以基于自低向上和自頂向下的計(jì)算規(guī)則重新計(jì)算出大小,最后一部分則是將內(nèi)容想要表達(dá)的葉子界面進(jìn)行Backup。為了實(shí)現(xiàn)安卓這樣的布局結(jié)構(gòu)阿里巴巴引入了安卓的Spec Model模型,其很主要的作用就是表達(dá)當(dāng)需要做依賴于內(nèi)容適配等情況下,可以使用Min_width的最大估算來預(yù)估大小部分,再從自底向上來計(jì)算出實(shí)際的Size。動(dòng)態(tài)模板在Flutter側(cè)的實(shí)現(xiàn)主要解決的就是這樣的側(cè)重點(diǎn)部分。
業(yè)務(wù)效果
整套方案經(jīng)過閑魚一整年的打磨之后,已經(jīng)有大量的業(yè)務(wù)上線和應(yīng)用了。無論是卡片還是其他布局部分,都能夠使用Flutter UI實(shí)現(xiàn)。
性能參考
動(dòng)態(tài)性部分往往會(huì)和性能存在一定的博弈。在閑魚的實(shí)踐中得到的實(shí)際結(jié)果表明,使用動(dòng)態(tài)模板的DSL來表達(dá)的性能還可以接受,線上的實(shí)際效果大約在55幀左右,相比于正常使用Flutter原生的60幀僅僅存在可被接受的一點(diǎn)差距。
性能的下一步探索
雖然目前的方案和Flutter原生僅存在5幀的差距,但是如果能夠進(jìn)一步優(yōu)化,還是有可能達(dá)到原生的性能要求的。下圖中分別展現(xiàn)了使用Flutter原生和DX寫的卡片布局,可以直觀地發(fā)現(xiàn)在Flutter原生使用了大量的高階型特性表達(dá),在DX中則基本都是常見的容器布局,并且樹形結(jié)構(gòu)的深度層次遠(yuǎn)遠(yuǎn)大于Flutter原生。DX中使得長度變大的部分在于裝飾性的布局部分,因此可以嘗試地探索在DSL的表達(dá)部分將Padding在容器層進(jìn)一步縮短結(jié)構(gòu),可能會(huì)提高FPS,也就是將現(xiàn)在的簡單容器布局進(jìn)行特性升級(jí)。
四、Flutter研發(fā)框架下互動(dòng)能力
背景與現(xiàn)狀
在電商領(lǐng)域的業(yè)務(wù)里面,很多業(yè)務(wù)想要通過游戲化的方式創(chuàng)造更有表現(xiàn)力的交互體驗(yàn),創(chuàng)造新的業(yè)務(wù)玩法和價(jià)值。傳統(tǒng)的UI表達(dá)方式,越往后就會(huì)越受限,因此需要將UI和游戲引擎的邊界打破,讓UI具有游戲的豐富動(dòng)效能力,也讓游戲引擎具有UI的豐富控件能力。在傳統(tǒng)APP的框架下,所能夠做的無外乎嫁接游戲引擎,而這樣的游戲引擎和原來的APP是格格不入,也是不相通的,其能夠帶來的最大效果就是開辟一個(gè)獨(dú)立的頁面來承載游戲,但這樣的方式似乎不是所想要達(dá)到的設(shè)計(jì)理念。在Flutter側(cè),今年推出了Flame這個(gè)游戲框架,其解決了單邊引用的過程。Flame使得在Flutter框架里面可以將游戲的控件進(jìn)行合攏,但是無法實(shí)現(xiàn)在游戲里面合攏UI界面,因此提供了單邊能力。Flame雖然沒有完全解決雙邊打通的訴求,但是還是提供了很好的思路。
核心問題-融合
目前而言,所需要解決的核心問題就是將UI和游戲引擎融合。Flame的表現(xiàn)形式其實(shí)就是將完整的游戲封裝在起來,能夠很好地將游戲插入到UI中。假如將Flame游戲引擎的表達(dá)也用類似于RenderObject樹形結(jié)構(gòu)的表達(dá),就會(huì)形成兩棵Flutter體系下的樹結(jié)構(gòu),能夠很好地進(jìn)行融合比對(duì)。閑魚在這樣的思路下進(jìn)行了新的探索和嘗試,重新設(shè)計(jì)了一套互動(dòng)游戲引擎,彌補(bǔ)了Flame不能滿足的需求問題。
Candy整體設(shè)計(jì)
Candy是符合ECS標(biāo)準(zhǔn)的,與Flutter高度融合的原生開發(fā)高性能互動(dòng)開發(fā)框架。Candy在架構(gòu)設(shè)計(jì)上完全按照ECS的標(biāo)準(zhǔn);在接口設(shè)計(jì)上對(duì)齊了阿里巴巴集團(tuán)的互動(dòng)EVA,使得集團(tuán)內(nèi)部在使用時(shí)不會(huì)對(duì)于接口感到陌生;在應(yīng)用能力上,Candy完全融入了Flutter的繪制體系;在擴(kuò)展能力上,Candy保留了游戲子系統(tǒng)化能力的補(bǔ)充,能夠滿足UED主流能力,使得不同公司或者行業(yè)開發(fā)者能夠更好地使用自己所熟悉的工具體系。
效果
在閑魚中,簽到、換取閑魚幣等常用的按鈕在游戲中使用了Flutter的游戲控件,能夠非常簡單地將游戲以Widget形式插入到Flutter頁面中,而這對(duì)于使用者而言不會(huì)產(chǎn)生任何感知。此外,對(duì)于傳統(tǒng)應(yīng)用的開發(fā)者,也能夠很輕松地將具有動(dòng)畫能力、游戲能力的控件外透,并且與UI進(jìn)行融合。
效果-骨骼
目前,閑魚的內(nèi)部方案能夠很好地實(shí)現(xiàn)龍骨的動(dòng)畫。正是因?yàn)樵谧酉到y(tǒng)中保留了這樣的能力,所以如果未來有其他方案也可以按照ECS標(biāo)準(zhǔn)進(jìn)行主流格式的實(shí)現(xiàn)。
效果-調(diào)試
值得一提的是因?yàn)橐婧蚒I不分家,使得在調(diào)試工具的使用過程中能夠更好地看出游戲或者動(dòng)畫頁面的布局情況,降低了調(diào)試工作的難度。
性能參考
基于Render層的設(shè)計(jì)使得我們享受到了Flutter引擎?zhèn)葘?duì)于Canvas的優(yōu)化,也享受到了在Flutter Framework上局部刷新能力,因此無論是實(shí)現(xiàn)粒子還是實(shí)現(xiàn)骨骼的動(dòng)畫,性能表現(xiàn)都非常不錯(cuò)。
五、后續(xù)規(guī)劃和展望
回顧本文內(nèi)容,首先為大家分享了Flutter側(cè)在布局方面的突破,Flutter這樣的開源框架具有足夠的能力能夠讓大家在其布局側(cè)進(jìn)行進(jìn)一步深挖。此外,還和大家分享了閑魚在Flutter互動(dòng)領(lǐng)域的突破,能夠很好地將UI和特效進(jìn)行融合。第三個(gè)突破就是閑魚在Dart側(cè)的突破,將Dart語言實(shí)現(xiàn)了云端開發(fā)和聯(lián)動(dòng),形成了邏輯后移的開發(fā)框架。而單點(diǎn)技術(shù)難以形成全面的合力,因此在后面與大家分享了將現(xiàn)有能力組合的情況產(chǎn)生不同的體系。假設(shè)將FaaS遠(yuǎn)端的動(dòng)態(tài)能力結(jié)合Nexus一體化能力、DX基于UI的表達(dá)能力,似乎就可以通過SSR寫完整的UI部分。同理,FaaS結(jié)合Candy也能夠?qū)崿F(xiàn)互動(dòng)編排的能力,將互動(dòng)能力在FaaS端進(jìn)行表達(dá)。
原文鏈接:https://developer.aliyun.com/article/765697?
版權(quán)聲明:本文中所有內(nèi)容均屬于阿里云開發(fā)者社區(qū)所有,任何媒體、網(wǎng)站或個(gè)人未經(jīng)阿里云開發(fā)者社區(qū)協(xié)議授權(quán)不得轉(zhuǎn)載、鏈接、轉(zhuǎn)貼或以其他方式復(fù)制發(fā)布/發(fā)表。申請(qǐng)授權(quán)請(qǐng)郵件developerteam@list.alibaba-inc.com,已獲得阿里云開發(fā)者社區(qū)協(xié)議授權(quán)的媒體、網(wǎng)站,在轉(zhuǎn)載使用時(shí)必須注明"稿件來源:阿里云開發(fā)者社區(qū),原文作者姓名",違者本社區(qū)將依法追究責(zé)任。 如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容,歡迎發(fā)送郵件至:developer2020@service.aliyun.com 進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。總結(jié)
以上是生活随笔為你收集整理的闲鱼研发框架应用和探索的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【趣话编程】一个Java对象的回忆录:垃
- 下一篇: 单机和分布式场景下,有哪些流控方案?