作者：閑魚技術-國有

image

在2018 GMTC大會上，Google Flutter宣布了首個發(fā)布預覽版。同臺亮相的閑魚，是國內首個將Flutter用于大型實踐，并用在重要場景的應用。同時閑魚對Flutter技術演進也產生了重要的影響。做為新一代的高效移動開發(fā)技術，Flutter受到了國內開發(fā)者的密切關注。

本文邀請GMTC演講嘉賓閑魚架構負責人王樹彬，分享閑魚的實踐效果和一些常見問題。

閑魚為什么選擇了Flutter？

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

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

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

image

閑魚Flutter解決了哪些問題？

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

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

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

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

混合問題

• 混合工程
• 混合編譯，構建
• 混合頁面棧管理
• Native視頻播放器復用
• Native頁面組件混合

兼容性問題

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

當然，我們還在繼續(xù)，有新的問題發(fā)現時會不斷優(yōu)化和完善。

image

能說說引入Flutter的實際效果和收益嗎？

性能上，Flutter頁面和Native頁面體驗接近，甚至數據上看在一些低端機上Flutter會更流暢，人肉眼已經很難區(qū)別。

研發(fā)效率上：

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

包大小的問題你怎么看？

Android的Apk增加8M，iOS壓縮包增加16M。
包大小確實是大家需要權衡的問題。我的理解，非常大的App（100M+）以及非常小的App（10M-），通常會對包大小非常敏感。需要應用根據自己的情況來權衡。

評估包大小問題時，幾個額外信息提供大家方便參考：

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

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

Flutter目前還不支持線上動態(tài)性，雖然有解決方案，但閑魚也并未將動態(tài)做為重點。跨端、動態(tài)、性能目前還是個三角形，無法兼得。

Android上通過更新Flutter產物，較容易實現動態(tài)。iOS上由于審核原因，實現動態(tài)的成本很高。

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

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

image

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

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

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

• 視頻播放
• 圖片
• ListView
• 鍵盤
• 浮層
• 動畫
• 截屏

總結

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

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

歡迎聯系樹彬： guoyou@alibaba-inc.com

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.cjxv.cn/18382.html