React Native是一種由Facebook開發並維護的開源移動應用框架,旨在讓開發者能夠使用JavaScript和React來建造具有原生表現力的iOS和Android應用。自2015年推出以來,它已經快速成長為最受歡迎的跨平台移動開發解決方案之一。 此框架的核心理念在於「學習一次,隨處撰寫」(Learn Once, Write Anywhere),意即開發者無需分別學習不同平台特定語言(如Objective-C/Swift或Java/Kotlin),就可以創建涵蓋多個平台的應用程序。

React Native利用了React的聲明式UI範例,這使得組件化設計變得十分直觀而且容易重複使用,大幅度提高了開發效率。 在技術層面上,React Native對原生組件進行了抽象化處理,使其能通過JavaScript與原生端溝通。這是通過所謂的「橋接」技術實現的——即JavaScript執行緒和原生執行緒之間存在一座「橋梁」,允許兩邊資料交換與同步。

因此,在性能表現上,它比傳統基於Web視圖(WebView)技術的解決方案有顯著提升。 除了能夠提供近乎原生性能外,React Native還支持熱更新功能(Hot Reloading),這意味著在修改代碼後無需重新整理整個應用即可立即查看更改效果;加上強大的社群支援和豐富插件生態系統,極大地拓展了其靈活性及功能強度。 當然,在選擇前端框架時需要考量多種因素。

雖然React Native帶來了很多優勢如高效、成本低廉和良好社羣支持等特點,但也存在一些挑戰與限制。例如:當需要特別密集計算或處理高性能動畫時可能會面臨到性能問題;再比如某些特定平台下只有原生API才支持某項功能時就需要深入到原生代碼層面去處理相關事項。因此,在採納任何技術之前評估清楚所涉及項目具體需求至關重要。

表: 強弱危機分析(最後更新: 2024-01-11)

React Native開始於2013年夏天,作為Facebook的一個內部項目。2015年1月,在React.js Conference上發布了React Native 1的預覽版本。同年3月,在F8 Conference上正式推出了React Native。

Facebook宣佈React Native“公開可用並在Github上提供”。

Facebook(iOS、Android)、Instagram(iOS、Android)、Fb Ads Manager(iOS、Android)、Wix.com(iOS、Android)、Tesla(iOS、Android)、Skype(iOS、Android)、Bloomberg(iOS、Android)和Pinterest(iOS、Android)是一些熱門的應用程式。 這些應用程式提供了許多方便和實用的功能,讓我們能夠保持聯繫並與他人分享生活中的重要時刻。無論是在社交媒體上發佈照片或視頻,還是通過即時通訊工具與朋友和家人聊天,這些應用程式都可以幫助我們建立更豐富的社交關係。

此外,對於商業用戶來說,Facebook和Instagram還提供了廣告管理工具,可以幫助他們達到更多目標客戶並推廣自己的品牌。 而Wix.com則是一個強大的網站建設平臺,允許使用者輕鬆創建自己專屬的網站。它提供了各種範本和自定義選項,使得任何人都能夠打造出令人驚艷且功能強大的網站。

對於愛好科技和環保的人來說,Tesla應用程式是一個不可或缺的工具。它提供了關於特斯拉電動車的詳細資訊和控制選項,包括充電狀態、駕駛數據等等。 Skype是一個廣泛使用的視訊通話應用程式,它可以讓我們與朋友和家人進行面對面的聊天。

不僅如此,還可以通過Skype撥打國際電話,使我們能夠與世界各地的人保持聯繫。 Bloomberg是一個提供全球金融新聞和市場資訊的應用程式。無論你是投資者還是對金融事務感興趣,Bloomberg都能夠為你提供及時且精確的財經資訊。

最後,Pinterest創造了一個以圖片為主題的社交平臺。在這裡,你可以發現和保存自己喜歡的靈感圖片、食譜、旅行目的地等等。 希望這些重寫後更加流暢和易懂的描述能夠讓你對這些應用程式有更清晰的瞭解。

根據Statista的數據顯示,大約有42%的開發者承認他們使用React Native進行跨平臺應用程式開發。而根據StackOverflow 2020年的開發者調查報告,大約有11.5%的開發者偏好React Native,原因是其擁有豐富的本地函式庫和工具。同一份調查還顯示58.5%的社群成員喜歡使用React Native。

【重點】根據統計資料顯示,大約有42%的開發者承認他們使用React Native進行跨平臺應用程式開發。另外,在StackOverflow 2020年的開發者調查中,11.5%的受訪開發者表示偏好React Native,原因在於它具備了多種本地函式庫和工具。此外,該調查還顯示58.5%的社群成員喜愛使用React Native。

Flutter是一個由Google創建的開源框架,使用的語言稱為Dart。它是一個針對Web平臺、移動和桌面應用程式的軟件開發工具包。想要在Flutter上工作的開發者必須學習Dart。

儘管Dart不像JavaScript那麼受歡迎,但它仍然是一種相對容易掌握的良好編程語言。通常,有Java和C++背景的開發者比JavaScript開發者更容易理解Dart。Flutter也被視為增強型UI工具包,可用於僅使用單一代碼庫開發跨平臺應用程式。

它提供了靈活和表達豐富的原生性能UI給Flutter開發者使用。此外,它由Google開發團隊以及整個Flutter社區共同貢獻和支持。

2018年2月,在Mobile World Congress上首次發佈了Flutter的第一個測試版本。幾個月後,於4月在Google I/O上發佈了Flutter beta 2。接著在5月發佈了Flutter beta 3。

2018年6月,推出了Flutter Preview 1。幾個月後的9月,又發佈了Flutter Preview 2。同年11月發佈了Dart 2.1版本。

最終,在2018年12月的Google I/O上正式發佈了Flutter 1.0版本。 2019年2月,在Mobile World Congress上發佈了Flutter 1.2版本。隨後在5月,又在Mobile World Congress上發佈了Flutter 1.5版本。

到了7月,推出了Flutter 1.7版本。幾個月後的9月,又發佈了Flutter 1.9版本。2019年12月推出了Flutter 1.12版本。

2020年5月宣佈推出了Flutter 1.17版。到了8月,推出了Fluter的1.20版。而在2020年10月1日,則是最新的一版——Fluter 1.22版問世。

以下是一些在App Store和Google Play上可供下載的應用程式： Google Ads app（App Store、Google Play） Abbey Road Studios的Topline app（App Store、Google Play） Reflectly（App Store、Google Play） Hamilton app - 百老匯音樂劇的官方應用程式（App Store、Google Play） 阿里巴巴的閑魚（Xianyu）應用程式（App Store、Google Play） JD Finance App（App Store） 這些應用程式提供各種功能，從線上廣告管理到音樂創作，再到金融服務，都有不同的用途。您可以在App Store和Google Play商店中搜索它們以了解更多詳細信息並進行下載。

根據 Statista 的數據,全球有39%的人使用 Flutter 開發跨平臺移動應用程式。而根據 StackOverflow 的開發者調查結果,大約有68.8%的開發社群喜愛 Flutter。同一份調查還顯示,約有7.2%的社群成員偏好使用 Flutter 作為他們的工具和函式庫。

我們剛剛詳細地看了這兩個框架。現在,讓我們根據各種標準來比較這些框架:

React Native於2015年問世,自此以來在開發者社群中非常受歡迎。它之所以如此受歡迎的最大原因或許是因為它使用了JavaScript語言。由於React Native已經存在超過5年的時間,所以擁有更多的使用者。

Flutter也在開發者中逐漸流行起來。由於Flutter在React Native推出三年後才問世,所以相比之下擁有較小的社群支持。但Flutter得到了Google的支持,可以說它不久就能追趕上React Native。

事實上,這正是正在發生的,Flutter正在各個方面趕上React Native。以下的Google趨勢圖也證實了這一點。

React Native – JavaScript React Native 使用 JavaScript 來撰寫,這是 React Native 的一大優勢,因為 JavaScript 被認為是世界上最受歡迎的程式語言之一。這也是為什麼容易找到能夠使用 JavaScript 編碼的開發人員的原因。此外,任何一位 JavaScript 開發人員學習 React Native 都很容易。

Dart 是 Flutter 使用的程式語言,由 Google 在2011年推出。然而,開發人員很少使用 Dart。Dart 語言的語法對於所有 Java 和 JavaScript 開發人員來說都很容易理解,因為它支援大多數面向物件的概念。

由於 Dart 官方網站提供了非常易於理解的檔,所以開始使用 Dart 變得輕而易舉。

React Native的性能比Flutter低,主要原因是JavaScript Bridge,在本地模組之間建立通信時負責溝通。在React Native的“hello world”應用程式中,丟失的幀數要比Flutter高得多。在某些情況下,渲染程式需要長達16毫秒的時間,導致應用程式出現卡頓。

儘管如此,有一些協力廠商庫(例如Proguard)可以通過優化位元組碼來改善應用程式的性能。 相比之下,Flutter應用程式表現更好。主要原因是它不需要橋樑來進行本地模組之間的通信。

這是因為它已經默認提供了本機群組件的可用性。根據性能測試,“hello world”應用程式以60 FPS運行,並且每個幀的渲染時間都比16毫秒短。此外,丟失的幀數也較少。

Flutter利用Skia圖形庫,在每次應用視圖發生變化時重新繪製UI。這些是使Flutter能夠平穩高效地運行甚至達到60 FPS的主要原因。

React Native的架構在很大程度上依賴於JS運行環境架構,也被稱為JavaScript Bridge。這是JavaScript線程和本地線程之間的橋樑。根據功能,JavaScript代碼通過使用Facebook的Flux架構與本地API和平臺進行通信。

在Android中,它將JavaScriptCore捆綁在應用程式中,而在iOS中,它使用單獨的JavaScriptCore運行所有代碼。這導致原生功能增加以及應用程式大小增加,最終導致設備延遲或其他性能問題。 Flutter具有分層架構。

建立在此特定框架上的簡單應用程式的層次結構始於頂級根函數,也稱為特定平臺小部件。然後是與渲染層和平臺交互的基本小部件。動畫手勢僅位於渲染層之外,將API調用傳輸到應用程式的基礎結構。

它也被稱為Scaffold,由特定平臺嵌入器和C / C ++引擎運行。Flutter使用Dart框架,其中大部分組件都是內置的,這使其大小更大並消除了與本地模塊通信的橋樑需求。Dart有許多框架,例如Cupertino和Material Design,提供開發應用程式所需的所有技術。

Dart框架還使用帶有所有通道、協議和組合的Skia C ++引擎。

React Native是在2015年推出的,自那以後它獲得了巨大的流行。在GitHub上有一個龐大的React Native程式員社區。目前,有多達2,207多名開發人員正在積極分享他們的經驗。

世界各地也舉辦了許多會議和聚會。波蘭舉辦的React Native EU是最近發生的其中一個聚會。對於初學者來說,React Native社區是尋求任何關於React Native應用程式開發方面幫助的最佳場所。

有超過19.8k個活躍項目,在這裡來自世界各地的開發人員共同解決問題和修復錯誤。您可以在一些常見平臺上找到React Native開發人員、現場活動、會議和項目,例如:Discord、Meet Up、Slack、Reddit、Stack Overflow和Telegram。 相比之下,Flutter具有較小規模的開發人員社群。

目前只有662多名Flutter開發者,遠低於React Native。其中一個主要原因可能是它在2017年才被引入。因此,與React Native相比,Flutter相對是一個較新的框架。

然而,它正在逐漸受到歡迎。從社群中活躍項目的總數達到了13.7k這一事實可以清楚地看出這種進展。有許多流行的平臺可以讓人們與全球Flutter社區聯繫,例如:Discord、Reddit、Gitter、Flutterday、Stack Overflow和Slack。

如果我們談論React Native的學習曲線,對於那些之前使用JavaScript建立應用程式的開發者來說,學習這個框架相對容易。然而,當涉及到網頁應用程式開發時,開發者們會覺得學習和執行這個框架有一定困難。多年來,React Native通過發布不同的教程、廣泛的檔和庫來嘗試改善其學習曲線。

Flutter並不難學。人們可能會覺得使用Dart寫代碼有點不尋常,但這正是Flutter使開發變得更加簡單的地方。要理解Flutter,初學者需要瞭解iOS應用程式開發和Android應用程式開發的基礎知識。

此外,開發者還報告說,在Flutter中文檔相比React Native更容易閱讀和順暢。

iOS中的Style design和Android中的Material Design每天都在更新,這使得React Native難以跟上原生平台的所有更新和需求變化。此外,像Ant Design、React Virgin和Shoutem等現成的React Native UI套件更加增加了在所有平臺上建立一致設計的困難度。然而,一些重要組件如Modal組件、Snap指示器、Activity指示器、ScrollView固定標頭和分頁組件顯著提升了跨平臺用戶體驗。

Flutter利用自定義小部件、元素和工具來提供最終用戶體驗。Flutter語言Dart還具有一個新世代垃圾回收功能,可幫助創建常常是暫時性對象代碼的UI框架。該功能還將對象分配在單個指針突變位置,從而防止動畫延遲、UI混亂和開發過程中出現垃圾問題。

由於React Native是一個JavaScript框架,因此在JavaScript中提供了幾個單元級測試框架。其中有一個名為Jest的工具可用於快照測試。然而,當涉及到UI層級測試的整合時,官方並沒有提供支援。

不過,還是有一些協力廠商工具,如Detox和Appium可以用於React Native應用程式的測試,但它們也沒有得到官方的支援。而對於品質保證和測試來說,Flutter提供了一系列的測試功能,可以進行單元、整合和小部件等多層次的應用程式測試。你可以從這份檔中瞭解更多關於Flutter應用程式測試的相關資訊。

Flutter還提供了一個出色的小部件測試功能,開發者可以創建小部件測試來進行UI測試且以單元測試速度執行。

現在我們已經詳細比較了React Native和Flutter,讓我們來看一下這兩種跨平臺框架的優缺點。這些優缺點將進一步幫助您做出正確的決策。

快速刷新與熱重載 熱重載使開發人員能夠在應用程式運行時注入新的程式碼,這大大加快了開發流程的速度。此外,開發人員還可以立即查看所做的更改,而無需重新建置應用程式。開發者自由選擇 React Native讓開發人員能夠根據自己的喜好和項目需求來選擇解決方案。

例如,如果開發人員需要決定如何管理全域狀態,他們可以選擇使用路由庫或在TypeScript和JavaScript之間進行選擇。他們還可以決定是否要選擇自訂UI庫或者撰寫自己的UI元件。React Native已於五年前推出。

在這段時間裡,Facebook團隊穩定了API並且致力於解決問題。有了React Native,開發人員可以使用宿主平臺來原生渲染API,而無需使用CSS或HTML。

類似於其他跨平臺解決方案,React Native應用程式的性能和使用者介面體驗與本地應用程式相比並不相同。有許多被棄置的套件事實上,React Native擁有大量的庫。然而,也事實證明,其中許多庫要麼質量低劣,要麼已被棄置。

應用程式的大小比本地應用程式更大所有使用React Native編寫的應用程式都必須運行JavaScript代碼。然而,Android並不自帶此功能。因此,開發人員必須包含一個可以支援JavaScript代碼的庫來解決這個問題,進而增加了應用程式的大小。

iOS應用程式則不會面臨此問題。儘管如此,與本地應用程式相比它們仍然很大。 Chrome調試器可能導致在編輯、查看代碼和使用者介面元素時產生不便。

成功實現所需但協力廠商庫可能會變得過時和淘汰。

藉助熱重新加載功能,Flutter開發人員可以對代碼進行更改並立即查看反映出的變化,而不會丟失應用程式狀態。這個功能只需要幾毫秒就能顯示出變化。有了這個功能,開發人員可以立即修復錯誤、添加功能和嘗試新想法。

一個代碼庫支援兩個平臺Flutter是平臺無關的,這意味著開發人員只需為兩個或多於兩個平臺編寫一個代碼庫。此外,Flutter帶有自己的設計和小部件,這意味著開發人員可以在兩個不同的平臺上擁有相同的應用程式。Flutter提供反覆運算週期,大大節省了構建時間,因為測試僅需要針對單一代碼庫進行。

Flutter與iOS 的Swift或Objective C以及Android的Java無縫集成在一起。此集成消除了重寫代碼的需求。

在使用Flutter時,開發人員面臨著動畫和向量圖形支援的問題。這是因為它在及時渲染外掛程式方面存在問題。持續整合支援方面,Flutter仍然缺乏對Jenkins和Travis等CI平臺的支援。

因此,為了實現自動測試、構建和部署,開發人員需要使用和維護自定義腳本。Flutter的一個主要缺點是它不相容於Android Auto、tvOS、watchOS和CarPlay應用程式的開發。另一個主要的Flutter劣勢出現在更新方面,您無法立即將修補程式和更新推送到應用程式中,除非您遵循標準發佈流程。