標(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é)下吧：這兩個技術(shù)框架在開發(fā)效率上基本上可以媲美WEB開發(fā)的速度，RN強(qiáng)調(diào)的是“Learn once, write anywhere”，RN不強(qiáng)求一份原生代碼支持多個平臺；而HBuilder則可以實(shí)現(xiàn)類似JAVA的“Write once, run anywhere”，也就是說寫一份代碼，即可同時發(fā)布多平臺，這個效率比原生開發(fā)而言自然會double。兩者的原理其實(shí)都是基于JS在做前端開發(fā)，用JS去做橋接調(diào)用原生的API，最大的優(yōu)點(diǎn)是方便做APP的動態(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)友對這兩個框架的看法列舉如下供參考：
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提供了十來個最基本核心的類（RCTDeviceEventEmitter、RCTRenderingPerf等）、或組件（RCTView、RCTTextField、RCTTextView、RCTModalFullscreenView等），然后由React Native的JS部分，組成二十來個基本組件（Popover、Listview等），交由上層的業(yè)務(wù)方來使用（THGroupView）。3. 就如他們在宣傳時所說，他們實(shí)現(xiàn)了一套類似css的子集，用來解決樣式問題，相當(dāng)復(fù)雜和強(qiáng)大，靠這個才能將Native的核心組件組成JS層的基本組件再組成業(yè)務(wù)端的業(yè)務(wù)組件，應(yīng)該是采用facebook/css-layout · GitHub的C語言版本實(shí)現(xiàn)的（在ppt中我們看到了類似flex-direction: column一類的代碼，這個正是css-layout支持的語法）。4. 在React Native中，寫JS的工程師解決的是「將基本組件拼裝成可用的React組件」的問題，寫Native Code的工程師解決的是「提供核心組件，提供足夠的擴(kuò)展性、靈活性和性能」的問題。
React Native是什么？
其實(shí)這東西從Native開發(fā)來說，相當(dāng)于重新發(fā)明了一個瀏覽器渲染引擎并且套一個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原生的「牛逼」動畫（在FB Group這個app里面，面板滑出帶一點(diǎn)果凍彈動，面板基于某個點(diǎn)展開這種動畫隨處可見，這種動畫用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（這個不用廢話解釋了吧）
2. 從Native到Web，要做很多概念轉(zhuǎn)換，勢必造成雙方都要妥協(xié)。比如web要用一套CSS的閹割版，Native通過css-layout拿到最終樣式再轉(zhuǎn)換成native原生的表達(dá)方式（比如iOS的Constraint\origin\Center等屬性），再比如動畫。另外，若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+包含常用的跨平臺的幾百個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類似。一個已經(jīng)寫好的原生sdk，無需使用Native.js重寫，也可以通過5+ sdk來集成。詳見文檔中心 – 5+ App – 5+ SDK
5+的直接封裝的跨平臺api比較全，二維碼、搖一搖、地圖、微信分享、語音輸入、推送這些常用api都是跨平臺的，使用方便簡單。詳見 http://www.html5plus.org/
再看性能：
phonegap做的app，在低端Android手機(jī)上很難流暢運(yùn)行，否則HTML5早就火了，原生開發(fā)早就被擠壓了。Phonegap為了避免HTML5的體驗(yàn)不佳，采用了spa模式，但這個模式其實(shí)在低端機(jī)上也玩不轉(zhuǎn)，而且代碼非常復(fù)雜。
5+ App的性能更高，它的動態(tài)效果都是被我們的增強(qiáng)引擎處理的，通過增強(qiáng)的引擎，可以在低端機(jī)上流暢的運(yùn)行各種動態(tài)效果，比如側(cè)滑菜單、下拉刷新、長列表滾動，見 官網(wǎng)首頁 – App選項(xiàng)卡- 性能視頻最后看開發(fā)便利性：
phonegap沒有專業(yè)開發(fā)工具，語法提示、調(diào)試、打包都很麻煩。
而在HBuilder里，5+的語法api提示非常完善；
把手機(jī)通過數(shù)據(jù)線連上電腦，HBuilder可以真機(jī)運(yùn)行，保存一個頁面立即在手機(jī)上看到效果，Android上還可以看console.log。而用phonegap，你改完一個頁面，不得不先打包，然后安裝在手機(jī)上，然后發(fā)現(xiàn)不對，然后改下代碼，然后繼續(xù)打包。。。
關(guān)于打包，phonegap由adobe提供了云打包，但需要先在本機(jī)準(zhǔn)備資源，然后提交到國外的服務(wù)器，而HBuilder是一鍵打包，更加方便。當(dāng)然phonegap和HBuilder都支持本地打包，那樣就需要點(diǎn)原生開發(fā)知識了。除了工具和runtime，還有mui框架
phonegap只是一個手機(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.github.io/mui/當(dāng)然phonegap有一個優(yōu)勢，就是能支持windows phone、blackberry，這方面5+確實(shí)沒有支持。
優(yōu)勢：Dcloud的其他服務(wù)沒具體用過，HBuilder用過，還是一個很不錯的編輯器，整體體驗(yàn)還是不錯，像代碼提示很智能，基于Eclipse的二次開發(fā)能做出這樣也挺厲害了。特別是對HTML語法支持瀏覽器兼容性很好。有個前端框架寫CSS挺省事的。
缺點(diǎn)：HBuilder Size太大，而且還得聯(lián)網(wǎng)使用，整體體驗(yàn)還是Eclipse風(fēng)格，相比我還是推薦使用Sublime。主要是做出了的應(yīng)用就是網(wǎng)頁的體驗(yàn)，這個實(shí)在是不適合用來做應(yīng)用。做個WebApp還行。
談?wù)凙PP架構(gòu)選型：React Native還是HBuilder
標(biāo)簽：
聯(lián)系客服
