原生移動應用框架React Native與Flutter比較

banq發表於2018-10-17

React Native已經存在了很長時間,沒有任何競爭者, 直到去年穀歌推出了Flutter。這兩個框架都因其混合移動應用程式開發的效率而聞名- 一次寫入並部署到iOS和Android。使用這些框架,您甚至可以獲得接近原生的應用程式效能!

實際上,可以使用這兩個平臺中的任何一個構建出色的應用程式。但是,在效能,程式碼可維護性和社群支援方面存在輕微的細微差別,這些細微差別可能會使您偏向另一個。讓我們詳細看看這些差異。

React Native
React Native是一個JavaScript框架,用於為iOS和Android本地編寫移動應用程式。它基於React,Facebook的用於構建使用者介面的JavaScript庫 - 但它不是針對瀏覽器,而是針對移動平臺。

 React Native於2013年夏天在Facebook開始作為內部駭客馬拉松專案,並且自此成為最受歡迎的移動框架之一。2015年3月,Facebook在F8宣佈React Native已在GitHub上開放。

 使用React Native,應用程式是使用JavaScript和JSX(XML-esque標記)的混合編寫的。在引擎蓋下,React Native“bridge”呼叫Objective-C(適用於iOS)或Java(適用於Android)中的本機呈現API。這允許您的應用使用真實的移動UI元件呈現,而不是使用webview,使其外觀和感覺與任何其他本機移動應用程式一樣。

 Flutter
Flutter是谷歌的移動應用SDK,用於在iOS和Android上製作高質量的原生介面。它於2017年釋出,並從此獲得了開發者社群的大力支援。

 Flutter不需要JavaScript橋接器與本機移動元件通訊,因為它使用編譯的程式語言,稱為Dart。它是一種通用程式語言,由Google於2011年開發.Google和其他人的開發人員使用Dart為iOS,Android和Web建立高質量,關鍵任務的應用程式。Dart被“提前”(AOT)編譯為多個平臺的本機程式碼。使用Dart橋,即使應用程式大小變大,它的執行速度也會快得多。

 差異
現在我們已經完成了這些介紹,讓我們看看與React Native和Flutter的主要區別。

1.使用者介面
Flutter使用稱為小部件的內建UI元素代替本機。Flutter中的視窗小部件表示使用者介面的物件 - 所有圖形(包括文字,形狀和動畫)都是使用視窗小部件建立的。

有兩組小部件符合特定的設計語言。換句話說,您可以在Android應用程式中使用Material Design小部件,在iOS應用程式中使用Cupertino小部件。每個小部件都可以輕鬆定製。

但是,建立和維護這些小部件的支援有限且社群有限。隨著框架的成熟,小部件將成為快速迭代和構建Flutter應用程式的方法。

React Native的UI體驗類似於在沒有任何CSS框架的情況下使用HTML。雖然這聽起來很糟糕,但它實際上允許您在Android和iOS上構建本機元件,從而提供更好的使用者體驗(UX)。

還有大量的社群支援,並且有第三方庫可以讓您立即開始。

2.社群支援
Flutter只有一年左右的時間,因此缺乏重要的社群支援。然而,早期的部落格文章對使用Flutter持積極態度。

到目前為止,Dart在Stack Overflow上沒有得到太多的愛。

儘管社群對Flutter的支援很少,但Google的Flutter團隊提供的支援非常好。他們的檔案也很棒。(畢竟,這是由Google團隊撰寫的!)

React Native的社群支援超過了Flutter的-React Native目前是Stack Overflow上最受歡迎的框架,社群支援作為證據。雖然他們的文件到處都是,主要是因為它保持完全開源,有很多論壇可以提供幫助。

3.程式碼結構Flutter不會分離資料,樣式和模板。雖然這聽起來像是你最終會得到義大利麵條程式碼,但這種結構很快就會獲得追隨者,因為使用Flutter構建佈局不需要額外的模板語言,如JSX,XML或特殊的視覺化工具。但是,在建立大型應用程式時,這是一個巨大的時間,因為幾乎所有內容都是內聯維護的。

React Native在隔離邏輯,導航和設計方面做得非常出色。這使您可以構建複雜的移動應用程式,而不會丟失文件。Spencer Carli在Medium上發表了一篇很棒的文章,討論了公認的程式碼結構。 

4.開發時間
Flutter的Hot Reload(能夠“實時”修復bug而無需重新編譯)的速度非常快,讓React Native自己的能力變得羞恥。

雖然它允許快速開發,但Flutter要求您在使用Carousels或Models等複雜的UI元素時為Android和iOS新增單獨的程式碼檔案。這意味著您需要編寫與每個環境相對應的特定規則。此外,Flutter是基於鮮為人知的Dart語言構建的,這將要求您的開發人員在跳轉到Flutter之前先花時間在它上面。

儘管React Native的Hot Reload速度不快,但它並不需要您為Android和iOS編寫單獨的檔案來支援複雜的UI。它有許多不同的第三方庫,如Calendar,Carousel和Modal,以及可立即使用的元件,可提高跨平臺應用程式開發的速度。

5.表現
Flutter贏得這次比較。它具有Dart的優勢,其中不需要“橋”來與裝置的本機元件互動。這極大地加速了裝置的效能。正是這種架構使您能夠以每秒60幀的速度構建具有動畫效果的快速,原生外觀的應用程式,這是其高效能的明顯標誌。

由於需要JavaScript橋接,使用React Native構建的應用程式有時會出現渲染大型資料集的問題。但是,有些庫可以使其達到60 fps的動畫速度。(但對於大多數典型應用程式,使用者幾乎感覺不到這個特定的效能問題。)

結論
作為移動應用程式開發未來的一部分,Flutter具有巨大的潛力。Flutter,Dart和大型社群基地的結合可能是成功的秘訣。阻止我使用它的唯一因素是谷歌眾所周知的關閉開源和收購產品的舉動。

React Native目前擁有穩定的增長,強大的支援,驚人的程式碼結構和非常好的採用基礎。

對於Flutter團隊 - 如果Google沒有殺死該專案,請立即解決GitHub上的3,892個未解決問題。(謝謝。)
 

相關文章