GMTC-閒魚Flutter實踐效果訪談
在2018 GMTC大會上,Google Flutter宣佈了首個釋出預覽版。同臺亮相的閒魚,是國內首個將Flutter用於大型實踐,並用在重要場景的應用。同時閒魚對Flutter技術演進也產生了重要的影響。做為新一代的高效移動開發技術,Flutter受到了國內開發者的密切關注。
本文邀請GMTC演講嘉賓閒魚架構負責人王樹彬,分享閒魚的實踐效果和一些常見問題。
閒魚為什麼選擇了Flutter?
Flutter是Google下一代作業系統Fuchsia的UI框架,在保持原生效能的條件下實現了跨端程式設計,為未來的移動開發格局變革提供了巨大的機會和想象力。
很多朋友好奇,閒魚這樣一個業務快速發展的App,為什麼敢於使用Flutter這樣的新技術。我想這一方面是因為閒魚對技術的追求;另一方面,閒魚在正式引入Flutter前,對Flutter的原理、團隊、趨勢做了充分的預研。
現有流行的跨端解決方案中,通常效能無法做到最好,很難達到與原生一樣的流暢體驗。雖然閒魚一些頁面使用了現有的動態化跨端方案,但出於個性化互動及流暢體驗的考慮,主鏈路頁面(首頁、詳情、釋出、訊息、交易等)一直無法使用,只能用原生開發。Flutter透過自建繪製引擎,AOT編譯,線性佈局和渲染等機制,達到了與原生一樣甚至更好的效能。仔細去了解Flutter的原理,會發現很多優秀的設計。
閒魚Flutter解決了哪些問題?
在沒有經過大規模應用驗證的情況下,框架成熟度和穩定性有很大的風險和挑戰。此外,閒魚希望將現有的Native頁面漸進式遷移到Flutter,這種混合開發,在業界還沒有成熟的先例。
閒魚做了個大膽的嘗試,挑選重要且複雜商品詳情頁作為第一個遷移到Flutter的頁面。透過這個方式,快速暴露和解決Flutter相關問題,最終專案順利成功。詳細可以到GMTC下載閒魚專場分享的文件GMTC,或者關注“閒魚技術”公眾號檢視更多深入的文章。
閒魚遇到的通用問題,已經在Flutter官方中同步修復。一些混合程式設計的私有問題,閒魚會沉澱為文件供大家參考,必要的元件也可以沉澱為Package。
解決的一些典型問題舉例如下
混合問題
混合工程
混合編譯,構建
混合頁面棧管理
Native影片播放器複用
Native頁面元件混合
相容性問題
Armv7編譯
影片播放白屏
中文字型
icu data
截圖
圖片記憶體溢位Crash
當然,我們還在繼續,有新的問題發現時會不斷最佳化和完善。
能說說引入Flutter的實際效果和收益嗎?
效能上,Flutter頁面和Native頁面體驗接近,甚至資料上看在一些低端機上Flutter會更流暢,人肉眼已經很難區別。
研發效率上:
舊頁面遷移到Flutter的過程,效率是下降的。 以前沉澱的UI元件,需要在Flutter上重新實現。
對於全新的頁面需求,或者是已經遷移完成的頁面上的新需求,可以明顯看到Flutter跨端帶來的效率提升。除了兩端變一端的好處外,還有協同減少、一致性提升、Hotreload開發等好處。
此外,Flutter線上仍然有一些Crash存在,雖然比例不高,但還是會帶來一定的排查成本。定位這類問題需要對Flutter的原理有一定的理解。
包大小的問題你怎麼看?
Android的Apk增加8M,iOS壓縮包增加16M。 包大小確實是大家需要權衡的問題。我的理解,非常大的App(100M+)以及非常小的App(10M-),通常會對包大小非常敏感。需要應用根據自己的情況來權衡。
評估包大小問題時,幾個額外資訊提供大家方便參考:
包大小是官方正在重點最佳化的一個問題。以Android為例,我覺得有希望最佳化到5M以下。
考慮到Flutter有Treeshaking技術,無用的程式碼不會編譯到安裝包中,所以隨著依賴包的變多,Flutter與Native相比,佔用的空間會更小。如果把一些Native頁面遷移到Flutter頁面,Native依賴的減少,有希望抵消Flutter基礎包的大小。 這也需要根據實際情況評估。
Flutter支援動態性嗎?
Flutter目前還不支援線上動態性,雖然有解決方案,但閒魚也並未將動態做為重點。跨端、動態、效能目前還是個三角形,無法兼得。
Android上透過更新Flutter產物,較容易實現動態。iOS上由於稽核原因,實現動態的成本很高。
有些策略可以一定程式緩解動態要求,但無法完全解決:
建設更快速的發版能力及更完備的自動化測試。
將頁面元件化,由服務端組裝元件並推送到客戶端。
Flutter的線上穩定性目前怎麼樣了?
大家可以關注閒魚已經遷移完成的頁面,目前是商品的詳情頁。詳情頁用到的Flutter介面和功能,目前已經線上驗證OK,達到生產穩定性的要求。閒魚正在逐步將Flutter應用在更多的頁面,覆蓋的場景會越來越多,歡迎關注閒魚後續進展。
詳情頁覆蓋的主功能包括:
影片播放
圖片
ListView
鍵盤
浮層
動畫
截圖
總結
閒魚會繼續與Google和社群緊密合作,完善Flutter,並基於Flutter建設全新的一體化研發模式。希望為業界類似App提供架構參考。
歡迎敢於挑戰,有勇氣改變世界的同學,加入閒魚,一起打造新一代高效研發架構,一起實現讓天下沒有閒置的夢想。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69900359/viewspace-2287161/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- [閒魚技術] Flutter React程式設計正規化實踐FlutterReact程式設計
- 閒魚專家詳解:Flutter React程式設計正規化實踐FlutterReact程式設計
- Flutter仿閒魚底部導航欄實現Flutter
- Flutter高內聚元件怎麼做?閒魚閒魚打造開源高效方案!Flutter元件
- 阿里技術分享:閒魚IM基於Flutter的移動端跨端改造實踐阿里Flutter跨端
- Flutter Worker —— 閒魚這樣實現“邏輯跨平臺”Flutter
- 【安卓綠色聯盟開發者大會】閒魚Flutter分享實錄安卓Flutter
- 5G時代|閒魚在Flutter&FaaS雲端一體化架構的探索實踐之路Flutter架構
- 讓移動開發更輕鬆 閒魚基於Flutter構建跨端APP應用實踐移動開發Flutter跨端APP
- 閒魚Flutter&FaaS雲端一體化架構Flutter架構
- Dubbo Mesh 在閒魚生產環境中的落地實踐
- 掘金 AMA - 聽閒魚客戶端架構師宗心談 Flutter 和他的團隊客戶端架構Flutter
- 閒魚Flutter互動引擎系列——整體設計篇Flutter
- 閒魚"同款"的Flutter圖片下載功能(demo版)Flutter
- [閒魚技術] Release Flutter的最後一公里Flutter
- 《反脆弱邊緣:反脆弱實踐》訪談
- 閒魚又一企業級鉅著《Flutter in action》開放下載Flutter
- Flutter BottomAppBar 自定義路徑 + 貝塞爾曲線實現閒魚底部導航FlutterAPP
- 《J2EE 最佳實踐》作者訪談錄
- Flutter實踐Flutter
- 閒魚基於Flutter技術的架構演進和創新Flutter架構
- Flutter高內聚元件怎麼做?閒魚打造開源高效方案!Flutter元件
- 承載億級流量的開發框架,閒魚 Flutter 技術解析與實戰大公開框架Flutter
- openssl框架閒談–SSL實現框架
- 來了!閒魚技術團隊開源Flutter應用框架Fish ReduxFlutter框架Redux
- 來了!閒魚技術團隊開源 Flutter 應用框架 Fish ReduxFlutter框架Redux
- 閒魚Flutter圖片框架架構演進(超詳細)底部有實戰書籍贈送Flutter框架架構
- 閒魚:2023年閒魚日均GMV破10億 超1億人掛出閒置
- Flutter 最佳實踐Flutter
- 閒魚是如何實踐一套完整的埋點自動化驗證方案的?
- Flutter——實現閃爍效果Flutter
- InfoQ對《OpenStack部署實踐》作者張子凡訪談錄
- 重磅首發 | 承載億級流量的開發框架,閒魚 Flutter 技術解析與實戰大公開框架Flutter
- GMTC2019演講實錄|閒魚基於Flutter的架構演進與創新Flutter架構
- Flutter探索與實踐Flutter
- flutter + getx 最佳實踐Flutter
- 專訪天融信李海鵬:談資料安全防護實踐
- Flutter動畫實現粒子漂浮效果Flutter動畫