讓移動開發更輕鬆 閒魚基於Flutter構建跨端APP應用實踐

Flutter是一款由Google開發的開源、跨平臺的移動端開發框架，使用Flutter開發出的應用符合不一樣平臺的原生體驗，可讓應用看起來跟系統更加協調。

如何基於Flutter高效構建跨端APP？本期內容特邀阿里巴巴無線技術專家吉豐就閒魚開發實踐展開分享。

Flutter是什麼？

Flutter是一個全新的移動UI框架，它容許使用同一個代碼庫構建高性能的Android和iOS應用，同時它也是Google即將推出的Fuchsia操做系統的開發平臺。經過自定義的Flutter引擎能夠將其嵌入到其餘平臺，旨在幫助開發者使用一套代碼開發高性能、高保真的Android和iOS應用。

閒魚爲何使用Flutter？

原生性能

Flutter會以原生的性能提供給開發者，它的開發性能很是接近傳統的Native，包括渲染方式、AOT的編譯方式和其餘優化。

Flutter開發的頁面跟Native沒有差距。在安卓中低端機型裏，基於Flutter開發出來的APP在幀率上會有更流暢的體現，內存佔用也會有更低的消耗。

快速開發

Flutter因其自己的跨端性，大幅提高了傳統的安卓開發速度。通常認爲，前端開發的速度較快，基於Flutter，開發速度比前端更快。

統一的應用開發體驗

在跨端層面上，因爲Flutter把兩端的渲染機制下沉到更低的渲染層，基於統一的C++層的渲染引擎來搭建底層的UI框架，所以，Flutter會讓跨端體驗獲得更一致的效果。

Flutter開發優勢頗多，是否可在業務場景中快速鋪開使用？吉豐表示，實際遇到的問題比想象中要多，他就開發過程當中遇到的問題舉例：

「好比，內存的問題。隨着Flutter頁面的堆棧變得愈來愈深，內存的釋放並無獲得及時的釋放。好比，字體的問題。不一樣的字體在不一樣的機器裏渲染的效果很是不一致。再好比，截圖會出現黑屏的問題。還有圖片緩存的問題。跟安卓端的圖片緩存是徹底不一樣的體系。另外，它的暗黑區、適配問題，以及私有庫、阿里中間件的適配，以及它不支持反射和序列化，怎麼把Native的組件集成到Flutter體系，也是一個比較大的問題……」

那麼，閒魚是如何藉助Flutter完成開發的呢？

Flutter與Native混合開發實踐

閒魚目前的解決方案是經過ID的形式共享外部緩存紋理。首選把Flutter和閒魚現有的 APP 作漸進式整合，App中會同時有 Native、Flutter 和 H5 頁面。

閒魚的詳情頁包含混合棧、視頻、動畫、原生組件、多圖、留言蓋樓等功能，頁面較複雜，是閒魚最重要的頁面之一。選擇商品詳情頁作爲第一個Flutter頁面，是閒魚能成功快速使用Flutter的重要因素。

其次，在Flutter頁面嵌入Native組件的過程當中須要保持數據的一致性。數據的一致性是指多個頁面之間須要對數據依賴有一致性。在頁面開發快速迭代過程當中，代碼的複用度相對較低，後期維護成本高，解決數據一致性是個難題。

對此，閒魚構建了基於Flutter下的新架構——Redux和Component。

Redux最主要是用做應用狀態的管理，能夠解決數據集中的問題，它會徹底follow社區的概念。基於Redux，關於社區的概念、定義、簽名、實現，會以最標準的形式去follow。

Redux解決了集中問題後，基於Redux下的Component會接着完成訴求，包括分置、更多力度的複用等。對這一律念，就如同有一個page下面有一些component，最後有一些stateless，跟狀態無關的表達。在數據層面，它有惟一的store，推送對應的component，這就是 Half-Dumb的模型。

由於傳統的組件要作的事情不少，要負責渲染，要負責交互數據的處理，也要負責數據的修改，對於沒法修改本身數據的component，稱爲半啞吧模型，它能夠完成百分百由數據驅動視圖的架構。

最終，這樣的架構解決了數據一致性和代碼複用的問題，並在複用層面上提供包括Component的組件，加快了代碼隔離、代碼的可讀性和標準規範的落地。

整體而言，Flutter編程模型共有三點優點：一是能夠獲得很是好的性能，二是有很是及時的開發效率，三是能獲得很是好的跨端體驗。

Flutter可以讓一張圖片自動生成多端的UI代碼，UI代碼再也不須要特別多的人力介入，其餘工程師只需關注業務層面的解決和實施推薦系統便可。

對於閒魚Flutter跨端開發實踐，開發者以爲有哪些值得借鑑和能夠改進的地方呢？歡迎留言說出您的見解~