作者 | 胥磊
審校 | 孫淑娟
隨著移動(dòng)應(yīng)用的不斷普及，各個(gè)公司都在尋找可以在多種設(shè)備上運(yùn)行的跨平臺(tái)應(yīng)用解決方案，這里跨平臺(tái)主要是指Android/ target=_blank class=infotextkey>安卓和IOS。統(tǒng)計(jì)數(shù)據(jù)顯示：截止2021年6月，安卓以接近73%的份額控制了移動(dòng)操作系統(tǒng)市場(chǎng)，繼續(xù)保持其全球移動(dòng)操作系統(tǒng)的領(lǐng)先地位。谷歌的安卓和蘋果的iOS共同占用超過(guò)99%的全球市場(chǎng)份額。
本文中，我們將比較兩個(gè)流行的跨平臺(tái)開發(fā)框架：Flutter和React Native，對(duì)比分析每個(gè)框架的優(yōu)點(diǎn)和缺點(diǎn)，并探討哪種框架更適合在2023年使用。
一、為什么移動(dòng)應(yīng)用開發(fā)如此受歡迎？
移動(dòng)應(yīng)用開發(fā)是一個(gè)穩(wěn)步增長(zhǎng)的業(yè)務(wù)域，地球上幾乎所有的人都有手機(jī)，這意味著潛在的用戶數(shù)量近乎是無(wú)限的，同時(shí)現(xiàn)在幾乎所有的產(chǎn)品都有應(yīng)用開發(fā)的需求。你可以選擇多種方式來(lái)設(shè)計(jì)和構(gòu)建一個(gè)應(yīng)用，可以使用本地方法如Swift和Object-C來(lái)創(chuàng)建iOS應(yīng)用，JAVA來(lái)創(chuàng)建安卓應(yīng)用，這些都是官方提供支持和功能更新的編程語(yǔ)言。當(dāng)然也可以使用跨平臺(tái)框架如Flutter和React Native。
二、什么是跨平臺(tái)應(yīng)用開發(fā)
開始之前，我們先解釋下“跨平臺(tái)應(yīng)用開發(fā)”這個(gè)術(shù)語(yǔ)，其指的是使用一套代碼開發(fā)的應(yīng)用可以運(yùn)行在iOS和安卓上，同時(shí)提供近乎相同的功能體驗(yàn)，在這里我們將其分為以下兩類。
1.混合開發(fā)
混合型應(yīng)用指的是使用html5、css和JavaScript等前端技術(shù)組合開發(fā)的應(yīng)用。有些代碼運(yùn)行在目標(biāo)平臺(tái)的網(wǎng)絡(luò)視圖中，因此在不同的平臺(tái)上可以共享這些代碼（如HTML5、CSS和Javascript）。WebView就是混合型應(yīng)用，其使用嵌入式的WebViews來(lái)渲染用戶界面，而這其中就可以使用HTML5、CSS和JavaScript進(jìn)行定制化開發(fā)。
WebView應(yīng)用在訪問(wèn)設(shè)備上那些開箱即用的API時(shí)會(huì)有一些限制，需要額外的工作來(lái)實(shí)現(xiàn)與原生應(yīng)用相同的功能，帶來(lái)的好處也是顯而易見的，這些應(yīng)用天生就是跨平臺(tái)的，開箱即用可以大大節(jié)省開發(fā)時(shí)間。混合型應(yīng)用在兩個(gè)平臺(tái)上看起來(lái)是一樣的，但底層行為卻是不同的，這都取決于目標(biāo)平臺(tái)的可用API。例如一個(gè)天氣應(yīng)用的程序分別在兩個(gè)平臺(tái)上檢查當(dāng)前位置的天氣服務(wù)API，根據(jù)每個(gè)平臺(tái)提供的數(shù)據(jù)返回不同的結(jié)果。
2.原生開發(fā)
原生應(yīng)用指的是使用目標(biāo)平臺(tái)（如安卓或iOS）的原生SDK開發(fā)的應(yīng)用。這些代碼只為目標(biāo)平臺(tái)所編寫，所以不能在不同的平臺(tái)上共享，而且用戶界面也是使用特定平臺(tái)的組件和庫(kù)來(lái)實(shí)現(xiàn)的。和混合應(yīng)用相比，原生應(yīng)用能提供更好的用戶體驗(yàn)而且看起來(lái)也更加本地化，但它們的開發(fā)成本也更高。由于開發(fā)人員需要更多的時(shí)間來(lái)學(xué)習(xí)目標(biāo)平臺(tái)的API，所以開發(fā)新功能就需要更長(zhǎng)的時(shí)間。
三、跨平臺(tái)框架：Flutter和React Native
Flutter和React Native是當(dāng)今最好的跨平臺(tái)框架之一。它們都使用原生的組件來(lái)提供可定制的、響應(yīng)式的UI，同時(shí)可以在不同的平臺(tái)上共享代碼。Flutter框架由谷歌開發(fā)，而React Native框架則是由Facebook提供的。這些科技巨頭都擁有非常龐大的團(tuán)隊(duì)，負(fù)責(zé)從SDK到文檔、技術(shù)支持等一切事務(wù)。雖然Flutter和React Native應(yīng)用都是原生的，但它們比傳統(tǒng)的原生應(yīng)用開發(fā)更具優(yōu)勢(shì)，因?yàn)樗鼈兛梢钥缙脚_(tái)共享相當(dāng)一部分代碼。根據(jù)Instagram的數(shù)據(jù)，通過(guò)React Native在iOS和安卓之間共享的代碼超過(guò)90%。
四、Flutter和React Native的歷史
Fluttter是在2016年10月的Dart開發(fā)者峰會(huì)上發(fā)布的，這個(gè)跨平臺(tái)的移動(dòng)應(yīng)用開發(fā)框架為開發(fā)者提供了工具，通過(guò)使用谷歌自己的Dart語(yǔ)言編寫一套代碼，可以同時(shí)為iOS和安卓構(gòu)建原生應(yīng)用。
相比2018年2月16日Flutter的第一個(gè)穩(wěn)定版本（1.0）問(wèn)世，React Native起步比Flutter早一些。雖然它的第一個(gè)測(cè)試版本在2015年3月就發(fā)布了，然而直到2017年3月，才成功脫離測(cè)試階段。2017年9月5日，React Native在科技巨頭Facebook的強(qiáng)力支持下發(fā)布了1.0版本。雖然兩者出現(xiàn)時(shí)間都相對(duì)較晚，但并不影響各個(gè)公司對(duì)它們的喜愛，React Native已經(jīng)被Facebook、Instagram、Airbnb和Uber等大公司使用，而Flutter也已經(jīng)被寶馬、豐田、eBay以及谷歌自己的谷歌支付所使用。
五、Flutter和React Native的比較
Flutter和React Native最主要區(qū)別是，React Native并沒(méi)有編譯成原生的語(yǔ)言（如Java、Swift、Objective-C），而是簡(jiǎn)單地運(yùn)行其JavaScript代碼。而Flutter則將其Dart語(yǔ)言編譯成原生語(yǔ)言，這可能會(huì)影響性能。
另一個(gè)很大區(qū)別就是，React Native使用vanilla JavaScript（除了JSX）來(lái)編寫組件。鑒于React Native的動(dòng)態(tài)特性，F(xiàn)acebook的開發(fā)人員建議使用Flow或TypeScript來(lái)編寫代碼。同樣對(duì)于Flutter，谷歌也推薦使用Dart來(lái)編寫代碼，因?yàn)樗凶约旱囊惶嘴o態(tài)類型。
在我們看來(lái)，決定如何選擇這兩種技術(shù)應(yīng)該更多地基于自身的偏好，而不是它們的實(shí)際特點(diǎn)和性能。當(dāng)然，能了解所有的編程范式就更好了，這樣你就可以輕松地掌握新的語(yǔ)言和框架，即使它們不是用你熟悉的語(yǔ)言編寫的。對(duì)于那些已經(jīng)熟悉JavaScript（ES2015+）或TypeScript/Flow的程序員來(lái)說(shuō)，React Native入門要容易得多，尤其對(duì)那些使用過(guò)React的開發(fā)者來(lái)說(shuō)更加容易，因?yàn)镽eact和React Native之間有大量的相似之處。JavaScript在移動(dòng)開發(fā)領(lǐng)域仍有很大的市場(chǎng)份額，由于React Native和Flutter都允許選擇自己喜歡的編程語(yǔ)言，所以很難說(shuō)哪一種會(huì)在2023年更受歡迎。
另外，還有其他一些可能影響選擇的重要因素，如：
- 公司對(duì)特定技術(shù)棧的偏愛。
- 開發(fā)者對(duì)某一語(yǔ)言/框架的熟悉程度。
- 具備使用特定技術(shù)所需技能的開發(fā)人員的可用性。
正如我們上面指出的，React Native和Flutter都將在2023年成為重要的參與者，所以最終哪個(gè)成為你的最佳選擇取決于你的長(zhǎng)期目標(biāo)。
六、跨平臺(tái)開發(fā)框架如何工作
盡管跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架有許多共同的概念和特性，但它們都有各自不同的目的。
React Native目的是結(jié)合React Web帶來(lái)的開發(fā)便利，并提供近乎原生應(yīng)用的性能體驗(yàn)。這個(gè)設(shè)計(jì)不是通過(guò)在iOS和Android之間使用一組共享組件實(shí)現(xiàn)，而是將完全獨(dú)立的UI封裝到一個(gè)JavaScript包中，這里面包含幾乎一半的應(yīng)用程序代碼。Flutter的目的主要是為了滿足谷歌自身的需求，通過(guò)創(chuàng)建可在iOS和Android應(yīng)用程序之間共享的可重復(fù)使用的UI組件，是將縮減開發(fā)周期與原生代碼性能結(jié)合起來(lái)的又一次嘗試，這也是為什么使用谷歌的Flutter開發(fā)要比React Native快得多。Flutter的設(shè)計(jì)理念也是讓應(yīng)用開發(fā)變得更簡(jiǎn)單、更容易。它使用Dart編寫代碼，這種語(yǔ)言可以在一個(gè)周末學(xué)會(huì)并在幾天甚至幾小時(shí)內(nèi)精通，當(dāng)然前提取決于開發(fā)者所掌握的技術(shù)棧。這就是為什么我們認(rèn)為Flutter將成為那些需要在不犧牲性能或功能的情況下，需要快速創(chuàng)建大量原生移動(dòng)應(yīng)用程序的公司的首選移動(dòng)開發(fā)框架。
七、構(gòu)建移動(dòng)應(yīng)用又有了樂(lè)趣
當(dāng)谷歌發(fā)布Flutter時(shí)，開發(fā)者被它在實(shí)踐中的表現(xiàn)所震驚，與其他的專門為構(gòu)建跨平臺(tái)移動(dòng)應(yīng)用的技術(shù)相比Flutter的表現(xiàn)非常好。React Native在iOS和Android之間共享UI代碼的理念是一個(gè)偉大的創(chuàng)舉，但由于React Native固有的局限性，其所創(chuàng)建的應(yīng)用程序不能像原生應(yīng)用那樣表現(xiàn)出色。Flutter提供了許多你在當(dāng)今任何其他工具中都找不到的好功能。
Dart是一種令人印象深刻的語(yǔ)言，它天生是為創(chuàng)建移動(dòng)應(yīng)用程序而建立的。Dart是目前構(gòu)建Android和iOS應(yīng)用程序的最快的語(yǔ)言，它使得構(gòu)建高性能的UI組件變得更容易，有強(qiáng)大的IDE（集成開發(fā)環(huán)境）支持，且具備強(qiáng)大的自動(dòng)完成功能，允許在不丟失應(yīng)用狀態(tài)的情況下進(jìn)行實(shí)時(shí)編碼原型設(shè)計(jì)，并最終強(qiáng)制使用面向?qū)ο蟮脑O(shè)計(jì)模式。擁有一個(gè)有主見的框架意味著谷歌將能夠?yàn)槟阕龀鲈S多重要的決定，同時(shí)使社區(qū)能夠?qū)Ｗ⒂跇?gòu)建應(yīng)用這件真正重要的事情上。
Flutter有一個(gè)完整的工具鏈和一套漂亮的類似Material Design的組件，這些開發(fā)者都可以在他們的應(yīng)用程序中復(fù)用。谷歌還提供了一些與第三方庫(kù)的集成如：用于有效處理圖像的圖像處理庫(kù)、SQL數(shù)據(jù)庫(kù)（通過(guò)抽象進(jìn)行訪問(wèn)）和文本編輯器。所有這些都以一個(gè)內(nèi)聚的軟件包形式呈現(xiàn)給開發(fā)者，其設(shè)計(jì)考慮到了速度、易用性、生產(chǎn)力和性能。
八、Flutter和React Native應(yīng)用的優(yōu)缺點(diǎn)
使用Flutter創(chuàng)建的應(yīng)用程序與原生應(yīng)用程序沒(méi)有區(qū)別，它們具有相同的性能、外觀和體驗(yàn)（除了一些特定平臺(tái)的風(fēng)格）。在使用React Native構(gòu)建應(yīng)用程序時(shí)，人們通常抱怨的主要問(wèn)題與它的運(yùn)行時(shí)環(huán)境有關(guān)，這比為每個(gè)架構(gòu)管理單獨(dú)的進(jìn)程的問(wèn)題更嚴(yán)重。這意味著你使用React Native盡管可以實(shí)現(xiàn)接近原生的性能，但無(wú)法達(dá)到純?cè)鷳?yīng)用等同的性能。在支持現(xiàn)有的JavaScript代碼庫(kù)和允許iOS和Android應(yīng)用之間重用共享的組件方面，F(xiàn)lutter并沒(méi)有像React Native那樣便捷。現(xiàn)在讓我們深入了解一下這兩個(gè)框架的技術(shù)利弊。
1.在原生性能方面的比較
React Native提供了一個(gè)改進(jìn)的JavaScript虛擬機(jī)，它的JIT編譯器比V8速度更快。得益于它的預(yù)編譯框架，你可以自由地發(fā)布你需要的任何代碼，因?yàn)樗鼘⒈痪幾g成一個(gè)本地可執(zhí)行文件。在實(shí)踐中開發(fā)React Native和純?cè)鷳?yīng)用一樣快，因?yàn)樗梢詫?shí)現(xiàn)與iOS應(yīng)用相同的功能，而不需要對(duì)iOS的構(gòu)建設(shè)置進(jìn)行任何修改。同樣Flutter也有自己的預(yù)編譯器，一旦你創(chuàng)建了自己的項(xiàng)目，它將為iOS和安卓發(fā)布優(yōu)化后的代碼。您無(wú)需像React Native那樣將你的代碼庫(kù)發(fā)布到應(yīng)用程序的二進(jìn)制中文件中，就能獲得原生的性能。
2.在應(yīng)用程序大小方面的比較
React Native應(yīng)用程序通常包含一個(gè)壓縮的約300kb的JavaScript運(yùn)行時(shí)文件，盡管可以通過(guò)調(diào)整一些選項(xiàng)來(lái)降低文件大小，如Bypass filling（這將迫使React Native跳過(guò)填充其虛擬DOM的過(guò)程，從而造成與原生UI的差異），以及將useDeveloperMode設(shè)置為true（這將在內(nèi)存中調(diào)整圖像大小并降低其質(zhì)量）。Flutter提供了一個(gè)預(yù)編譯器，允許開發(fā)者只發(fā)送他們正在構(gòu)建的應(yīng)用程序所需的代碼庫(kù)，而不必與之捆綁任何組件。如果你愿意，可以在現(xiàn)有的JavaScript虛擬機(jī)內(nèi)運(yùn)行Flutter，這樣可以節(jié)省應(yīng)用程序所需的空間。
3.最小所需SDK版本的比較
React Native通常可以在任何iOS 9+或Android 5.0+的SDK上構(gòu)建，而不會(huì)存在任何問(wèn)題。但為了達(dá)到最佳性能，你應(yīng)該在發(fā)布時(shí)使用最新的可用SDK版本。
實(shí)際上，React Native應(yīng)用可以在更早的iOS和Android SDK上構(gòu)建，并可以在運(yùn)行時(shí)提供一組有限的功能，但為了獲得所有的功能，你需要使用最新的SDK版本。
Flutter應(yīng)用程序可以在Android 21 (Lollipop)或更新的版本上進(jìn)行構(gòu)建，我們同樣建議使用最新的SDK版本進(jìn)行構(gòu)建以獲得最佳性能。Flutter可以在iOS 8或更新的系統(tǒng)上運(yùn)行，但鑒于蘋果已經(jīng)廢棄了Flutter使用的大部分API，調(diào)用那些API可能會(huì)導(dǎo)致運(yùn)行時(shí)崩潰。
4.在UI開發(fā)方面的比較
Flutter有自己的一套用于渲染用戶界面的組件，在構(gòu)建Flutter應(yīng)用程序時(shí)，你也可以重用現(xiàn)有的iOS或Android代碼。作為第三方庫(kù)可能更容易地重用現(xiàn)有的本地組件，所以將Flutter組件映射到現(xiàn)有的iOS和Android UI組件并不容易，但這仍是一項(xiàng)正在進(jìn)行的工作。React Native則提供了一個(gè)橋接，允許你將現(xiàn)有的iOS和Android代碼作為JavaScript模塊進(jìn)行重用，以及公開了一些API，作為手動(dòng)創(chuàng)建本地UI組件和渲染它們的JavaScript代碼之間的橋梁。
5.在調(diào)試方面的優(yōu)缺點(diǎn)
React Native有自己的調(diào)試器，可以連接到你在iOS和Android上運(yùn)行的應(yīng)用程序，它為開發(fā)者提供了JavaScript虛擬機(jī)當(dāng)前狀態(tài)的預(yù)覽，以及各種檢查內(nèi)存使用情況或動(dòng)態(tài)調(diào)整某些選項(xiàng)的工具。Flutter也提供了類似的調(diào)試器，除了提供渲染引擎當(dāng)前狀態(tài)的預(yù)覽與React Native不同之外，其余都類似。
6.移動(dòng)平臺(tái)間代碼重用的比較
React Native有自己的一套API，在開發(fā)iOS和Android時(shí)都可以使用。雖然大多數(shù)使用React Native的公司會(huì)先在一個(gè)平臺(tái)（通常是iOS）上開發(fā)他們的應(yīng)用程序，然后再移植到另一個(gè)平臺(tái)，但如果愿意你也可以很容易的在iOS和Android應(yīng)用程序里面編寫共享組件。Flutter應(yīng)用程序是用特定平臺(tái)的代碼構(gòu)建的，因此不可能在你的iOS和Android應(yīng)用程序里共享任何代碼。然而，作為第三方庫(kù)可以使重用現(xiàn)有的本地組件變得更容易。
7.Flutter或React Native哪一個(gè)更容易學(xué)習(xí)？
React Native和Flutter都很容易學(xué)習(xí)（就API而言），但前提取決于開發(fā)者的專業(yè)知識(shí)。兩者都有一個(gè)龐大的、參與性強(qiáng)的開發(fā)者社區(qū)，可以給新的開發(fā)者提供幫助，并不斷創(chuàng)建新的工具和組件。對(duì)于一個(gè)幾乎沒(méi)有編碼經(jīng)驗(yàn)的全新開發(fā)者，我們可能會(huì)建議從React Native開始，因?yàn)樗峁┝艘惶最A(yù)定義的組件，可以用來(lái)構(gòu)建iOS和Android應(yīng)用程序，這樣你就可以專注于學(xué)習(xí)一種API，而不必?fù)?dān)心要學(xué)習(xí)所有用于渲染視圖的API。而對(duì)于有一定編碼經(jīng)驗(yàn)的開發(fā)者，我們可能會(huì)推薦Flutter而不是React Native，因?yàn)镕lutter提供的API更接近于iOS和Android。此外，F(xiàn)lutter背后的團(tuán)隊(duì)非常注重Flutter提供的開發(fā)體驗(yàn)，確保能夠與其他SDK（包括React Native）提供的開發(fā)體驗(yàn)媲美。
8.2023年Flutter與React Native的對(duì)比
React Native于2015年問(wèn)世，那時(shí)起已經(jīng)被許多公司所使用。JavaScript變化非常快，所以React Native也隨著時(shí)間的推移不斷發(fā)展，而且在開源社區(qū)的貢獻(xiàn)下加入了很多新的功能。Flutter是一項(xiàng)較新的技術(shù)，如果你習(xí)慣了Android或iOS，開始可能會(huì)感到相當(dāng)陌生。但谷歌為了使其更易入手付出了很多努力，因此大多數(shù)熟悉iOS或Android開發(fā)的人應(yīng)該能夠很快掌握它。
九、結(jié)論
Flutter和React Native都是跨平臺(tái)應(yīng)用開發(fā)的絕佳選擇。雖然它們有一些相似之處，但也有一些關(guān)鍵的差異是你需要知道的。為你的商業(yè)應(yīng)用或初創(chuàng)應(yīng)用選擇合適的跨平臺(tái)框架，主要取決于你的開發(fā)經(jīng)驗(yàn)、開發(fā)團(tuán)隊(duì)，以及你的項(xiàng)目需要訪問(wèn)哪些本地組件， 我們希望這篇文章能幫助你做出明智的選擇。
原文鏈接：https://dzone.com/articles/comparing-flutter-vs-react-native
譯者介紹
胥磊，51CTO社區(qū)編輯，某頭部電商技術(shù)副總監(jiān)，關(guān)注Java后端開發(fā)，技術(shù)管理，架構(gòu)優(yōu)化，分布式開發(fā)等領(lǐng)域。
