谈谈APP架构选型：React Native还是HBuilder

原文链接

导读：最近公司的一款新产品APP要进行研发，老大的意思想用H5来做混合APP以达到高效敏捷开发的目的。我自然就开始进行各种技术选型的调研，这里重点想说的是我最后挑选出的2款hybrid app开发技术方案：RN(react native)，HBuilder。React Native是大名鼎鼎的Facebook的开源技术框架，而HBuilder是国内的H5工具开发公 司DCLOUD的产品。我自己先总结下吧：这两个技术框架在开发效率上基本上可以媲美WEB开发的速度，RN强调的是“Learn once, write anywhere”，RN不强求一份原生代码支持多个平台；而HBuilder则可以实现类似JAVA的“Write once, run anywhere”，也就是说写一份代码，即可同时发布多平台，这个效率比原生开发而言自然会double。两者的原理其实都是基于JS在做前端开发，用JS去做桥接调用原生的API，最大的优点是方便做APP的动态更新而不用频繁去发布版本，当然hybrid的这种框架也有弱势缺点，就是目前原生APP的开发生态已经趋向成熟，一些第三方库和框架不仅丰富而且稳定，所以如果改用基于JS的Hybrid app方案来做，一定要考虑APP产品是否适合用这种技术来做。

下面我把一些网友对这两个框架的看法列举如下供参考：

RN -React Native部分—————————————————

React Native的核心实现：先简单说几点，详细的等回头更新。1. React Native里面没有webview，这货不是Hybrid app，里面执行JS是用的

JavascriptCore。2. 再说React Native的核心，iOS Native code提供了十来个最基本核心的类（RCTDeviceEventEmitter、RCTRenderingPerf等）、或组件（RCTView、RCTTextField、RCTTextView、RCTModalFullscreenView等），然后由React Native的JS部分，组成二十来个基本组件（Popover、Listview等），交由上层的业务方来使用（THGroupView）。3. 就如他们在宣传时所说，他们实现了一套类似css的子集，用来解决样式问题，相当复杂和强大，靠这个才能将Native的核心组件组成JS层的基本组件再组成业务端的业务组件，应该是采用facebook/css-layout · GitHub的C语言版本实现的（在ppt中我们看到了类似flex-direction: column一类的代码，这个正是css-layout支持的语法）。4. 在React Native中，写JS的工程师解决的是「将基本组件拼装成可用的React组件」的问题，写Native Code的工程师解决的是「提供核心组件，提供足够的扩展性、灵活性和性能」的问题。

React Native是什么？

其实这东西从Native开发来说，相当于重新发明了一个浏览器渲染引擎并且套一个React的壳，从Web开发角度来说，就是把原来React的后端换成了Native code来实现，就跟Flipboard最近搞的React Canvas 一样： Flipboard · GitHubreact-canvas
React Native的优势和劣势：：

优势相对Hybird app或者Webapp：
1. 不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题
2. 有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用
3. 可以直接使用Native原生的「牛逼」动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。

优势相对于Native app：
1. 可以通过更新远端JS，直接更新app，不过这快成为各家大型Native app的标配了…

劣势：
1. 扩展性仍然远远不如web，也远远不如直接写Native code（这个不用废话解释了吧）
2. 从Native到Web，要做很多概念转换，势必造成双方都要妥协。比如web要用一套CSS的阉割版，Native通过css-layout拿到最终样式再转换成native原生的表达方式（比如iOS的Constraint\origin\Center等属性），再比如动画。另外，若Android和iOS都要做相同的封装，概念转换就更复杂了。

HBuilder部分————————————————————-

phonegap出的早，自然用的人多。
phonegap自己的定位是混合开发hybrid，用原生+js；
HBuilder的定位是纯js搞定一切。
5+ 和 phonegap在能力、性能、开发便利性上都优于phonegap。

先看能力：
5+ 有HTML5+和Native.js技术，HTML5+包含常用的跨平台的几百个API，能满足常规开发需求，而Native.js把40w原生api映射成js对象，这样js可以直接调原生。HTML5+和Native.js的组合形成了最强大的能力引擎。 而phonegap需要用原生工程师写原生插件并给js开发者封装接口才能实现js调原生能力，开发成本、对人的要求都不一样。

当然5+ 也支持原生插件，这点和phonegap类似。一个已经写好的原生sdk，无需使用Native.js重写，也可以通过5+ sdk来集成。详见文档中心 – 5+ App – 5+ SDK

5+的直接封装的跨平台api比较全，二维码、摇一摇、地图、微信分享、语音输入、推送这些常用api都是跨平台的，使用方便简单。详见 http://www.html5plus.org/

再看性能：

phonegap做的app，在低端Android手机上很难流畅运行，否则HTML5早就火了，原生开发早就被挤压了。Phonegap为了避免HTML5的体验不佳，采用了spa模式，但这个模式其实在低端机上也玩不转，而且代码非常复杂。
5+ App的性能更高，它的动态效果都是被我们的增强引擎处理的，通过增强的引擎，可以在低端机上流畅的运行各种动态效果，比如侧滑菜单、下拉刷新、长列表滚动，见 官网首页 – App选项卡- 性能视频

最后看开发便利性：

phonegap没有专业开发工具，语法提示、调试、打包都很麻烦。
而在HBuilder里，5+的语法api提示非常完善；
把手机通过数据线连上电脑，HBuilder可以真机运行，保存一个页面立即在手机上看到效果，Android上还可以看console.log。而用phonegap，你改完一个页面，不得不先打包，然后安装在手机上，然后发现不对，然后改下代码，然后继续打包。。。
关于打包，phonegap由adobe提供了云打包，但需要先在本机准备资源，然后提交到国外的服务器，而HBuilder是一键打包，更加方便。当然phonegap和HBuilder都支持本地打包，那样就需要点原生开发知识了。

除了工具和runtime，还有mui框架

phonegap只是一个手机runtime，没有HBuilder工具，更没有Mui框架。
mui是目前最接近原生App的HTML5框架，它的体验比jqm、bootstrap等框架更接近原生，它的性能远高于jqm、bootstrap、Ionic、framework7等框架。
这种性能差别原因有2，一方面是设计思路不同，mui坚持用原生js做，不依赖jquery或angularjs，因为框架的依赖越多，App性能越差；另一方面是因为mui调用了5+的底层原生加速，这比不带原生加速的框架更快。
mui详见：http://dcloudio.github.io/mui/

当然phonegap有一个优势，就是能支持windows phone、blackberry，这方面5+确实没有支持。

优势：Dcloud的其他服务没具体用过，HBuilder用过，还是一个很不错的编辑器，整体体验还是不错，像代码提示很智能，基于Eclipse的二次开发能做出这样也挺厉害了。特别是对HTML语法支持浏览器兼容性很好。有个前端框架写CSS挺省事的。
缺点：HBuilder Size太大，而且还得联网使用，整体体验还是Eclipse风格，相比我还是推荐使用Sublime。主要是做出了的应用就是网页的体验，这个实在是不适合用来做应用。做个WebApp还行。