作者：閑魚技術(shù)-國有

image

在2018 GMTC大會(huì)上，Google Flutter宣布了首個(gè)發(fā)布預(yù)覽版。同臺亮相的閑魚，是國內(nèi)首個(gè)將Flutter用于大型實(shí)踐，并用在重要場景的應(yīng)用。同時(shí)閑魚對Flutter技術(shù)演進(jìn)也產(chǎn)生了重要的影響。做為新一代的高效移動(dòng)開發(fā)技術(shù)，F(xiàn)lutter受到了國內(nèi)開發(fā)者的密切關(guān)注。

本文邀請GMTC演講嘉賓閑魚架構(gòu)負(fù)責(zé)人王樹彬，分享閑魚的實(shí)踐效果和一些常見問題。

閑魚為什么選擇了Flutter？

Flutter是Google下一代操作系統(tǒng)Fuchsia的UI框架，在保持原生性能的條件下實(shí)現(xiàn)了跨端編程，為未來的移動(dòng)開發(fā)格局變革提供了巨大的機(jī)會(huì)和想象力。

很多朋友好奇，閑魚這樣一個(gè)業(yè)務(wù)快速發(fā)展的App，為什么敢于使用Flutter這樣的新技術(shù)。我想這一方面是因?yàn)殚e魚對技術(shù)的追求；另一方面，閑魚在正式引入Flutter前，對Flutter的原理、團(tuán)隊(duì)、趨勢做了充分的預(yù)研。

現(xiàn)有流行的跨端解決方案中，通常性能無法做到最好，很難達(dá)到與原生一樣的流暢體驗(yàn)。雖然閑魚一些頁面使用了現(xiàn)有的動(dòng)態(tài)化跨端方案，但出于個(gè)性化交互及流暢體驗(yàn)的考慮，主鏈路頁面（首頁、詳情、發(fā)布、消息、交易等）一直無法使用，只能用原生開發(fā)。Flutter通過自建繪制引擎，AOT編譯，線性布局和渲染等機(jī)制，達(dá)到了與原生一樣甚至更好的性能。仔細(xì)去了解Flutter的原理，會(huì)發(fā)現(xiàn)很多優(yōu)秀的設(shè)計(jì)。

image

閑魚Flutter解決了哪些問題？

在沒有經(jīng)過大規(guī)模應(yīng)用驗(yàn)證的情況下，框架成熟度和穩(wěn)定性有很大的風(fēng)險(xiǎn)和挑戰(zhàn)。此外，閑魚希望將現(xiàn)有的Native頁面漸進(jìn)式遷移到Flutter，這種混合開發(fā)，在業(yè)界還沒有成熟的先例。

閑魚做了個(gè)大膽的嘗試，挑選重要且復(fù)雜商品詳情頁作為第一個(gè)遷移到Flutter的頁面。通過這個(gè)方式，快速暴露和解決Flutter相關(guān)問題，最終項(xiàng)目順利成功。詳細(xì)可以到GMTC下載閑魚專場分享的文檔GMTC，或者關(guān)注“閑魚技術(shù)”公眾號查看更多深入的文章。

閑魚遇到的通用問題，已經(jīng)在Flutter官方中同步修復(fù)。一些混合編程的私有問題，閑魚會(huì)沉淀為文檔供大家參考，必要的組件也可以沉淀為Package。

解決的一些典型問題舉例如下

混合問題

• 混合工程
• 混合編譯，構(gòu)建
• 混合頁面棧管理
• Native視頻播放器復(fù)用
• Native頁面組件混合

兼容性問題

• Armv7編譯
• 視頻播放白屏
• 中文字體
• icu data
• 截圖
• 圖片內(nèi)存溢出Crash

當(dāng)然，我們還在繼續(xù)，有新的問題發(fā)現(xiàn)時(shí)會(huì)不斷優(yōu)化和完善。

image

能說說引入Flutter的實(shí)際效果和收益嗎？

性能上，F(xiàn)lutter頁面和Native頁面體驗(yàn)接近，甚至數(shù)據(jù)上看在一些低端機(jī)上Flutter會(huì)更流暢，人肉眼已經(jīng)很難區(qū)別。

研發(fā)效率上：

• 舊頁面遷移到Flutter的過程，效率是下降的。 以前沉淀的UI組件，需要在Flutter上重新實(shí)現(xiàn)。
• 對于全新的頁面需求，或者是已經(jīng)遷移完成的頁面上的新需求，可以明顯看到Flutter跨端帶來的效率提升。除了兩端變一端的好處外，還有協(xié)同減少、一致性提升、Hotreload開發(fā)等好處。
• 此外，F(xiàn)lutter線上仍然有一些Crash存在，雖然比例不高，但還是會(huì)帶來一定的排查成本。定位這類問題需要對Flutter的原理有一定的理解。

包大小的問題你怎么看？

Android的Apk增加8M，iOS壓縮包增加16M。
包大小確實(shí)是大家需要權(quán)衡的問題。我的理解，非常大的App（100M+）以及非常小的App（10M-），通常會(huì)對包大小非常敏感。需要應(yīng)用根據(jù)自己的情況來權(quán)衡。

評估包大小問題時(shí)，幾個(gè)額外信息提供大家方便參考：

• 包大小是官方正在重點(diǎn)優(yōu)化的一個(gè)問題。以Android為例，我覺得有希望優(yōu)化到5M以下。
• 考慮到Flutter有Treeshaking技術(shù)，無用的代碼不會(huì)編譯到安裝包中，所以隨著依賴包的變多，F(xiàn)lutter與Native相比，占用的空間會(huì)更小。如果把一些Native頁面遷移到Flutter頁面，Native依賴的減少，有希望抵消Flutter基礎(chǔ)包的大小。 這也需要根據(jù)實(shí)際情況評估。

Flutter支持動(dòng)態(tài)性嗎？

Flutter目前還不支持線上動(dòng)態(tài)性，雖然有解決方案，但閑魚也并未將動(dòng)態(tài)做為重點(diǎn)?？缍?、動(dòng)態(tài)、性能目前還是個(gè)三角形，無法兼得。

Android上通過更新Flutter產(chǎn)物，較容易實(shí)現(xiàn)動(dòng)態(tài)。iOS上由于審核原因，實(shí)現(xiàn)動(dòng)態(tài)的成本很高。

有些策略可以一定程序緩解動(dòng)態(tài)要求，但無法完全解決：

• 建設(shè)更快速的發(fā)版能力及更完備的自動(dòng)化測試。
• 將頁面組件化，由服務(wù)端組裝組件并推送到客戶端。

image

Flutter的線上穩(wěn)定性目前怎么樣了？

大家可以關(guān)注閑魚已經(jīng)遷移完成的頁面，目前是商品的詳情頁。詳情頁用到的Flutter接口和功能，目前已經(jīng)線上驗(yàn)證OK，達(dá)到生產(chǎn)穩(wěn)定性的要求。閑魚正在逐步將Flutter應(yīng)用在更多的頁面，覆蓋的場景會(huì)越來越多，歡迎關(guān)注閑魚后續(xù)進(jìn)展。

詳情頁覆蓋的主功能包括：

• 視頻播放
• 圖片
• ListView
• 鍵盤
• 浮層
• 動(dòng)畫
• 截屏

總結(jié)

閑魚會(huì)繼續(xù)與Google和社區(qū)緊密合作，完善Flutter，并基于Flutter建設(shè)全新的一體化研發(fā)模式。希望為業(yè)界類似App提供架構(gòu)參考。

歡迎敢于挑戰(zhàn)，有勇氣改變世界的同學(xué)，加入閑魚，一起打造新一代高效研發(fā)架構(gòu)，一起實(shí)現(xiàn)讓天下沒有閑置的夢想。

歡迎聯(lián)系樹彬： guoyou@alibaba-inc.com

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/18382.html