開發跨平台app推薦React Native還是flutter？

作者：閑魚技術-海潴

嗯。。。這個問題十分不好回答啊(捋下魚須)。閑魚作為flutter領域的先驅者，以及fish_redux、flutter_boost等當紅flutter庫的作者，當然是歡迎廣大的開發者多多使用flutter相關技術棧 逃~:)。咳咳，不過呢，我們還是正經得聊一下React Native(下面簡稱RN)和flutter之前的異同：

0x00 簡單介紹一下

React Native

React Native是Facebook開源的一款基于react思想、使用JS、能夠給移動平台帶來native般體驗的架構，

官網

最新的版本是0.5.9。

flutter

flutter來自Google，上層使用dart語言建構跨平台應用，通過平台相關的embedded層接入到使用c++編寫的engine層，再通過skia庫直接與GPU進行互動。通過對dart代碼的AOT編譯，擁有優異的計算(CPU)、渲染(GPU)性能。

最新的版本為1.2。

0x01 跨平台性

開發者們使用跨平台技術棧，首要的目的是為了能夠省事兒，是以跨平台能力是首先要被衡量的名額。

Build native mobile apps using JavaScript and React

這意味着開發者可以複用龐大的JavaScript生态和優雅的react思想來書寫RN的代碼，給開發提供很多的便利性。

從實作原理上來說，RN進行完排版之後會把最終的渲染交給native view，這種方式帶來的是如native般的UI性能，但同時也給給平台一緻性帶來了一些問題。除開渲染層的不一緻，在iOS和Android沒有使用同一個JavaScript虛拟機也會帶來一些暗坑。

手勢的處理上兩個平台不好統一，RN官方也沒有提供一個抹平差異的庫，雖然開源社群有

react-native-gesture-handler

。

Beautiful native apps in record time

flutter官方的口氣很大，說自己是”空前“的。是不是”空前“，我們得來評估一下。

程式設計語言層面，flutter使用dart語言建構應用，這門語言對大多數人來說應該是比較陌生，好在dart的文法并不複雜，與Java等強類型oop語言非常相似，還加入了函數式的特性，使用起來還是挺友善的。

flutter提供類似React思想的響應性UI程式設計模型，讓UI開發變得更加fancy。

原理上來說，flutter在各個平台上使用統一的vm(dart vm)，自帶GDI(skia)。skia是一個已經發展多年成熟度相當高的2D圖形庫，也是Android系統和Chrome一直在使用的圖形庫。

flutter從邏輯計算到渲染繪圖，都是自己的，使得它在跨平台一緻性上有良好的表現。dart提供的AOT特性也可以保證應用線上上有一個好的性能表現。

多平台支援

RN目前支援iOS和Android兩個平台，另外有個非官方的ReactNativeX的項目旨在讓RN運作到其他平台。

flutter早期支援iOS和Android，desktop的支援目前尚不完善。近期flutter團隊釋出了Hummingbird，旨在讓flutter編寫的應用可以運作在浏覽器端。

從多平台支援的角度看，兩邊差距不大。相比RN，flutter在desktop的支援上有些優勢，但目前都是不怎麼可用狀态。

0x02 開發便利性

工具鍊

RN在打包釋出方面有被前端廣泛使用的webpack支援，官方自己提供了基于浏覽器的debug工具，與前端同學管用的調試方式并無二緻。

flutter基于iOS和Android已有的打包工具添加了flutter産物打包功能，同樣debug工具也由官方自己提供，除了剛釋出的基于浏覽器的調試工具外，flutter團隊提供的調試工具可以直接在Android Studio或者VScode這類IDE上直接使用。

調試便利性

JS的調試方式已經很成熟了，這裡不多做展開。

flutter在debug階段可以使用內建于IDE插件中的hot reload功能做到亞秒級的新代碼加載速度，十分适合與設計師坐在一起結(ya)對(li)編(tiao)程(shi) ：）。

第三方庫

在RN上你可以使用JS的大部分庫，平台相關的plugin也相對豐富。

flutter在這方面稍顯欠缺，庫的數量上無法與JS生态相比較。

flutter/plugins

項目提供了大量的平台相關插件供開發者使用，倒也是滿足了日常開發的需求，另外dart pubs上的公開庫數量也日趨上升。

在混合開發和大型app業務架構上，閑魚技術開源的

flutter_boost

提供了與native混合開發的可能，而

fish_redux

使得大型app中的複雜頁面的開發在flutter中變得更加容易。

0x03 未來的發展

開發者選擇一個技術，都是壓了”身家性命“在上面，誰也不想剛入門就發現這門技術即将被淘汰。

RN是個很好的項目，在釋出之初給移動開發帶來了一陣旋風。但不得不說，Airbnb宣布放棄使用RN技術棧對于整個社群有不小的打擊，而文章中對原因的闡述也相當有說服力。

flutter在1.0釋出之後趨于成熟，被欽定為Google Fuchsia系統的應用層架構。從團隊2019 roadmap中可以看到，flutter目前重點在于完善一些現有功能上的細節與bugfix，另外對于廣受期待的動态化特性，flutter團隊也在開發code push功能。從flutter團隊目前的方向和筆者在閑魚開發中實際使用的flutter的感受來看，整體上flutter在架構層面目前已經基本上穩定。

從桌面端跨平台架構發展的曆程來看，Java GUI從最初使用peer(對等設計模式)的AWT，到基于Java圖形繪制接口性能巨慢無比的Swing，再到公認性能最好目前應用最廣泛的基于目标平台繪制接口的SWT，我們可以從中窺見一些曆史規律。

peer(對等設計模式)，即AWT中的一個控件，對應目标平台(如Windows)上的一個控件(是不是看起來跟RN有一些相似)，最終AWT被放棄是因為peer模式傳輸層級過多造成效率低下，GUI部分為了保證可移植性隻能保留各個平台公共的接口。

SWT與QT(另一個被廣泛使用的桌面端跨平台GUI架構)，犧牲了一部分可移植性(主要是因為直接調用了目标平台的圖形繪制接口)，帶來了GUI的高性能。flutter也采用了類似技術棧，skia來抹平各個平台的繪制接口差異，并向上提供統一的圖形接口。

從這個角度來說，無疑flutter可能會是一個更有未來的跨平台架構。

0x04 寫在最後

當然Facebook官方對于RN正在進行重構，包括把大部分邏輯移動到c++層來減少線程切換的開銷提升性能等。

選擇一個架構需要考慮的實際情況比架構的優劣比較更加重要，比如你的項目大小、開發人員構成等，

RN和flutter作為目前移動平台上炙手可熱的架構，兩者并不是孰優孰劣的對立關系。

紙上得來終覺淺，如果你是個對新技術感興趣，抑或是希望在移動平台上有所突破的開發者，何不嘗試一下Google最新的成果咧