H5、React Native、Native應(yīng)用對(duì)比分析

離上次在北京開源中國(guó)盛典已經(jīng)快一個(gè)月了，有點(diǎn)想念@oschina的小伙伴了。我必須承認(rèn)oschina是國(guó)內(nèi)最大的同性社交網(wǎng)站，這也是無可爭(zhēng)議的事實(shí)，但是，我真想的是妹子?。。。弁敌Γ荨纳洗窝葜v后，有一些同學(xué)陸陸續(xù)續(xù)問我演講的PPT在哪，還有不少同學(xué)希望看到［手稿］，這學(xué)習(xí)精神，在下實(shí)在是佩服啊。有著這么熱情的小伙伴，我激動(dòng)不已啊，所以在此公布［手稿］，方便大家可以將［PPT］和［手稿］雙手齊下，：）。2015年，我們要一起努力完成以前吹過的牛逼.....  下面是［多圖預(yù)警］，請(qǐng)考慮切wifi，土豪請(qǐng)無視我，也可拿紅包砸我，：）   

－－－－－－－－－－－－－－－華麗麗的分割線，主題開始－－－－－－－－－－－－－－－－－－－－－

“存在即合理”。凡是存在的，都是合乎規(guī)律的。任何新事物的產(chǎn)生總要的它的道理；任何新事物的發(fā)展總是有著取代舊事物的能力。React Native來的正是時(shí)候，一則是因?yàn)镠5發(fā)展到一定程度的受限；二則是移動(dòng)市場(chǎng)的迅速崛起強(qiáng)調(diào)團(tuán)隊(duì)快速響應(yīng)和迭代；三則是用戶的體驗(yàn)被放大，用戶要求極致的快感，除非你牛x（例如：12306最近修改手機(jī)號(hào)需要用戶自己發(fā)短信接收驗(yàn)證碼）。

以下簡(jiǎn)單的介紹下H5、React Native、Native的含義：

最近三四年間，國(guó)內(nèi)外的前端與全棧開發(fā)者社區(qū)都在堅(jiān)持不懈地追尋使用JavaScript與HTML、CSS技術(shù)體系開發(fā)App內(nèi)場(chǎng)景的核心工程技術(shù)。這種技術(shù)，在國(guó)內(nèi)很多公司與團(tuán)隊(duì)中，被通稱為H5。——童遙

這段是取自@童老師給小二我新書作的序，沒有斷章取義的意思。很清楚，H5并不是狹義的HTML5新標(biāo)簽和API，而是工程化的“In App” technology。

iOS/Android ——原生應(yīng)用（都懂得，不解釋）。

React Native —— React & Native ，應(yīng)運(yùn)而生！

一、React Native的出現(xiàn)

React Native的出現(xiàn)，似乎是扛起的反H5的旗子。就像當(dāng)年Facebook放棄H5，全部轉(zhuǎn)向Native一樣。這一點(diǎn)，我們需要認(rèn)同和保持高度的清醒。那么，React Native是否又是在吞食Native的領(lǐng)地呢？技術(shù)的發(fā)展，是用戶風(fēng)向標(biāo)的導(dǎo)向起的作用。任何一門技術(shù)的出現(xiàn)，都是當(dāng)時(shí)用戶需求的體現(xiàn)。

我們應(yīng)該從以下幾點(diǎn)看待React Native的出現(xiàn)。

'鑒往知來'——從過去的教訓(xùn)中總結(jié)經(jīng)驗(yàn)，從用戶的角度開拓未來，用戶更希望產(chǎn)品迭代和穩(wěn)定尋求一種平衡
“HTML5差強(qiáng)人意，但是與原生應(yīng)用相比還是有些差距”——為了更高的追求！ 用戶體驗(yàn)！
“人才寶貴，快速迭代”——Web開發(fā)者相對(duì)較多，尋找平衡點(diǎn)
“跨平臺(tái)！跨平臺(tái)！跨平臺(tái)！”——單一技術(shù)棧，開發(fā)者的福音
“xx是世界上最好的語言” ——工程學(xué)的范疇，沒有最好，只有最適合，我還是補(bǔ)充一句，JS還是很好很好的。

HTML5 vs React Native ? HTML5 : React Native
結(jié)論（React Native）：
1、原生應(yīng)用的用戶體驗(yàn)
2、跨平臺(tái)特性
3、開發(fā)人員單一技術(shù)棧
4、上手快，入門容易
5、社區(qū)繁榮

二、3款應(yīng)用效果

注：以下所有對(duì)比均在iOS平臺(tái)下



上面3張圖片，如果去掉第一張圖的“HybirdApp”的字樣，是否分得清哪個(gè)是React Native開發(fā)？哪個(gè)是Native應(yīng)用。
你的第一感覺是什么？

三、工程方案

為了評(píng)估3種方案的技術(shù)優(yōu)勢(shì)和弱勢(shì)。我們需要開發(fā)功能大致相似的App。這里，我們使用了“豆瓣”的API來開發(fā)“豆搜”應(yīng)用。該應(yīng)用能夠搜索“圖書”、“音樂”、“電影”。想當(dāng)年，豆瓣以“圖書評(píng)論”走紅，尤其是12年當(dāng)紅！豆瓣是一個(gè)清新文藝的社區(qū)，一個(gè)“慢公司”。最近有一則網(wǎng)傳消息，注意是網(wǎng)傳——“傳京東投1.5億美元控股豆瓣”。今天，不聊豆瓣，我們要聊一個(gè)工程化的問題。

我們需要將3款A(yù)pp的功能做到一致，同時(shí)需要保持技術(shù)要點(diǎn)一致。比如React Native這里使用了TabBar，那么Native我們也必須使用TabBar。簡(jiǎn)單而言就是：功能一致，組件 & API一致。我們功能如下圖所示：

1、H5方案
在H5/Hybird應(yīng)用中，我們使用AngularJS開發(fā)單頁webApp，然后將該WebApp內(nèi)嵌入到iOS WebView中，在iOS代碼中，我們使用Navigation稍微控制下跳轉(zhuǎn)。
WebApp地址：http://vczero./search/html/index.html
WebApp項(xiàng)目地址：https://github.com/vczero/search （很簡(jiǎn)單的一個(gè)項(xiàng)目）
H5/Hybird項(xiàng)目地址：https://github.com/vczero/search_Hybird

2、React Native
在React Native中，封裝必要的功能組件。
項(xiàng)目地址：https://github.com/vczero/React-Dou。
項(xiàng)目結(jié)構(gòu)如下圖：

3、Native(iOS)
使用React Native大致相同的組件開發(fā)App，不使用任何第三方庫，代碼布局。
項(xiàng)目地址：https://github.com/vczero/iOS-Dou

四、對(duì)比分析

很多時(shí)候，新技術(shù)的采用最希望看到的是數(shù)據(jù)，而不是簡(jiǎn)單說“用戶體驗(yàn)棒，開發(fā)效率高，維護(hù)成本低”。不過，生活中也有這樣的同學(xué)，知一二而能窺全貌。當(dāng)然，本人生性膽小，也沒有那么多的表哥和隔壁的老王，所以不敢早下定論，不敢太放肆。趙本山在《大笑江湖》中有句名言“May the force be with you”（別太放肆,沒什么用）。因此，從以下幾個(gè)方面做一個(gè)簡(jiǎn)單的對(duì)比。

－－－－－－－－－－－－－－－分析提綱－－－－－－－－－－－－－－－－

1、開發(fā)方式

（1）代碼結(jié)構(gòu)
（2）UI布局
（3）UI截面圖
（4）路由／Navigation
（5）第三方生態(tài)鏈

2、性能 & 體驗(yàn)

（1）內(nèi)存
（2）CPU
（3）動(dòng)畫
（4）安裝包體積
（5）Big ListView
（6）真機(jī)體驗(yàn)

3、更新 & 維護(hù)

（1）更新能力
（2）維護(hù)成本
－－－－－－－－－－－－－－－－－提綱－－－－－－－－－－－－－－－

1、開發(fā)方式

很多人說React Native的代碼不好看，不好理解。那是因?yàn)榍岸斯こ處煻际煜ち薟eb的開發(fā)方式。怎么解決這個(gè)問題呢，可以先看看iOS代碼，斷定不熟悉iOS的同學(xué)心里會(huì)默念“一萬匹**馬奔騰”。那時(shí)候，你再看React Native，你會(huì)覺得使用React Native開發(fā)App是件多么美好的事！OK，我們先來看下三者在開始“一款簡(jiǎn)單App”的代碼結(jié)構(gòu)。
（1）代碼結(jié)構(gòu)
H5/Hybird的開發(fā)模式，我們需要維護(hù)3套代碼，兩套是Native（iOS/Android）代碼，一套是WebApp版本。這里，我們使用AngularJS作為WebApp單頁開發(fā)框架。如下圖所示。

在React Native中，同樣需要關(guān)注部分的Native代碼，但是大部分還是前端熟悉的JavaScript。在“豆搜”應(yīng)用中，代碼結(jié)構(gòu)如下：

在Native開發(fā)中，更加強(qiáng)調(diào)Native開發(fā)者的能力。平臺(tái)是：iOS/Android。

結(jié)論：從前端角度而言，React Native跨平臺(tái)特性，不要開發(fā)者深入的了解各平臺(tái)就能開發(fā)一款高效App。同時(shí)，語言層面而言，JavaScript運(yùn)用很廣泛，入門門檻相對(duì)較低。React Native雖然拋棄了MVC分離實(shí)踐，但是從業(yè)務(wù)角度而言，更為合理。一切而言：對(duì)前端，對(duì)移動(dòng)領(lǐng)域是利好的消息。

（2）UI布局
“面容姣好”，合理的UI卻總是跟著時(shí)間在變。那么UI布局就不是小事。
Web開發(fā)布局目前大多是 DIV + CSS。
React Native的布局方式是Flexbox。

   //JSX                                        搜索              {      this.state.show ?            : Util.loading    }    //樣式  var styles = StyleSheet.create({      flex_1:{        flex:1,        marginTop:5      },      search:{        paddingLeft:5,        paddingRight:5,        height:45      },      btn:{        width:50,        backgroundColor:'#0091FF',        justifyContent:'center',        alignItems:'center'      },      fontFFF:{        color:'#fff'      },      row:{        flexDirection:'row'      }    });

而Native布局就有種讓你想吐的感覺，尤其是iOS的布局。這里不是指采用xib或者Storyboard，而是單純的代碼，例如添加一個(gè)文本：

UILabel *publisher = [[UILabel alloc]init];publisher.frame = CGRectMake(bookImgWidth + 10, 50, 200, 30);publisher.textColor = [UIColor colorWithRed:0.400 green:0.400 blue:0.435 alpha:1];publisher.font = [UIFont fontWithName:@'Heiti TC' size:13];publisher.text = obj[@'publisher'];[item addSubview:publisher];

總結(jié)：React Native既綜合了Web布局的優(yōu)勢(shì)，采用了FlexBox和JSX，又使用了Native原生組件。比如我們使用一個(gè)文本組件。
測(cè)試

（3）UI截面圖
Hybrid方式截面圖

可以看到第一層列表頁是完整的布局，實(shí)際上這就是Web頁面；而第二層灰色的是Native的WebView組件。
iOS UI截面圖


可以看到Native頁面的組件特別多，即使是列表頁，其中某一項(xiàng)都是一個(gè)組件（控件）。

當(dāng)然，我們就會(huì)想，能夠完全調(diào)用原生組件呢？那樣性能是否更好？
React Native UI截面圖


可以清楚的看到React Native調(diào)用的全部是Native組件。并且層次更深，因?yàn)镽eact Native做了組件的封裝。如上圖，藍(lán)色邊框的就是RCTScrollView組件。這就是React Native相比H5更高效的原因。

（4）路由／Navigation
在Web單頁面應(yīng)用中，路由由History API實(shí)現(xiàn)。
而React Native采用的路由是原生的UINavigationController導(dǎo)航控制器實(shí)現(xiàn)。
React Native NavigatorIOS組件封裝程度高；Navigator可定制化程度高。
Navigator方法如下：

getCurrentRoutes() - returns the current list of routesjumpBack() - Jump backward without unmounting the current scenejumpForward() - Jump forward to the next scene in the route stackjumpTo(route) - Transition to an existing scene without unmountingpush(route) - Navigate forward to a new scene, squashing any scenes that you could jumpForward topop() - Transition back and unmount the current scenereplace(route) - Replace the current scene with a new routereplaceAtIndex(route, index) - Replace a scene as specified by an indexreplacePrevious(route) - Replace the previous sceneimmediatelyResetRouteStack(routeStack) - Reset every scene with an array of routespopToRoute(route) - Pop to a particular scene, as specified by its route. All scenes after it will be unmountedpopToTop() - Pop to the first scene in the stack, unmounting every other scene

相對(duì)Native而言，這些接口更Native還是很相似的。

//iOS UINavigationController  //相對(duì)Web而言，不用自己去實(shí)現(xiàn)路由，并且路由更加清晰         [self.navigationController pushViewController:detail animated:YES];

'豆搜' WebApp路由（基于AngularJS）如下：

'豆搜' React Native版本導(dǎo)航如下：

'豆搜' iOS版本導(dǎo)航代碼如下：

總結(jié)：React Native封裝的導(dǎo)航控制更容易理解。

（5）第三方生態(tài)鏈
“我的是我的，你的也是我的。 ”——我不是“瘋狂女友”，我是React Native！
我們?nèi)鄙佟俺鞘辛斜怼苯M件，OK，使用JSX封裝一個(gè)；覺得性能太低，OK，基于React Native方案封裝一個(gè)原生組件。
這個(gè)iOS圖表庫不錯(cuò)，拿來用唄！ => 完美！
這一切都是基于React Native提供的模塊擴(kuò)展方案。
所以說：iOS第三方庫 + 部分JavaScript庫 ＝ React Native 生態(tài)庫（可以知道，基于React Native的擴(kuò)展方案是多么方便）

2、性能 & 體驗(yàn)

我們都很關(guān)注一款A(yù)pp性能。因此測(cè)試和體驗(yàn)App的性能很重要。以下測(cè)試，都是基于相同的case。
測(cè)試平臺(tái)：模擬器，iphone6，iOS8.4
（1）內(nèi)存
首先，我們來看下Native應(yīng)用占用的內(nèi)存情況。一開始，原生應(yīng)用啟動(dòng)后，占用內(nèi)存是20~25M；針對(duì)相同的case，跑了2min，結(jié)果如下圖：

可以看出，峰值是87.9M，均值是72M；內(nèi)存釋放比較及時(shí)。

我們?cè)賮砜聪翲ybird App的情況。App已啟動(dòng)，占用內(nèi)存35~55M;同樣，跑了2min以上，結(jié)果如下圖：

可以看出，峰值在137.9M，因?yàn)檎麄€(gè)應(yīng)用在WebView中，內(nèi)存釋放不明顯，存在緩存。

最后，看下React Native的情況。App啟動(dòng)占用內(nèi)存35～60M，同樣跑2min以上，結(jié)果如下圖：

可以看出，峰值在142M，內(nèi)存相對(duì)釋放明顯。

總結(jié)：React Native和Web View在簡(jiǎn)單App上相差不大。二者主要：內(nèi)存消耗主要是在網(wǎng)頁數(shù)據(jù)上。

（2）CPU
我們可以看一下Native應(yīng)用程序CPU的情況，最高值在41%。

Hybird App的最高值在30%。

React Native的最高值在34%。

總結(jié)：CPU使用率大體相近，React Native的占用率低于Native。

（3）動(dòng)畫
React Native提供了Animated API實(shí)現(xiàn)動(dòng)畫。簡(jiǎn)單效果，基本OK。個(gè)人覺得React Native不適合做游戲，尤其布局能力。
Native Animation提供UIView動(dòng)畫
H5/Hybird：采用js動(dòng)畫能力
總結(jié)：React Native Animated API / 封裝Native動(dòng)畫庫 可以滿足基本需求

（4）安裝包體積
Hybird App:
34(App殼) + 5(HTML) + 125(Angular) + 29(An-route) + 6(min.js) + 4(min.css) = 203 KB。

React Native:
不含bundle: 843KB
含bundle: 995KB

Native
83KB

React Native框架包大小
843(不含bundle) - 32(Hybird_app空殼，初識(shí)項(xiàng)目) = 811KB

相比快速迭代和熱更新，比Native多了811KB一點(diǎn)都不重要，我們將圖片素材、靜態(tài)資源線上更新緩存起來即可減少很多體積。
總結(jié)：犧牲一點(diǎn)體積，換更大的靈活性?。ㄊ澜缟夏挠心敲疵赖氖拢浅?，就會(huì)想得美，:) ）。

（5）Big ListView & Scroll 性能
循環(huán)列表項(xiàng)500次: H5頁面慘不忍睹
React Native還可以接受
Native 采用UITabView更高效，因?yàn)椴讳秩疽晥D外部分。

（6）真機(jī)體驗(yàn)
機(jī)型：iphone4s，iOS7
Native > React Native > Hybird
如果非要給個(gè)數(shù)字的話，那我個(gè)人主觀感受是：
Native： 95％＋ 流暢度
React Native: 85~90% 流暢度
H5/Hybird： 70% 流暢度

總結(jié)：Native／React Native的體驗(yàn)相對(duì)而言更流暢。

3、更新 & 維護(hù)

（1）更新能力
H5/Hybird： 隨時(shí)更新，適合做營(yíng)銷頁面，目前攜程一些BU全部都是H5頁面；但是重要的部分還是Native。
React Native：React Native部分可以熱更新，bug及時(shí)修復(fù)。
Native：隨版本更新，尤其iOS審核嚴(yán)格，需要測(cè)試過關(guān)，否則影響用戶。

（2）維護(hù)成本
H5/Hybird： Web代碼 ＋ iOS/Android平臺(tái)支持
React Native：可以一個(gè)開發(fā)團(tuán)隊(duì) ＋ iOS/Android工程師；業(yè)務(wù)組件顆粒度小，不用把握全局即可修改業(yè)務(wù)代碼。
Native：iOS/Android開發(fā)周期長(zhǎng)，兩個(gè)開發(fā)團(tuán)隊(duì)。

總結(jié)：React Native 統(tǒng)一了開發(fā)人員技術(shù)棧，代碼維護(hù)相對(duì)容易。

五、綜合

1、開發(fā)方式

（1）代碼結(jié)構(gòu)： React Native更為合理，組件化程度高
（2）UI布局：Web布局靈活度 > React Native > Native
（3）UI截面圖：React Native使用的是原生組件，
（4）路由／Navigation：React Native & Native更勝一籌
（5）第三方生態(tài)鏈：Native modules + js modules = React Native modules

2、性能 & 體驗(yàn)

（1）內(nèi)存：Native最少；因?yàn)镽eact Native含有框架，所以相對(duì)較高，但是后期平穩(wěn)后會(huì)優(yōu)于Native。
（2）CPU：React Native居中。
（3）動(dòng)畫：React Native動(dòng)畫需求基本滿足。
（4）安裝包體積：React Native框架打包后，811KB。相比熱更新，可以忽略和考慮資源規(guī)劃。
（5）Big ListView
（6）真機(jī)體驗(yàn)：Native >= React Native > H5/Hybrid

3、更新 & 維護(hù)

（1）更新能力: H5/Hybird > React Native > Native
（2）維護(hù)成本: H5/Hybird <= react="" native=""><>

React Native定制難度相比Native有些大；但是具備跨平臺(tái)能力和熱更新能力。      

說了這么多，最后個(gè)人建議：

一個(gè)新的App完全可以采用React Native開發(fā)，這樣成本會(huì)低很多。    

關(guān)于演講：

PPT: http://www.oschina.net/doc/24007

視頻：http://www.oschina.net/question/865233_2145334 （這個(gè)演講在移動(dòng)專場(chǎng)下半場(chǎng)開場(chǎng)）       

六、圖書 & 工作機(jī)會(huì)

最后說一下圖書《React Native入門與實(shí)戰(zhàn)》吧。這是一本［難產(chǎn)］的家伙，15年寫的比較順利，最后因?yàn)楸本╈F霾，印刷廠偶爾停工，一直在難產(chǎn)。前段時(shí)間，圖書發(fā)往各地書店，到店比較遲，我猜測(cè)是因?yàn)殪F霾，找不到高速出口～～目前該書由人民郵電出版社圖靈原創(chuàng)出版，已經(jīng)開賣了。本書主要是希望帶領(lǐng)大家一起進(jìn)入React Native開發(fā)領(lǐng)域，針對(duì)每個(gè)API和組件都有詳細(xì)的案例，同時(shí)為了更好的實(shí)戰(zhàn)，最后3章以實(shí)際案例（通訊錄App，LBS App，基于豆瓣OpenAPI的搜索 App）給出，供大家參考。覺得入門是完全沒問題的，后期大家可以一起交流，爭(zhēng)取豐富國(guó)內(nèi)React Native社區(qū)。   

《React Native入門與實(shí)戰(zhàn)》各網(wǎng)站購(gòu)買地址：

京東：http://item.jd.com/10089810271.html (目前應(yīng)該都有貨了，微信有同學(xué)傳照片給我看了，鐵粉哈)

            http://item.jd.com/11844102.html (京東自營(yíng)，貨源需要跟客服確認(rèn)哦)

互動(dòng)：http://product./4904552 (已經(jīng)有貨)

天貓：https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.21.rc0yeu&id=525484671101&cat_id=2&rn=4690ef5b4e06412ffae4d1cc4f4dcc9a&user_id=1020536390&is_b=1 (天貓這家賣的還可以，不知道為啥京東看不到數(shù)據(jù)，京東應(yīng)該才是技術(shù)買書的最愛啊，聽說也預(yù)售了不少呢)

［工作機(jī)會(huì)］

說了這么多了，都晚上11點(diǎn)30了，困，最近離公司遠(yuǎn)??；對(duì)了，有需要考慮上海工作機(jī)會(huì)的同學(xué)可以聯(lián)系我，前端、H5、Node.js等都要，Android、java都可以推薦哦。目前負(fù)責(zé)前端團(tuán)隊(duì)，具體問題的可以郵件(wlhmyit@126.com)或者私信給我。以后可以一起裝逼一起擼代碼。