“存在即合理”。凡是存在的,都是合乎規律的。任何新事物的產生總要的它的道理;任何新事物的發展總是有着取代舊事物的能力。React Native來的正是時候,一則是因為H5發展到一定程度的受限;二則是移動市場的迅速崛起強調團隊快速響應和迭代;三則是用戶的體驗被放大,用戶要求極致的快感,除非你牛x(例如:12306最近修改手機號需要用戶自己發短信接收驗證碼)。
以下簡單的介紹下H5、React Native、Native的含義:
最近三四年間,國內外的前端與全棧開發者社區都在堅持不懈地追尋使用JavaScript與HTML、CSS技術體系開發App內場景的核心工程技術。這種技術,在國內很多公司與團隊中,被通稱為H5。——童遙
這段是取自童老師給小二我新書作的序,沒有斷章取義的意思。很清楚,H5並不是狹義的HTML5新標簽和API,而是工程化的“In App” technology。
iOS/Android ——原生應用(都懂得,不解釋)。
React Native —— React & Native ,應運而生!
一、React Native的出現
React Native的出現,似乎是扛起的反H5的旗子。就像當年Facebook放棄H5,全部轉向Native一樣。這一點,我們需要認同和保持高度的清醒。那么,React Native是否又是在吞食Native的領地呢?技術的發展,是用戶風向標的導向起的作用。任何一門技術的出現,都是當時用戶需求的體現。
我們應該從以下幾點看待React Native的出現。
"鑒往知來"——從過去的教訓中總結經驗,從用戶的角度開拓未來
“HTML5差強人意,但是與原生應用相比還是有些差距”——為了更高的追求! 用戶體驗!
“人才寶貴,快速迭代”——Web開發者相對較多,尋找平衡點
“跨平台!跨平台!跨平台!”——單一技術棧
“xx是世界上最好的語言” ——工程學的范疇,沒有最好,只有最適合
HTML5 vs React Native ? HTML5 : React Native
結論(React Native):
1、原生應用的用戶體驗
2、跨平台特性
3、開發人員單一技術棧
4、上手快,入門容易
5、社區繁榮
二、3款應用效果
注:以下所有對比均在iOS平台下
每日更新關注:http://weibo.com/hanjunqiang 新浪微博!
上面3張圖片,如果去掉第一張圖的“HybirdApp”的字樣,是否分得清哪個是React Native開發?哪個是Native應用。
你的第一感覺是什么?
三、工程方案
為了評估3種方案的技術優勢和弱勢。我們需要開發功能大致相似的App。這里,我們使用了“豆瓣”的API來開發“豆搜”應用。該應用能夠搜索“圖書”、“音樂”、“電影”。想當年,豆瓣以“圖書評論”走紅,尤其是12年當紅!豆瓣是一個清新文藝的社區,一個“慢公司”。最近有一則網傳消息,注意是網傳——“傳京東投1.5億美元控股豆瓣”。今天,不聊豆瓣,我們要聊一個工程化的問題。
我們需要將3款App的功能做到一致,同時需要保持技術要點一致。比如React Native這里使用了TabBar,那么Native我們也必須使用TabBar。簡單而言就是:功能一致,組件 & API一致。我們功能如下圖所示:
每日更新關注:http://weibo.com/hanjunqiang 新浪微博!
1、H5方案
在H5/Hybird應用中,我們使用AngularJS開發單頁webApp,然后將該WebApp內嵌入到iOS WebView中,在iOS代碼中,我們使用Navigation稍微控制下跳轉。
WebApp地址:http://vczero.github.io/search/html/index.html
WebApp項目地址:https://github.com/vczero/search (很簡單的一個項目)
H5/Hybird項目地址:https://github.com/vczero/search_Hybird
2、React Native
在React Native中,封裝必要的功能組件。
項目地址:https://github.com/vczero/React-Dou。
項目結構如下圖:
3、Native(iOS)
使用React Native大致相同的組件開發App,不使用任何第三方庫,代碼布局。
項目地址:https://github.com/vczero/iOS-Dou
四、對比分析
很多時候,新技術的采用最希望看到的是數據,而不是簡單說“用戶體驗棒,開發效率高,維護成本低”。不過,生活中也有這樣的同學,知一二而能窺全貌。當然,本人生性膽小,也沒有那么多的表哥和隔壁的老王,所以不敢早下定論,不敢太放肆。趙本山在《大笑江湖》中有句名言“May the force be with you”(別太放肆,沒什么用)。因此,從以下幾個方面做一個簡單的對比。