簡介：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)能力。

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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。