ionic ,react-native , native 移动端开发对比

移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比。欢迎大家补充指正!

一、 跨平台特性

ionic: write once, run anywhere ( 一次开发,随处运行)

不涉及到系统级的开发的话, 确实是一次开发 处处运行,如果涉及到系统级API调用以及项目配置(如 ios plist文件)则需要自己手动编写cordova插件的方式达到效果(如:注册文件的打开方式),当然,网上也有可能找到可以安装的现成插件。

react-native:Learn once, write anywhere ( 一次学习,随处开发)

不涉及到与native混编的话, 统一js 进行开发 使用jsx 语法 确实能做到各端开发,但是需要针对iOS 和 android 开发两套代码。

native:?!

各玩各的,无法跨平台。

二、开发方式

ionic:html + angularjs + css

使用 html + angularjs 与网页开发类似,系统级的调用由cordova插件解决,封装得相当好,简单易用,特殊情况的自己动手编写插件比较难,�一般没有需要手动编写代码插件的情况,�网上有比较多的插件可供下载安装,可用flexbox布局。

react-native:js + css

普通UI全程js开发,部分情况下需要使用与native混合的方式,没有统一的UI组件,ios组件较多,android组件较少,各自编写js文件的情况较多,简单空间和逻辑层可共用,基本上iOS和android是两套代码,可用flexbox布局。

native:java + oc|swift

iOS android 不同语言开发 以及适配。

三、功能支持

ionic:编写cordova插件,则能达到全部支持

UI交互 由Web实现,系统级的交互 由 cordova实现,目前 文件上传下载,url跳转以及文件打开方式 均已做验证可实现,cordova对系统级调用的支持比较好,涵盖了大部分系统功能,如摄像头,设备信息,电池,网络等,不排除潜在不支持的问题。

react-native:与native 混编 可达到全部支持

android高级组件可能需要自己实现,系统级的功能可通过安装第三方插件或者与native混编的方式实现 ,基本上功能能完全实现

native:全部支持

完全能实现

四、性能对比

ionic:虽然性能一直是html5在移动端的最大问题,但是ionic已经做得非常出色了,在ios上基本上无法区分是否是原生app

不添加crosswalk插件 体验较差,添加 crosswalk 插件以后 体验较好,但是app打包偏大。程序运行内存占用较大(网络数据对比同款产品,内存占用100+M)

react-native:接近原生性能

js 到 native 需要经过两层桥接,性能与原生差别不大(网络数据对比同款产品,内存占用50 M)

native:开发者水平很重要

性能最好 (网络数据对比同款产品,内存占用30 +M)

五、优劣对比

ionic

优势:

ios 和 android 基本上可以共用代码,纯web思维,开发速度快,简单方便,一次编码,到处运行,如果熟悉web开发,则开发难度较低。

文档很全,系统级支持封装较好,所有UI组件都是有html模拟,可以统一使用。

可实现在线更新 允许加载动态加载web js

劣势:

性能相对较差,内存占用高,手写插件难度较大。

web技术无法解决一切问题,对于比较耗性能的地方无法利用native的思维实现优势互补,如高体验的交互,动画等。

react-native

优势:

1、虽然不能做到一处编码到处运行,但是基本上即使是两套代码,也是相同的jsx语法,使用js进行开发。用户体验,高于html,开发效率较高 2、flexbox 布局 据说比native的自适应布局更加简单高效

可实现在线更新 2015.7.28 AppStore审核政策调整:允许运行于JavascriptCore的动态加载代码

更贴近原生开发

劣势:

1、(引)对开发人员要求较高,不是懂点web技术就行的,当官方封装的控件、api无法满足需求时 就必然需要懂一些native的东西去扩展,扩展性仍然远远不如web,也远远不如直接写Native code。 2、(引)官方说得很隐晦:learn once, write anywhere。人家可没说run anywhere。事实上,从官方的api来看SliderIOS,SwitchIOS..等等这些控件,之后势必会出现SliderAndroid,SwitchAndroid...,也就是很可能针对不同的平台会需要写多套代码。 3、发展还不成熟,目前很多ui组件只有ios的实现,android的需要自己实现。

(引)从Native到Web,要做很多概念转换,势必造成双方都要妥协。比如web要用一套CSS的阉割版,Native通过css-layout拿到最终样式再转换成native原生的表达方式(比如iOS的Constraint\origin\Center等属性),再比如动画。另外,若Android和iOS都要做相同的封装,概念转换就更复杂 5、文档还不够完整 学习曲线偏高

native

优势:

最好的体验以及功能实现。

完善成熟的开发文档以及demo。

劣势:

android开发学习曲线较高。

各个平台分开开发 很难有iOS,android双平台高手。

六、吐槽

ionic:

性能上比预期的要好,

app包比较大,毕竟crosswalk 不是白加的。

环境搭建比较坑 项目新建以及安装android平台,build插件 都依赖网络下载,网络不好要等哭

requirejs模块化,angularjs 学习曲线较高

ionic组件很好用 侧滑菜单,tabs组件现成的。

api调用轻松加愉快。

自己写插件要功底。

很期待ionic + anglarjs 2.0 专门针对移动端的正式上线,不过angular2.0的新语法得弄哭一大波人

其实,ionic 还能做web应用,以后网站也可以自己做!

在线更新app 想不爱你都难。

livereload 模式,相当好用

react-native:

环境搭建被坑了两天,

可直接使用node_modules,很爽

官方demo jsx语法很茫然 html js css 全都在一个文件里面。

文件上传下载 网上有插件,但是下载下来一看,功能不完整,没有展示进度信息,怎么办?自己写与原生混编。

依赖facebook的框架,控件接口没有原生的丰富,只提供了一些基本接口,估计还在不停的更新完善。

扩展性不好,需要和原生混编 iOS,android都懂的话那我还不如直接分开开发了,还不用依赖facebook的框架,网上还有一大批开源好用的第三方库在等着我们。

react-native自带的调试插件把我惊呆了,很不错,很专业

同样的livereload ,在线更新没研究,应该也支持吧。

非web 非native 夹在中间很难受 !

学习还是要成本的!

native:

布局适配也是体力活

同时精通android 和 iOS �的是 【真·大牛】!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容