谈谈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还行。