你的位置:首页 > Java教程

[Java教程]谈谈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还行。