GMTC-閒魚Flutter實踐效果訪談

閒魚技術發表於2019-01-02

GMTC-閒魚Flutter實踐效果訪談

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

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

閒魚為什麼選擇了Flutter?

Flutter是Google下一代作業系統Fuchsia的UI框架,在保持原生效能的條件下實現了跨端程式設計,為未來的移動開發格局變革提供了巨大的機會和想象力。

很多朋友好奇,閒魚這樣一個業務快速發展的App,為什麼敢於使用Flutter這樣的新技術。我想這一方面是因為閒魚對技術的追求;另一方面,閒魚在正式引入Flutter前,對Flutter的原理、團隊、趨勢做了充分的預研。

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

GMTC-閒魚Flutter實踐效果訪談

閒魚Flutter解決了哪些問題?

在沒有經過大規模應用驗證的情況下,框架成熟度和穩定性有很大的風險和挑戰。此外,閒魚希望將現有的Native頁面漸進式遷移到Flutter,這種混合開發,在業界還沒有成熟的先例。

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

閒魚遇到的通用問題,已經在Flutter官方中同步修復。一些混合程式設計的私有問題,閒魚會沉澱為文件供大家參考,必要的元件也可以沉澱為Package。

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

混合問題

  • 混合工程

  • 混合編譯,構建

  • 混合頁面棧管理

  • Native影片播放器複用

  • Native頁面元件混合

相容性問題

  • Armv7編譯

  • 影片播放白屏

  • 中文字型

  • icu data

  • 截圖

  • 圖片記憶體溢位Crash

當然,我們還在繼續,有新的問題發現時會不斷最佳化和完善。

GMTC-閒魚Flutter實踐效果訪談

能說說引入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上由於稽核原因,實現動態的成本很高。

有些策略可以一定程式緩解動態要求,但無法完全解決:

  • 建設更快速的發版能力及更完備的自動化測試。

  • 將頁面元件化,由服務端組裝元件並推送到客戶端。

GMTC-閒魚Flutter實踐效果訪談

Flutter的線上穩定性目前怎麼樣了?

大家可以關注閒魚已經遷移完成的頁面,目前是商品的詳情頁。詳情頁用到的Flutter介面和功能,目前已經線上驗證OK,達到生產穩定性的要求。閒魚正在逐步將Flutter應用在更多的頁面,覆蓋的場景會越來越多,歡迎關注閒魚後續進展。

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

  • 影片播放

  • 圖片

  • ListView

  • 鍵盤

  • 浮層

  • 動畫

  • 截圖

總結

閒魚會繼續與Google和社群緊密合作,完善Flutter,並基於Flutter建設全新的一體化研發模式。希望為業界類似App提供架構參考。

歡迎敢於挑戰,有勇氣改變世界的同學,加入閒魚,一起打造新一代高效研發架構,一起實現讓天下沒有閒置的夢想。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69900359/viewspace-2287161/,如需轉載,請註明出處,否則將追究法律責任。

相關文章