我的移动混合开发之旅

在移动开发这片热土上,除了原生之外,也有一些公司在尝试着新技术、新模式,这是混合开发诞生和延续意义以及价值。

原生开发和混合开发的优缺点也已经是一个老生常谈的事儿了,在这里我就简单来说一下:

  原生开发优点:灵活、主流、成熟、解决问题成本等优点;

  混合开发技术:开发效率快,上手难度低,跨平台(一套代码可以运行在ios/android)上;

缺点就不用多说了,他们本身的优点也是牵制对方的缺点。

进入主题

  而我们本文重点要说的是我们在将近3年的实践当中,对与混合开发的一些思考与总结,希望可以帮助一些公司在混合开发技术框架选型上少走一些弯路,当然本文所述的所有信息都是我对于这些技术一些自己的理解,对你只是有参考作用,不能完全替代和帮助框架师对于技术的选型,俗话说的好:“明白了很多道理,依然过不好这一生.”,有些坑还是要自己踩的,不然也不会懂得什么叫“刻骨铭心”!

框架进阶之路

  我们这三年的时间,做的是一款综合类app,里面主要的功能有:新闻、工具(十余款)、聊天、朋友圈,功能可以说比较多。

  而我们使用的混合开发框架有:

  • DCloud
  • DeviceOne
  • Xamarin
  • React Native

下来我们说这四款框架的优缺点;

1、DCloud

  DCloud作为我们最早(2015年)使用的WebApp框架,可以说让我们用的非常的不舒服,DCloud是我们精心选择的第一款混合开发框架,对比了同类的webapp框架还算优秀,有自己的开发工具HBuilder,有很好的模板和Demo让我们能很快的上手写代码,配合官方MUI(DCloud的UI解决方案),咋一看用起来还可以,然而在我们的实践中还暴露了很多问题,下面我来列举一下:

  优点:

  • 门槛比较低(懂Js和Html的程序员对照着api很快能够上手);
  • 有一整套的解决方案,开发工具+UI库;

  缺点:

  • 使用的是传统H5技术,在性能上尤其是低端android机上有瓶颈,高端机操作上也有明显的延迟;
  • 打包是在线打包,服务器经常挂,至少2015年是这样,结果你着急上东西,却迟迟打不出来app,有一定的制约和风险性;
  • 文档不是很全,有些东西不太好找;
  • 页面生命周期执行函数存在概率事件,这个事情当时纠结了很久,官方的回复也是有一定的几率执行或者不执行,2015年是这样,现在的情况不明;

  总体来说:DCloud看起来入门很容易,但是想要写好需要很好的js功底,普通水平的js写出来的app用户体验非常有局限性,基于上面的问题,我们决定换掉它。

2、DeviceOne

  DeviceOne(下文简称do)是我们国内北京的一个公司做的,他也有自己的开发工具,是基于eclipse改的,编译器可以说很不好用,不时的需要重新启动一下,而do和DCloud的最大区别是,do不是webapp,所以在性能上do是远远胜于DCloud的,do在UI上采用的是“组件商店”的概念,在说这个概念之前先要说说do的基本原理,do开发使用的是js语言,是标准的js函数,而js方法调用的组件,全部是用原生封装好的,所以你使用的每个组件:第一、可以在开发工具上拖拉拽;第二、官方开发了他们开发组件的接口每个人都可以给他们写组件,下来具体说说他们的优缺点:

  优点:

  • 开发效率极高,组件拖拉拽就可以;
  • 开发门槛低,会js即可;
  • 执行效率高;

  缺点:

  • 开发质量、开发的功能,受组件的制约,组件有bug你写出来的app就有bug,组件没有的功能,你app也实现不了;
  • deviceone的打包次数和下载次数有限制,超出的需要收取费用;
  • 使用的是在线打包,服务器偶尔也会挂;  
  • 有些组件有问题,找官方处理,他们会让你写错误示例的demo,刚开始写一个两个还好,最后给do写错误demo成了工作的一部分了,影响工作效率;
  • 使用的人不多,网上的资料/替代方案相对匮乏;

总体来说:do性能和模式都是ok的,只是开发app受外界因素影响比较多,资料比较少,替代方案几乎没有。

3、Xamarin

  经历了两次框架更换之后,我们把希望寄托给了微软的Xamarin,用它的一个好处是可以使用C#开发,对于C#出身的程序员来说,简直是梦寐以求的事情,在一个好处就是他有一个“好粑粑”,以之前我们对于C#的信任,让我们对于Xamarin的技术,也不自觉的产生了好感,以至于我们错误了低估了他能带给我们的“麻烦”。

  优点:

  • 可以使用C#语言开发;
  • 本地打包,不在受其他平台服务器的制约;
  • 调试方便,vs开发工具打断点容易;

  缺点:

  • 国内资料少,资料都是国外的;
  • 应用群体少,成熟解决方案少,很多第三方组件不支持,我们在绑定三方的组件比如:极光推送、相册选择、友盟统计、百度地图等ios绑定上耗费了大量的时间和经历;
  • 开发成本高,C#程序员也来越少也越来越难招;
  • ios意外的闪退比较多,而且原因不好找;

总体来说:开发成本相对于之前两款框架来说,耗费的成本要高很多,Xamarin本身的功能也有限,使用的人数少,导致资料和解决方案少,开发成本和解决问题的成本很高,有很多组件没有很好的封装,集成起来也相对麻烦很多。

4、React Native

  我们目前正在使用的框架,Facebook和JD的开发框架,在混合开发技术领域属于正统的,主流的框架,网上的资料多,基于React技术JSX技术相对成熟,开发成本低会js稍加学习一下JSX的语法即可,基于npm生态系统,所有nodejs可以使用的三方包,都可以使用,可以使用es5/es6/es7的语法开发app,非常舒服,第三方组件和绑定原生库都非常的简单方便,网上的资料也非常多。

  优点:

  • 开发门槛低(会js稍加学习jsx语法即可);
  • 资料多,解决问题成本低;
  • 开发效率高,第三方集成组件多;
  • 有好的开发生态圈,性能好,背靠npm有万级以上的优秀开源三方组件支持;

  缺点:

  • 初学者,配置较多,开发环境配置不是很方便;
  • Facebook的更新频率比较快,版本存在一定的差异,有些老的资料可能并不适用于现在的版本;

总体来说:React Native对于混合开发来说应该是一个不错的选择。

总结

所有的经历,到最后都会变为经验,拥抱变化,不断的尝试和学习新的技能,会让你收益匪浅,墨守成规已经不在适应这个物竞天择的世界。成长的道路上会遇到很多坎坷和挫折,但不管这些试错成本有多大,他最后产生的价值,要远远大于固步自封与墨守成规带来的后果。

欢迎加入qq群:313999351 一起交流~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云瓣

深入React组件生命周期

上篇博文使用React开发的一些注意要点对React开发的一些重点进行了简单的罗列总结,虽然也提到了React生命周期,但只略微小结,在此单独写篇React生命...

40770
来自专栏牛客网

前端面试:链家 -3月24日

一面 1. React组件通信 2. 什么是原型 3. CSS定位属性,怎么定位的 4. TCP与HTTPS的区别 5. 怎么获得对象上的属性(面试官期待的是O...

469110
来自专栏谦谦君子修罗刀

RN项目第一节

一、项目说明 本项目为模仿美团的项目,采用的是网上提供的API接口。导航采用 公司推荐的react-navigation,滚动条采用第三方组件react-na...

37160
来自专栏谦谦君子修罗刀

React Native备课笔记Day01一、React Native介绍二、特点分析三、推荐网站以及运行第一个react native项目四、环境搭建五、React Native文件结构六、View

(本节包括React Native介绍、特点分析、环境搭建、RN文件结构、View组件讲解、FlexBox布局及props与state) 一、React Nat...

376110
来自专栏谦谦君子修罗刀

RN手势

React Native框架底层的手势响应系统提供了响应处理器,PanResponder API将这些手势响应处理器再次进行封装,便于开发者对手势进行处理。 ...

381120
来自专栏谦谦君子修罗刀

react-native-swiper组件-横扫你的轮播图

一念起,万水千山。一念灭,沧海桑田。 许久不曾召幸React Native爱妃,未曾想一见竟让寡人目瞪口呆。啥~~~你就说你买包包的速度能跟上你版本迭代更新的...

88360
来自专栏云瓣

webpack配置React开发环境(上)

Webpack 是一个前端资源加载/打包工具,我们部门的一条主要技术栈就是Webpack+React+ES6+node,虽然之前自己做个人项目也接触好多次Web...

532130
来自专栏谦谦君子修罗刀

React-native-scrollable-tab-view详解

前言:他方山上有佳石,可以用来琢玉器。只有解决了一个红屏,才有机会遇见另一个红屏。只有解决了一个困难,才有机会遇到其他的困难。O(∩_∩)O~生命不息,奋斗不止...

1.6K100
来自专栏云瓣

通过一个demo了解Redux

TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象;使用数据流能帮我们明确了行为对应的响应,这和react的状态可预...

358100
来自专栏点滴积累

JS前端三维地球渲染——中国各城市航空路线展示

前言 我还从来没有写过有关纯JS的文章(上次的矢量瓦片展示除外,相对较简单。),自己也学习过JS、CSS等前端知识,了解JQuery、React等框架,但是自己...

1K60

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励