谈谈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产品是否适合用这种技术来做。

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

诸葛磊谈如何避免APP技术外包被坑【原创】

前段时间,我在oschina上发布了【网站或APP服务端开发技术咨询】的服务,结果不少人加我聊,这里面有东莞企业小老板,也有北京的创业者,有做光电行业且准备自主创业的老乡,也有还在大学里面迷茫的大学生等等,总之找我聊的还确实挺多,这里面也有主动付款的,有的是直接微信转有的是通过平台(在这里还是建议通过这个平台购买),很感谢这些信任我的朋友。下面我总结下这些朋友在咨询过程中的普遍痛点和经历:

1、准备做APP,一上来就问做APP多少钱的主

做个APP多少钱?做个微信公号多少钱?做个商城系统多少钱?等等这些朋友我遇到了好几个,这些人群属于对价格比较敏感的,手里的资金有限,所以想用最低的价格买到最好的软件外包服务。这帮人有一个特点,一旦我给他们的报价高于他们的预期,他们一般会沉默,或者草草结尾。其实这些人太过于成本导向了,而且给我的需求往往不太明确,要知道需求不明确,报价越模糊。如果一味的压低报价,其实对于接单者而言,也是对其工作价值的不尊重和不认可,最后出来的产品体验可想而知,随便弄几下来交差的可能性更大。这种情况往往是发发包方对于软件研发这块的估计过低,以为做这个很简单,网上一大堆模板和一大堆免费,殊不知这些东东基本来讲大多是然并卵的东西,真正有价值的产品,不可能是那种随随便便就能被复制或小改一下就成的产品。

一上来就问做APP多少钱的主

2、做APP途中,被牵制被要挟被“绑架”的

这个我今年遇到了2起案例,一个是我老家的一个朋友,一个是东莞的一个小企业家。过程基本都是这样,找小外包公司做APP,分阶段付款,然后中途加价。我宜昌的那个朋友就因为被要挟不按时付款,就不上线甚至被逼去卖车库凑钱付款,真是醉了,说白了这哥们被外包公司绑架了。还有广东的小企业主,先后找了2个外包方,“第一个从合同价给了部分,后面越做越感觉他不行,所以中途停了,没继续合作,我亏了时间耗了5个月”,“第二个给了一万多首期,但他收钱后爱理不理,只是拿点普通的前段给我看后又说付第二期的钱,但关键点的功能他自己也说难,不一定能做,所以我又一次为难。”,看看,多么痛的领悟,这个朋友投了7W,关键是最后也没拿到产品。这些朋友也是那种典型的没有接触过软件外包的,被软件技术人员牵着鼻子走的。

做APP被中途绑架

3、APP已经做完,但其实被坑的很惨准备重做的

这里面印象比较深刻的是一个北京的创业者,他做的是摩托车骑行领域,这哥们投了将近13W,做了一个网站单页+安卓APP+简易后台(.NET),我给看了下,确实坑的有点惨,因为那个安卓功能比较简单(3个TAB)而且还有不少用的是没有进过移动优化的网页,说白了外面一个壳子里面一个HTML。最后总结分析了下为什么会被吭,第一,他对软件外包不熟悉,以为随便花十几万雇个外包就能做好,结果做出来的结果是奇烂无比;第二,技术选型和技术决策上,他自己更不懂了,结果别人实际上用做网页的价在卖给他做APP价格的产品,体验能不差么,用户才几百。因为我本人也是创业者,所以挺替这位创业者感到惋惜,毕竟他是自己掏钱做的这个产品。要是这位哥们能早一点咨询我,在技术上有人提他把关,结局不可能变的这么惨。

做APP被坑了准备重做

做APP被坑准备重做

其实,我手头的案例还很多,但是今天就先写这3种最普遍的情况。我举的这些例子都是真实的例子,截图就是我与其中几位的聊天记录。我自己也总结了下,为什么这些人会容易出现这些问题,其实主要还是一个信息不对称的原因,说白了对软件开发外包这趟水不知深浅就随便往里面砸钱。

那么,最后咱还是来点干货吧,如何避免APP技术外包被坑的悲催命运了?方法如下:

1、找懂技术的朋友帮忙把关下技术和价格。如果你们俩的关系够好,那么请朋友帮忙做也是可行的,至少彼此都是互相了解的,但是请记得给朋友付费,因为做软件这行的,时间是最大的成本,你朋友做这个也是需要花费他自己的业余时间来做,请尊重他的价值劳动

2、找懂技术的同事来接活。这个算是一个性价比较高的办法,我之前给同事做过一单,虽然最后得到了他们部门领导的大力嘉奖,其实我自己算了下,那一单我实际上做亏本了,因为付出了大量的时间,呵呵,但是碍于都是同事,就算了。

3、通过社交工具寻找技术大牛来把控技术和价格。社交工具有很多渠道,比如:QQ群里面的技术大拿,还有脉脉上的大咖也可以直接勾搭,还有oschina这种技术社区里面的大拿也是比较多的,可以直接私信联系。当然,如果别人为您解答的时间比较长,给你解答的比较有耐心的话,我建议还是主动提出付费给对方。我曾经就遇到过着主动给我付费的企业老板,其实老板更关心的是我的业务能正常的跑起来,技术上不要掉链子,所以这位老板对技术付费的意识还是挺强。当然我本人也是这样坚信的:只要能给对方解决问题,帮对方省心,就是在为对方创造价值!