|
標(biāo)簽： 原文鏈接
導(dǎo)讀：最近公司的一款新產(chǎn)品APP要進(jìn)行研發(fā),，老大的意思想用H5來做混合APP以達(dá)到高效敏捷開發(fā)的目的,。我自然就開始進(jìn)行各種技術(shù)選型的調(diào)研，這里重點(diǎn)想說的是我最后挑選出的2款hybrid app開發(fā)技術(shù)方案：RN(react native),，HBuilder,。React Native是大名鼎鼎的Facebook的開源技術(shù)框架，而HBuilder是國內(nèi)的H5工具開發(fā)公 司DCLOUD的產(chǎn)品,。我自己先總結(jié)下吧：這兩個(gè)技術(shù)框架在開發(fā)效率上基本上可以媲美WEB開發(fā)的速度,，RN強(qiáng)調(diào)的是“Learn once, write anywhere”，RN不強(qiáng)求一份原生代碼支持多個(gè)平臺,；而HBuilder則可以實(shí)現(xiàn)類似JAVA的“Write once, run anywhere”,，也就是說寫一份代碼，即可同時(shí)發(fā)布多平臺,，這個(gè)效率比原生開發(fā)而言自然會double,。兩者的原理其實(shí)都是基于JS在做前端開發(fā)，用JS去做橋接調(diào)用原生的API,，最大的優(yōu)點(diǎn)是方便做APP的動(dòng)態(tài)更新而不用頻繁去發(fā)布版本,，當(dāng)然hybrid的這種框架也有弱勢缺點(diǎn)，就是目前原生APP的開發(fā)生態(tài)已經(jīng)趨向成熟,，一些第三方庫和框架不僅豐富而且穩(wěn)定,，所以如果改用基于JS的Hybrid app方案來做，一定要考慮APP產(chǎn)品是否適合用這種技術(shù)來做,。
下面我把一些網(wǎng)友對這兩個(gè)框架的看法列舉如下供參考：
RN -React Native部分—————————————————
React Native的核心實(shí)現(xiàn)：先簡單說幾點(diǎn),，詳細(xì)的等回頭更新。1. React Native里面沒有webview,，這貨不是Hybrid app,，里面執(zhí)行JS是用的
JavascriptCore,。2. 再說React Native的核心，iOS Native code提供了十來個(gè)最基本核心的類（RCTDeviceEventEmitter,、RCTRenderingPerf等）,、或組件（RCTView、RCTTextField,、RCTTextView,、RCTModalFullscreenView等），然后由React Native的JS部分,，組成二十來個(gè)基本組件（Popover,、Listview等），交由上層的業(yè)務(wù)方來使用（THGroupView）,。3. 就如他們在宣傳時(shí)所說,，他們實(shí)現(xiàn)了一套類似css的子集，用來解決樣式問題,，相當(dāng)復(fù)雜和強(qiáng)大,，靠這個(gè)才能將Native的核心組件組成JS層的基本組件再組成業(yè)務(wù)端的業(yè)務(wù)組件，應(yīng)該是采用facebook/css-layout · GitHub的C語言版本實(shí)現(xiàn)的（在ppt中我們看到了類似flex-direction: column一類的代碼,，這個(gè)正是css-layout支持的語法）,。4. 在React Native中，寫JS的工程師解決的是「將基本組件拼裝成可用的React組件」的問題,，寫Native Code的工程師解決的是「提供核心組件,，提供足夠的擴(kuò)展性、靈活性和性能」的問題,。
React Native是什么,？
其實(shí)這東西從Native開發(fā)來說，相當(dāng)于重新發(fā)明了一個(gè)瀏覽器渲染引擎并且套一個(gè)React的殼,，從Web開發(fā)角度來說,，就是把原來React的后端換成了Native code來實(shí)現(xiàn)，就跟Flipboard最近搞的React Canvas 一樣： Flipboard · GitHubreact-canvas
React Native的優(yōu)勢和劣勢：：
優(yōu)勢相對Hybird app或者Webapp：
1. 不用Webview,，徹底擺脫了Webview讓人不爽的交互和性能問題
2. 有較強(qiáng)的擴(kuò)展性,，這是因?yàn)镹ative端提供的是基本控件，JS可以自由組合使用
3. 可以直接使用Native原生的「牛逼」動(dòng)畫（在FB Group這個(gè)app里面,，面板滑出帶一點(diǎn)果凍彈動(dòng),，面板基于某個(gè)點(diǎn)展開這種動(dòng)畫隨處可見，這種動(dòng)畫用Native code來做小菜一碟,，但是用Web來做就難上加難）,。
優(yōu)勢相對于Native app：
1. 可以通過更新遠(yuǎn)端JS，直接更新app，不過這快成為各家大型Native app的標(biāo)配了…
劣勢：
1. 擴(kuò)展性仍然遠(yuǎn)遠(yuǎn)不如web,，也遠(yuǎn)遠(yuǎn)不如直接寫Native code（這個(gè)不用廢話解釋了吧）
2. 從Native到Web,，要做很多概念轉(zhuǎn)換，勢必造成雙方都要妥協(xié),。比如web要用一套CSS的閹割版,，Native通過css-layout拿到最終樣式再轉(zhuǎn)換成native原生的表達(dá)方式（比如iOS的Constraint\origin\Center等屬性），再比如動(dòng)畫,。另外,，若Android和iOS都要做相同的封裝，概念轉(zhuǎn)換就更復(fù)雜了,。
HBuilder部分————————————————————-
phonegap出的早,，自然用的人多。
phonegap自己的定位是混合開發(fā)hybrid,，用原生+js,；
HBuilder的定位是純js搞定一切。
5+ 和 phonegap在能力,、性能、開發(fā)便利性上都優(yōu)于phonegap,。
先看能力：
5+ 有HTML5+和Native.js技術(shù),，HTML5+包含常用的跨平臺的幾百個(gè)API，能滿足常規(guī)開發(fā)需求,，而Native.js把40w原生api映射成js對象,，這樣js可以直接調(diào)原生。HTML5+和Native.js的組合形成了最強(qiáng)大的能力引擎,。 而phonegap需要用原生工程師寫原生插件并給js開發(fā)者封裝接口才能實(shí)現(xiàn)js調(diào)原生能力,，開發(fā)成本、對人的要求都不一樣,。
當(dāng)然5+ 也支持原生插件,，這點(diǎn)和phonegap類似。一個(gè)已經(jīng)寫好的原生sdk,，無需使用Native.js重寫,，也可以通過5+ sdk來集成。詳見文檔中心 – 5+ App – 5+ SDK
5+的直接封裝的跨平臺api比較全,，二維碼,、搖一搖、地圖,、微信分享,、語音輸入、推送這些常用api都是跨平臺的，使用方便簡單,。詳見 http://www./
再看性能：
phonegap做的app,，在低端Android手機(jī)上很難流暢運(yùn)行，否則HTML5早就火了,，原生開發(fā)早就被擠壓了,。Phonegap為了避免HTML5的體驗(yàn)不佳，采用了spa模式,，但這個(gè)模式其實(shí)在低端機(jī)上也玩不轉(zhuǎn),，而且代碼非常復(fù)雜。
5+ App的性能更高,，它的動(dòng)態(tài)效果都是被我們的增強(qiáng)引擎處理的,，通過增強(qiáng)的引擎，可以在低端機(jī)上流暢的運(yùn)行各種動(dòng)態(tài)效果,，比如側(cè)滑菜單,、下拉刷新、長列表滾動(dòng),，見 官網(wǎng)首頁 – App選項(xiàng)卡- 性能視頻
最后看開發(fā)便利性：
phonegap沒有專業(yè)開發(fā)工具,，語法提示、調(diào)試,、打包都很麻煩,。
而在HBuilder里，5+的語法api提示非常完善,；
把手機(jī)通過數(shù)據(jù)線連上電腦,，HBuilder可以真機(jī)運(yùn)行，保存一個(gè)頁面立即在手機(jī)上看到效果,，Android上還可以看console.log,。而用phonegap，你改完一個(gè)頁面,，不得不先打包,，然后安裝在手機(jī)上，然后發(fā)現(xiàn)不對,，然后改下代碼,，然后繼續(xù)打包。,。,。
關(guān)于打包，phonegap由adobe提供了云打包,，但需要先在本機(jī)準(zhǔn)備資源,，然后提交到國外的服務(wù)器，而HBuilder是一鍵打包，更加方便,。當(dāng)然phonegap和HBuilder都支持本地打包,，那樣就需要點(diǎn)原生開發(fā)知識了。
除了工具和runtime,，還有mui框架
phonegap只是一個(gè)手機(jī)runtime,，沒有HBuilder工具，更沒有Mui框架,。
mui是目前最接近原生App的HTML5框架,，它的體驗(yàn)比jqm、bootstrap等框架更接近原生,，它的性能遠(yuǎn)高于jqm,、bootstrap、Ionic,、framework7等框架,。
這種性能差別原因有2，一方面是設(shè)計(jì)思路不同,，mui堅(jiān)持用原生js做,，不依賴jquery或angularjs，因?yàn)榭蚣艿囊蕾囋蕉?，App性能越差,；另一方面是因?yàn)閙ui調(diào)用了5+的底層原生加速，這比不帶原生加速的框架更快,。
mui詳見：http://dcloudio./mui/
當(dāng)然phonegap有一個(gè)優(yōu)勢，就是能支持windows phone,、blackberry,，這方面5+確實(shí)沒有支持。
優(yōu)勢：Dcloud的其他服務(wù)沒具體用過,，HBuilder用過,，還是一個(gè)很不錯(cuò)的編輯器，整體體驗(yàn)還是不錯(cuò),，像代碼提示很智能,，基于Eclipse的二次開發(fā)能做出這樣也挺厲害了。特別是對HTML語法支持瀏覽器兼容性很好,。有個(gè)前端框架寫CSS挺省事的,。
缺點(diǎn)：HBuilder Size太大，而且還得聯(lián)網(wǎng)使用,，整體體驗(yàn)還是Eclipse風(fēng)格,，相比我還是推薦使用Sublime。主要是做出了的應(yīng)用就是網(wǎng)頁的體驗(yàn)，這個(gè)實(shí)在是不適合用來做應(yīng)用,。做個(gè)WebApp還行,。
談?wù)凙PP架構(gòu)選型：React Native還是HBuilder 標(biāo)簽：
|
