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提供架構參考。

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