Native App

React Native(RN)發(fā)布于2015年，也是使用JavaScript語(yǔ)言進(jìn)行跨平臺(tái)APP的開(kāi)發(fā)。與H5開(kāi)發(fā)不同的是，它使用JS橋接技術(shù)在運(yùn)行時(shí)編譯成各個(gè)平臺(tái)的Native代碼，其使用的技術(shù)Facebook的Flux技術(shù)。

[[263972]]

其特點(diǎn)是：

• 使用JavaScript語(yǔ)言，由于JS被廣泛地使用，所以RN也很容易被接受。
• RN依賴JS的運(yùn)行時(shí)環(huán)境，也就是JS橋接技術(shù)。其使用Facebook的Flux架構(gòu)。
• RN僅提供了UI渲染和設(shè)備訪問(wèn)的API，很多功能必須依賴第三方庫(kù)來(lái)實(shí)現(xiàn)對(duì)本地組件的使用。
• 生態(tài)目前比較完善，使用的公司也比較多，特別是對(duì)JS比較熟悉的同學(xué)容易上手。
• 支持熱部署，開(kāi)發(fā)過(guò)程中可以節(jié)約很多時(shí)間。

但是它也有缺點(diǎn)的：

• 它的渲染方式還是調(diào)用各個(gè)平臺(tái)的原生控件，有時(shí)需要針對(duì)不同的平臺(tái)做不同的優(yōu)化。
• 其性能相對(duì)于H5有很大的提高，但是并沒(méi)有解決，白屏，丟幀問(wèn)題依然存在。
• 傳統(tǒng)的原生APP開(kāi)發(fā)模式，有IOS和AOS兩大系統(tǒng)，需要各自語(yǔ)言開(kāi)發(fā)各自APP。
• 目前也有很多跨平臺(tái)應(yīng)用使用React Native。它也是跟Flutter對(duì)比的主要對(duì)象。

優(yōu)點(diǎn)：其優(yōu)點(diǎn)是目前的生態(tài)相對(duì)比較成熟

缺點(diǎn)：開(kāi)發(fā)和發(fā)布成本高

• 舉個(gè)栗子：網(wǎng)易管家APP (Tab1，Tab2)

應(yīng)用技術(shù)：Swift，OC，JAVA

WebApp

常被人提起的H5技術(shù)，其實(shí)就是網(wǎng)頁(yè)+JavaScript。比如目前的一些流行的JS框架Vue，React，AngularJS等都是為了構(gòu)建網(wǎng)頁(yè)。針對(duì)移動(dòng)端構(gòu)建出來(lái)的網(wǎng)頁(yè)可以實(shí)現(xiàn)在跨平臺(tái)的功能，但是其缺點(diǎn)也很明顯：

• 渲染效率低下，用戶體驗(yàn)差。很多H5在iOS平臺(tái)表現(xiàn)尚可，但是在Android上特別是一些低端機(jī)上的表現(xiàn)確實(shí)讓人不敢恭維。
• 網(wǎng)頁(yè)調(diào)用設(shè)備硬件相關(guān)API比較困難，而且支持的功能較少，實(shí)現(xiàn)此類(lèi)需求是H5的短板。
• 移動(dòng)端的網(wǎng)站，常被稱(chēng)為H5應(yīng)用，說(shuō)白了就是特定運(yùn)行在移動(dòng)端瀏覽器上的網(wǎng)站應(yīng)用。一般泛指 SPA(Single Page
• Application)模式開(kāi)發(fā)出的網(wǎng)站，與MPA(Multi-page Application，再后面做介紹)對(duì)應(yīng)。

優(yōu)點(diǎn) ：開(kāi)發(fā)和發(fā)布成本很低

缺點(diǎn) ：性能和體驗(yàn)不能講是最差的，但也受到瀏覽器處理能力的限制，多次下載同樣會(huì)占用用戶一定的流量

• 舉個(gè)栗子：網(wǎng)易管家APP(Tab3)

應(yīng)用技術(shù)：ReactJS，RegularJS等

Hybrid App

• 混合模式移動(dòng)應(yīng)用，介于web-app、native-app這兩者之間的app，兼具“Native App良好交互體驗(yàn)的優(yōu)勢(shì)”和“Web App跨平臺(tái)
• 開(kāi)發(fā)的優(yōu)勢(shì)”(百度百科解釋)
• 主要的原理是，由Native通過(guò)JSBridge等方法提供統(tǒng)一的API，然后用HTML+CSS實(shí)現(xiàn)界面，JS來(lái)寫(xiě)邏輯，調(diào)用API，最終的頁(yè)

面在webview中顯示，這種模式下，Android、iOS的API一般有一致性，Hybrid App所有有跨平臺(tái)效果。

優(yōu)點(diǎn)： 開(kāi)發(fā)和發(fā)布都比較方便，效率介于Native App、Web App之間

缺點(diǎn)： 學(xué)習(xí)范圍較廣，需要原生配合

• 舉個(gè)栗子：網(wǎng)易云音樂(lè)，我愛(ài)我家App

應(yīng)用技術(shù)： PhoneGap，AppCan，Wex5

React Native App

Facebook發(fā)現(xiàn)Hybrid App存在很多缺陷和不足，于是發(fā)起開(kāi)源的一套新的APP開(kāi)發(fā)方案RN App。。使用JSX語(yǔ)言寫(xiě)原生界面，

js通過(guò)JSBridge調(diào)用原生API渲染UI交互通信。

優(yōu)點(diǎn)： 效率體驗(yàn)接近Native App，發(fā)布和開(kāi)發(fā)成本低于Native App

缺點(diǎn)： 學(xué)習(xí)有一定成本，且文檔較少，免不了踩坑

• 舉個(gè)栗子：youtube、discord、QQ、百度等等

WEEX App

阿里巴巴開(kāi)發(fā)團(tuán)隊(duì)在RN的成功案例上，重新設(shè)計(jì)出的一套開(kāi)發(fā)模式，站在了巨人肩膀上并有淘寶團(tuán)隊(duì)項(xiàng)目做養(yǎng)料，廣受關(guān)注，

2016年4月正式開(kāi)源，并在v2.0版本官方支持Vue.js，與RN分庭抗禮。

優(yōu)點(diǎn)： 開(kāi)發(fā)效率和體驗(yàn)上跟RN不相上下，并且跨平臺(tái)性更強(qiáng)

缺點(diǎn)： 剛剛起步，社區(qū)沒(méi)有RN活躍

• 舉個(gè)栗子：淘寶、天貓、餓了么等
• Flutter 咸魚(yú)正在使用 ， 而且他們也推薦大家嘗試新技術(shù) 來(lái)自谷歌，不過(guò)貌似國(guó)內(nèi)崗位少，有人說(shuō)寫(xiě)這個(gè)35歲后可以出國(guó)。(我等將信將疑)

Flutter介紹

Flutter是Google推出的開(kāi)源移動(dòng)應(yīng)用開(kāi)發(fā)框架。開(kāi)發(fā)者可以通過(guò)開(kāi)發(fā)一套代碼同時(shí)運(yùn)行在iOS和Android平臺(tái)。

它使用Dart語(yǔ)言進(jìn)行開(kāi)發(fā)，并且最終編譯成各個(gè)平臺(tái)的Native代碼，這樣既保證了開(kāi)發(fā)效率，也保證了各個(gè)平臺(tái)的運(yùn)行效率。其相當(dāng)于從頭到尾重寫(xiě)了一套UI框架，不依賴具體平臺(tái)的組件。其所有的組件都是"Widget"。渲染引擎則依靠高效渲染庫(kù)Skia實(shí)現(xiàn)。

Flutter也看到了目前的跨平臺(tái)解決方案有缺點(diǎn)，所以它借鑒了React Native的一些思想，做出了很大的優(yōu)化。它將代碼編譯成原生代碼，并且直接在各個(gè)平臺(tái)中使用其高效渲染引擎Skia進(jìn)行渲染，沒(méi)有橋接，不調(diào)用平臺(tái)相關(guān)控件。

這種設(shè)計(jì)思想解決了不同平臺(tái)的性能問(wèn)題。

歸功于其設(shè)計(jì)思想，我們可以真正實(shí)現(xiàn)一套代碼，運(yùn)行不同的平臺(tái)。在其推出之后，關(guān)注的開(kāi)發(fā)者數(shù)量和相關(guān)的教程的增長(zhǎng)速度遠(yuǎn)超當(dāng)時(shí)的React Native。

其特點(diǎn)包括：

• 使用Google自主開(kāi)發(fā)的Dart語(yǔ)言。Dart語(yǔ)言是一個(gè)強(qiáng)類(lèi)型的語(yǔ)言，很好地支持面向?qū)ο?，并且易于學(xué)習(xí)和使用。
• 使用谷歌自己的Skia渲染引擎，Android自帶Skia引擎，iOS平臺(tái)上Flutter也會(huì)把Skia引擎打包到APP中，實(shí)現(xiàn)高效渲染。
• 目前有非常豐富的視圖組件，可以點(diǎn)擊這里查看其組件目錄，包括Android上常用的材料設(shè)計(jì)(Material Design)的UI風(fēng)格，和iOS風(fēng)格(Cupertino)。由于其渲染不依賴各平臺(tái)相關(guān)組件，所以運(yùn)行在不同平臺(tái)上的效果是一致的。

同樣支持熱部署，開(kāi)發(fā)時(shí)可以像網(wǎng)頁(yè)開(kāi)發(fā)一樣實(shí)時(shí)看到效果。

目前它存在的一些問(wèn)題是：

• 國(guó)內(nèi)學(xué)習(xí)資源目前并不豐富，使用Flutter的公司也比較少。
• 相關(guān)的生態(tài)還沒(méi)有React Native那樣豐富，但是其發(fā)展速度大大超過(guò)了React Native。

總結(jié)

運(yùn)用于跨平臺(tái)開(kāi)發(fā)的語(yǔ)言還有很多，如PWA，Uni App等。個(gè)人看來(lái)，F(xiàn)lutter有發(fā)展?jié)摿?，雖然Flutter目前并不是非常流行，但是筆者相信它是跨平臺(tái)解決方案的未來(lái)。如果谷歌的新系統(tǒng)Fuchsia OS能像當(dāng)今的Android這樣如日中天，甚至替代掉Android的話，F(xiàn)lutter的發(fā)展也會(huì)迎來(lái)它的頂峰。

如果你想做一個(gè)企業(yè)名片之類(lèi)的東西，讓更多人知道自家產(chǎn)品，那也許一個(gè)網(wǎng)站就夠了;但如果產(chǎn)品核心功能只有native app才能提供，或者你想要確保用戶有更好的體驗(yàn)、更強(qiáng)的黏性，那可能就需要做native app。