【开发指南】(三)认识ionic3

如果你要做一个app应用,你有最少三种方式:原生开发、加壳在线WebApp开发与混合式开发。

三者简单说明如下:

原生开发就是用原生支持的开发语言,调用原生SDK开发;

加壳在线WebApp是在一个WebView容器执行,网页部署在服务器,基本不调用原生功能;

而混合式开发,如果有了解过一些的话,那一定应该听说过PhoneGap/Cordova和React Native,两项技术都可以让开发人员使用Web技术开发出媲美原生App的移动应用,但是两者使用了不同的技术特征。

混合式开发,即Hybird,至今可以说发展到第三代了,第一代和上述WebApp差不多,基于WebView + Cordova技术,不同的是网页放在了本地,通过获取网络接口数据实现展示,使用js调用原生功能;第二代以React Native为代表,业务及虚拟页面通过js实现,然后通过js桥接,使用原生界面渲染,也就是说,它比第一代增强了页面显示的功能,等到第三代了,通过编译时把js桥接部分也省掉,直接生成原生可执行的代码,把性能又提高了一个档次。

三者对比,原生开发性能高,但相应兼顾多个平台的开发成本、维护成本也高;加壳在线WebApp反之,开发方便但性能和功能有很大局限性;而混合式应用介于中间,兼具优缺点。而平常所听到的跨平台开发,一般指的是混合式开发。


此文中的主角Ionic,就是Hybird技术中的第一代代表,有人会问,既然都发展到第三代了,还有必要学习吗?个人认为有的,首先在长期发展中它已经很成熟,基本有的坑别人都踩过了,其次,它对开发人员技术没有那么苛刻,就算没有具备原生开发的能力,也能很容易实现多端并行开发,再者,PWA是下一代前端技术趋势之一。

说了一堆,也许有人会问:“那Ionic其实是啥?“,简单来说,Ionic是一套大而全的UI框架!Hybird应用Cordova技术,它只提供了使用JavaScript调用Native功能,在开发的时候还需要开发人员自己去实现诸如样式美化、页面切换、数据展示、弹出框、Modal窗体、日期选择器等功能或组件,为了提高开发效率,出现了各种前端框架,如国外的Ionic、JQuery Mobile UI、Sencha Touch、Framework 7,国内的WUI、AmazeUI、腾讯、淘宝团队的ui等。其中,Ionic目前是Cordova开发技术阵营中最热门的技术之一,它对Angular进行了封装,提供了一套适配各移动平台UI风格的前端组件,可以让开发人员免去调试大量CSS的工作,专注业务逻辑开发即可。而路由、网络模块、指令、管道、服务等属于angular的技术范畴。

Ionic1基于Angular1开发。由于AngularJS 1.x版本在性能上已经很难有较大提升,后来微软和google联合推出了全新设计的基于TypeScript的Angular2,这是对于原始版本完全的重写。一些语法和架构都有了变化,在此基础上Ionic2也同步发展。等到angular2的更新到了一定版本,一些依赖库分属于2和3,为了便于版本的统一管理,直接跳到了angular4,其实angualr2和4两者的变化不算太多。相应的ionic2也同步升级到3。

或许有人会说,ionic2才接触没多久,结果又升到ionic3了,会不会太快不适应?其实ionic3基本向下兼容ionic2,除去性能等问题,两个版本变更编码直观感受深点的,就是懒加载和路由的调整(新版懒加载变得更加简单,利于web版开发和加快页面首屏加载),另外还有内置指令的更灵活化,其它变化不大,具体更新如下:

Angular 4.0 新的版本下,改进 AOT 编译器,分离 animations 包,缩小生成后的代码量,运行更快,改进ngIf 和ngFor 等具体内容可以访问angular4更新来查看。 typescript 新版的支持 这一次的更新将提升typescript应用构建和类型检查的速度并且引入了对mix-in的支持等。 @IonicPage装饰器 ionic2中导航器不是基于url的,如果想使用url访问就要通过DeepLinker来实现,这是比较麻烦的,而在新版本中可以通过@IonicPage装饰器来实现。并且可以更轻松的在项目中设置延迟加载,设置延迟加载页面的优先级,并为每个页面自定义配置。 懒加载 Ionic3.0版本开始,支持了延迟加载,我们可以将某些模块设置为延时加载,只有用户打开相关的页面的时候,这个模块所在的js才会被下载,这样能减少用户初次下载的文件的大小。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的知识天地

Web 开发人员的文档生成工具【推荐】

工欲善其事必先利其器,在此给 Web 开发人员推荐几款优秀的开源文档生成工具,希望能对大家有所帮助。

2452
来自专栏Samego开发资源

那个程序员的Linux常用软件清单

8565
来自专栏令仔很忙

Hybrid app(二)----开发主要应用技术

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量...

3011
来自专栏北京马哥教育

22款神奇的Ubuntu软件,帮你的系统成为全场最佳

? 作者:PentonBin 来源: https://www.zhihu.com/question/19811112/answer/132006027 先讲一...

3665
来自专栏phodal

听我说说我的博客: 月访问量过万的个人IT博客的技术史

我的博客是如何工作的? HTTP服务器 当你开发在网页上访问我的博客的时候,你可能会注意到上面的协议是HTTPS。 ? 但是并不会察觉到它是HTTP2.0。而这...

22810
来自专栏移动开发之家

移动端跨平台开发的深度解析

跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,...

892
来自专栏轮子工厂

有哪些实用且堪称神器的Chrome插件?吐血推荐!!!

相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面, Chrome 最大的优势还是其支持众多强大好用的扩展程序(E...

2.4K4
来自专栏吉浦迅科技

NVIDIA Jetson开发压箱底的秘密都在这里,很多人还不知道(一)

经常有人在群里问我各种“小”问题: Jetson TX2 显存是多大? Jetson TX2 开发板的尺寸是多大?给我个孔位图纸 Jetson TX2 支持最...

7218
来自专栏一个番茄说

iOS 开发安全那些事儿

​ 随着移动互联网的普及,被越来越多的心怀不轨的人觊觎,也越来越多的安全问题暴露了出来。开发者开发出来的应用被安装在设备上之后,用户并不具有专业的安全知识。...

963
来自专栏阮一峰的网络日志

Google短网址的API

除了速度快,goo.gl还提供详细的点击统计。比如,Yahoo首页的短网址是http://goo.gl/QuXj,那么它的统计数据就在http://goo.gl...

7922

扫码关注云+社区