Flutter 應(yīng)用框架Fish-Redux正式開源，對比Flutter-provide和Flutter-redux，閑魚團隊的Fish-Redux的完善的設(shè)計原則和UI數(shù)據(jù)邏輯分治的核心思想，成為整個框架的靈魂。
友情提示：閱讀本文大概需要 30分鐘
image
前言
??跨平臺、高性能的渲染引擎逐漸成為大前端領(lǐng)域的一個熱點，作為其中的明星Flutter,有極大的機會成為下一代跨端解決方案，閑魚重磅生根Flutter， 推出了2億用戶背后的應(yīng)用框架Fish-Redux。
??應(yīng)用框架的設(shè)計原則和分層架構(gòu)思想，閑魚的Fish-Redux基于ReduxJS作出諸多改良，成為一款熱門的Flutter狀態(tài)管理開源框架。
Flutter技術(shù)棧背景
??Flutter是谷歌推出的一個高性能跨平臺渲染方案，主要有三個特點：
image
1. 原生性能
- 渲染方式、AOT、無鎖GC
??它主要用過原生的方式渲染，從分層的角度，無論是Android還是ios，都是基于相同一層的scale，在Release模式（Flutter有四種運行模式:Debug、Release、Profile和test）下會使用AOT預(yù)編譯代碼為機器碼，然后相當(dāng)于得到一個最短的一個渲染管線和更好的性能。
2. 快速開發(fā)
- 亞秒級、有狀態(tài)的熱重載
JIT的模式帶來更快的啟動體驗，相對于native，我們修改一處代碼，flutter可以快速的實時更新和展現(xiàn)、實時的響應(yīng)，也許只需要1-2秒之間就能得到一個快速的熱重載。
3. 統(tǒng)一的應(yīng)用開發(fā)體驗
- 兩端一致的開發(fā)方式，MD和IOS風(fēng)格
目前跨平臺方案三駕馬車：
1. 基于瀏覽器
??目前基于瀏覽器的跨平臺也做得越來越好，自然管線也越來越短，與native的一些技術(shù)手段來實現(xiàn)性能上的相互補充。
2. 類似RN、WEEX
??上層通過面向前端友好的UI，下層通過native的渲染形式，H5與native相互補充來達到更好的用戶體驗，這也是一種很好的解決方案。
3. Flutter
??從底層就承擔(dān)跨端的任務(wù)和渲染方式，從目前來看，從技術(shù)的實現(xiàn)和方案的成熟度、產(chǎn)品的性能方面比較，F(xiàn)lutter有很大可能成為下一代主流跨平臺框架。
Fish-Redux設(shè)計思路
??在FR誕生之前，閑魚團隊初次使用Flutter遇到的一些問題：
image
??這些常見問題，終于導(dǎo)致團隊開發(fā)效率降低、代碼質(zhì)量變差。當(dāng)出現(xiàn)這些問題時，我們復(fù)盤就可以知道一旦出現(xiàn)這種代碼難以維護的問題，一般來說都是因為在軟件層次里面缺少了某一層，導(dǎo)致了這些問題變得越來越復(fù)雜。這個時候我們就需要尋求那一層的設(shè)計來幫助我們解決之前遇到的各種小問題，簡單來說，我們可能需要一層應(yīng)用框架，來銜接Flutter和我們的上層業(yè)務(wù)之間，通過一個框架來使得我們遇到的問題能夠統(tǒng)一地得到管理和解決。
??在設(shè)計Fish-Redux之前，閑魚團隊也層對業(yè)界已有的框架進行過考慮和篩選。
1.業(yè)界方案-BLoC
image
??Business Logic Component，BLoC，由谷歌開發(fā)推出，它的思路是把UI和邏輯分離，并且UI可以分得很細(xì)，整個方案由一定的分治關(guān)系；但是邏輯是統(tǒng)一的，這樣做的優(yōu)點是邏輯和UI分離、便于測試、一定的邏輯重用。缺點是沒有辦法對邏輯做更進一步的分治，雖然UI可以分治，但是邏輯的不可分治問題會隨著業(yè)務(wù)邏輯的增大而復(fù)雜，最終變得龐大而難以管理。
2.業(yè)界方案-Redux
??在前面的文章我也有介紹過，Redux是一款狀態(tài)管理庫，并且在閑魚推出Fish-Redux之前，谷歌推出了Flutter-Redux這個方案，它與前端熟知的ReactJS社區(qū)里的Redux方案幾乎一致，但是基于 Dart 和 JS 語言上的差異，它沒有做到把一個Reducer 變成若干個Reducer一層層分治的效果。在谷歌的Flutter-Redux中，它的工作流程如下圖所示：
image
??它有唯一的一個store，直接對應(yīng)下面的view，通過action的形式將數(shù)據(jù)流驅(qū)動起來，優(yōu)點很明顯，就是集中的數(shù)據(jù)管理、方便觀察并且容易調(diào)試，并且有Middleware中間件機制更加相對容易拓展。但缺點是 把數(shù)據(jù)和邏輯集中了，但是很難把這一塊的東西分治出來，在龐大復(fù)雜的業(yè)務(wù)中更應(yīng)該將UI和數(shù)據(jù)邏輯分離開來，不能只是將UI分治了，而邏輯還混在一起，如果這樣也會導(dǎo)致最終項目難以維護。
Fish-Redux設(shè)計原則
1. 適合
??在軟件設(shè)計階段，每一層在疊加的時候，往往是為了解決特定的問題。以閑魚的詳情頁面為例，商品詳情頁有很多個組件組成的，其中有很多數(shù)據(jù)是組件之間需要共享的，其中一個組件修改了數(shù)據(jù)，其他的組件需要實時的感知，基于這樣的考慮，它就需要一個很健全很敏捷的狀態(tài)管理的機制，而相對的像HelloWorld這樣的demo不需要狀態(tài)管理，僅僅原生的api ui就能夠去實現(xiàn)。
??此外還以閑魚的寶貝詳情頁為例，它的很多類目，比如普通寶貝、拍賣寶貝等等，每個類目的之下有一些是有共性的，有些是有特色的一些組件，為了讓這些得到更高程度的復(fù)用，為了更加合適的共享這樣共性數(shù)據(jù)，我們就需要有一個分治，并且是一個可插拔的組件系統(tǒng)。比如說閑魚的普通寶貝有10個通用組件和3個特色組件，拍賣寶貝只有8個通用組件和5個特色組件，合適的頂層軟件架構(gòu)，可以通過可插拔的組件系統(tǒng)，能夠幫助寶貝詳情快速的組件并上線。
??當(dāng)一個項目逐漸堆積的時候，我們就不可避免的將展示部分和邏輯部分分離開來，在解決適合閑魚場景的時候，就需要把代碼進行一個合理的解耦，此外還需要一個比較好的性能，閑魚團隊對每個上線的頁面的性能指標(biāo)都是非常嚴(yán)格的，每次改版之后，性能不可以有明顯的下降，通過這一層的優(yōu)化，頁面性能應(yīng)得到更好的提升。
image
2. 足夠簡單
??在足夠簡單情況下就能滿足業(yè)務(wù)訴求、體現(xiàn)出更好的性能，這是最好不過的了。這里的足夠簡單指的是希望它的api足夠簡潔簡單，只需要一兩個 API 就能讓頁面 work 起來是比較理想的狀態(tài)了，比如 fish-redux 其中一個核心的 API 就是 dispatch ，通過 dispatch 就能驅(qū)動出一個 component 里所有的數(shù)據(jù)流的一個變換，甚至組件和組件之間通信，頁面與頁面之間的通信僅僅需要一個 API 就能夠去完成。
??此外還需要一個更加簡單的規(guī)范的編程模型，我們可以把所有的編程模型統(tǒng)一起來，比如一個函數(shù)式的編程模型，它可能是一個更加簡單的函數(shù)模型，在實際累業(yè)務(wù)代碼的時候，我們在寫核心的那幾個函數(shù)，讓它遵循一定的簽名規(guī)范，這個事情就能 work 了，這樣做起事來會更加事半功倍。
??最后還有框架里提供的類的對象能夠簡單，我們希望提供的是最小級的類，不應(yīng)該把框架不應(yīng)該做的事情做掉。就比如fish-redux的源碼沒有一句調(diào)試代碼或console，這些事情應(yīng)該又開發(fā)者去定義，而不是由框架本身去做多余的事情。
image
3. 便于演進
??做框架做工具，絕不是一蹴而就的事情，而是一個長期演進并優(yōu)化的過程，在閑魚團隊發(fā)布fish-redux之前，這個框架在內(nèi)部已經(jīng)經(jīng)過了3個版本的迭代和優(yōu)化，在團隊內(nèi)部第一個版本FR的時候，是完全基于Flutter-redux的，完全繼承有其優(yōu)點，但是沒有根本解決分治的難題；第二版本想要分治的效果，于是就做了一個決策，對 redux 分離，將一個redux分離成多個redux，這樣相當(dāng)于 component 都有一個 獨立store 驅(qū)動，也改了其中redux的簽名，這個版本也能 work，但是這個使用范圍就變得狹小，適用范圍不大，于是在此基礎(chǔ)上優(yōu)化出第三個版本，同時解決了 redux 的集中、component 的分治的問題。
image
Redux數(shù)據(jù)管理
image
??Redux本身是像OP這樣的數(shù)據(jù)管理，這部分在前面的文章有過詳細(xì)介紹，這里不再贅述，具體解讀可以參考前面的文章（點擊鏈接即可跳轉(zhuǎn)到文章）。
??Flutter狀態(tài)管理框架fish-redux
參考文獻
??Fish-Redux 視頻地址：https://alivideolive.taobao.com/h5/liveDetail/ff36146a-b106-48f0-8cff-246fa0b62d50?code=6613447285c433f6a7002ad80b913de5&state=dingtalk
最后
??今天的 Fish-Redux 設(shè)計原則 就分享到這里，有興趣的同學(xué)可以回放 吉豐老師的 直播以及 Fish-Redux 的源碼，祝各位在學(xué)習(xí) flutter 路上越來越順暢，歡迎大家留言，謝謝 ~
