10分鐘讀懂阿里巴巴高級專家在Flutter Live2018的分享

做者：閒魚技術-宗心

12月4日，google flutter團隊宣佈第一個flutter正式版本發佈。第二天，Flutter Live Beijing 會議上，google flutter團隊邀請了在這一技術方案中重要的合做夥伴閒魚團隊分享這半年以來的經過flutter產出的業務結果以及對應的技術挑戰。

本文根據Flutter Live Beijing嘉賓閒魚客戶端團隊負責人於佳（宗心）的演講內容進行整理，從flutter的優點和挑戰引出閒魚這半年來針對flutter基礎設施進行從新的構建，定義，以及優化的過程，最後是這半年來對社區的一些貢獻和將來的規劃。

Flutter的優點與挑戰

衆所周知，Flutter提供了一套解決方案，既能用原生ARM代碼直接調用的方式來加速圖形渲染和UI繪製，又能同時運行在兩大主流移動操做系統上，其像素級別的還原，保證了不一樣平臺的UI強一致性。同時其提供了一整套機制（hot reload/attach Debug）保證開發的高效，基於此閒魚團隊在衆多跨平臺方案中選擇了Flutter做爲其將來主要的開發方案。

從4月份開始嘗試在業務側接入flutter到如今，閒魚在線上已經有10+的頁面使用了flutter進行開發，其中覆蓋了核心主鏈路發佈和詳情。

閒魚目前是市場上最大的閒置交易社區，做爲一款有巨大用戶體量的C端創新類產品，咱們對體驗以及研發迭代效率都有比較高的要求。在享受flutter帶來的收益的過程當中，一樣會面臨技術轉型過程當中的一些挑戰。主要的挑戰來源於如下的三個方面

• 工程體系

在現有工程體系下如何將flutter體系融入，並保持團隊不一樣技術棧（Android/iOS/Flutter）的同窗能各自獨立高效進行開發。

• 業務架構

如何提供一套flutter之上的業務架構，保證上層代碼的統一標準，同時儘量的使得代碼的複用度及隔離性更好。

• 基礎中間件

如何保證不一樣技術棧背後使用的基礎能力是一致的（底層統一使用具備相同優化策略的圖片庫/音視頻庫），且在這個過程當中如何解決flutter融入後產生的問題。

面對這些挑戰，閒魚團隊在下半年開始了針對基礎設施的改造與重建。

基礎設施重建之路

工程體系

工程體系部分，首當其衝須要考慮的是不一樣技術棧同窗的協同問題，舉例說明，咱們的詳情和發佈頁面是flutter的，而首頁以及搜索部分目前暫時採用native進行開發。這就須要考慮到flutter的環境要對開發native的同窗透明，甚至在native同窗沒有安裝flutter環境的狀況下，依然能夠保持原來的方式進行開發native頁面。

如圖中所示，以iOS爲例，咱們針對flutter的框架flutter.framewrok和業務代碼App.framework經過持續集成服務進行打包並自動上傳至雲端的pod repo上，native同窗只需在Podfile內指定對應的兩個庫的版本便可，同理，針對flutter的plugin代碼，一樣打包上傳至pod repo便可。

這套體系總體不復雜，須要說明的是，因爲多人開發flutter工程，所以打包是一件很是頻繁的事情，所以咱們這半年構建了持續集成體系來幫助你們將打包上傳等整個體系作成一鍵式服務，另外，因爲原有iOS平臺的flutter產物是須要依賴咱們的native主工程的代碼的，這種默認的打包方式，代碼量巨大，形成持續集成時間在10-20分鐘不等，所以在這個過程當中，閒魚團隊經過直接基於xcode_backend.sh + insert_dylib的自定義腳本完成了不依賴native主工程源碼的打包，將持續集成時間降至2分半。同理在android上面，也進行了一些基礎的改造，感興趣的同窗能夠給咱們留言，咱們會根據你們的需求程度在後續安排貢獻給flutter社區。

另一部分比較重要的內容是混合棧相關的，因爲flutter沒有提供flutter到混合工程的最佳實踐，因此咱們在上半年自建了一整套混合棧的體系，這裏主要是分享一些混合棧的關鍵思考，在混合棧的實現過程當中，需重點測試驗證dart這一側widget的生命週期，並簡化堆棧的管理（目前閒魚的作法是將堆棧管理統一交由native進行控制，簡化Dart層API），並須要考慮如何兼容Dart上層的好比Navigtor API的調用。總體這部分閒魚團隊還在驗證當中，總之，這部分看似簡單，但實際是比較深的坑，須要重點優化。另外，截至發文時間前，咱們跟google flutter團隊就混合棧交換了一些見解，flutter團隊後續若是能夠提供多flutterview，單flutter engine的基礎能力，就可使得閒魚現有的混合棧實現成本總體大幅度下降，後續你們有什麼特別好的建議，也歡迎跟咱們進行交流。

業務架構

今年下半年因爲有更多的業務遷移至flutter，這意味着更多的團隊成員開始了Dart側的研發。很快咱們發現團隊的代碼風格，層次結構都比較混亂，bug也層出不窮，所以咱們須要找到一種能夠保證你們研發規範，同時確保多人協同過程當中，代碼既能更好的複用，又能夠在適當的場景下作到相互隔離的這麼一種方案。

在通過社區的多個框架庫的實踐和比較之後，不論是flex仍是redux都不能徹底解決咱們的問題。最後咱們選擇了本身進行設計和實現，咱們對框架進行基礎分層之後，將重點最終落在了基於單一數據源的組件化框架上面，所以咱們產生了本身的框架fishRedux，咱們嚴格參考標準js的redux規範和源碼（redux的設計三原則）進行了完整的dart側的實現，並在此基礎上提供擴展能力用於咱們的組件化開發。

如圖所示，component將redux中的view，reducer，middleware以及咱們的擴展能力effect進行組裝，從而能夠在不一樣的頁面進行組件的複用，固然，全局依然遵循redux的單一數據源的原則，但咱們將邏輯自己經過更細粒度的拆解，保證了這些邏輯在不一樣的component組裝下均可以儘量的進行復用。
基於這種結構，咱們能夠將任意的component進行掛載和拼裝，經過更多小粒度的組件，產生不一樣場景下的複雜頁面。

另外，針對於component的多層組裝，你們能夠細看下dependents這個字段，經過基於這個字段的組裝，在咱們提供的這段代碼裏面，其實是提供了一個詳情頁面的插槽的功能，詳情頁面目前在閒魚有近10種不一樣的組合，在這個場景下，能夠在保證組件能夠服用的同時，作到不一樣流程下的代碼隔離。咱們只要針對dependents的components裏面進行替換，就能夠很容易的達到在詳情頁面插入不一樣widget以及邏輯的效果。

fishRedux框架目前已經接近修改的尾聲，目前還有部分微調和文檔的補充，明年4月份前，咱們有計劃進行該框架的開源，爲後續業務架構提供一個新的標準，你們敬請期待。

基礎中間件

在阿里集團內部，已經產出了較多的基礎中間件，所以如何複用這個中間件到flutter側是一個新的挑戰，針對於傳統的好比網絡庫，crash收集等中間件，因爲不涉及到UI的複用，相對容易，但針對音視頻，圖片庫等這類的中間件，雖然flutter提供了flutterTexture的方案，但依然不是特別完美。

咱們在作音視頻及圖片庫的複用過程當中，主要的問題在於flutter原生提供的機制，針對圖片的渲染存在GPU到CPU，而後CPU再到GPU的這樣一個過程，如圖所示。根本緣由在於不一樣的glContext沒法共享texture。所以，咱們目前採起的方案是修改flutter引擎，並暴露出glContext的shareGroup（以iOS爲例）。目前整個方案已經上線。

因爲該改動目前在閒魚本身fork的engine裏面，所以目前將咱們以前踩到的一些坑同步給你們，若是你們有在flutter和native側同時使用音視頻的狀況，建議特別注意ppt中的前兩點，不然會形成flutter側或者native側音視頻的錯亂。固然若是按照閒魚團隊的提供的修改方案進行engine改造後，也能夠經過第三點，對native設置跟flutter相同的sharegroup來解決這個問題。在flutter live Beijing結束以後，我也將該方案正式介紹給google flutter團隊，但願後續能將相似的功能融入flutter的官方實現。

閒魚與flutter社區

閒魚這半年，對於flutter社區，也有一些小小的貢獻。咱們針對flutter的方案進行整理並在各個技術社區進行傳播。另外咱們將已有的一些問題和解決方案提供給google flutter官方團隊，直接或者間接的推進了flutter的總體進度，並改變了這個技術將來的部分走向。我爲本身的團隊感到由衷的驕傲，但同時我意識到，要想讓flutter成爲終端將來的主流技術，依然任重道遠，所以咱們後續也會將目前的一些相對穩定的框架和解決方案，逐步開源到社區，咱們的要求是，至少閒魚團隊須要在線上有應用和驗證。目前咱們已經有一些初步的demo和小工具放在上面，你們感興趣的能夠往咱們的github上提issue，咱們後續會逐步開放更多的代碼。最近會公佈的比較重要的框架會是fishRedux，所以請你們持續關注咱們。

總結與展望

咱們首先帶你們回顧了flutter帶來的優點以及在閒魚的實際例子，並引出在複雜工程下的一些挑戰。咱們針對這些挑戰，在下半年進行了整個體系的從新建設，初步完成了

• 隔離的混合工程體系
• 統一標準的業務架構
• 高效複用基礎中間件設施

本次的分享，其實只是咱們目前團隊的一部份內容，咱們基於flutter和dart還有更多的技術方案目前在預研和研發中，因此沒有在此次live中進行宣講。在後續跟google flutter團隊的溝通中也瞭解到，他們對咱們的多個方案都有較大的興趣。對於將來來講，一方面，除了本文分享的內容之外，咱們本身在代碼自動生成/Dart Server/線上問題自動回放/國際化/動態模版等/持續集成等多個方面都在持續關注和調研。另外一方面，在flutter 1.0公佈後，相似hummingbrid這一類全新的方案也有機會讓flutter具備全終端制霸的可能性，咱們也會持續跟進和進行嘗試。Anyway，依然但願有更多的同窗能夠加入咱們一塊兒完善flutter的生態，同時經過新的技術手段，讓天下沒有閒置。來閒魚一塊兒改變世界吧，少年！

PPT下載：https://yq.aliyun.com/download/3130

原文連接