Ionic！用Web技术开发移动应用！
1Ionic是什么
Ionic 通过整合各种技术和功能使构建Hybrid 应用更加快速、容易和美观。Ionic 的生态系统基于Angular 和Cordova前者是Web 应用框架后者是构建和打包原生应用的工具。
下图展示了整个技术栈的概况
技术栈的起点是用户在设备上打开应用。假设是一台运行iOS 的iPhone 或者一台运行Android 的Nexus 10。下面是各个部分的介绍。
-
设备—设备可以加载应用。设备中的操作系统负责安装从平台对应商店下载的应用。操作系统还会提供一系列应用可以使用的功能API比如GPS 位置、通讯录列表和照相机。
-
Cordova 应用包装器—这是一个能够加载Web 应用代码的原生应用。Cordova 是一个平台用于构建能够执行HTML、CSS 和JavaScript 的原生应用这种应用被称为Hybrid 移动应用。它是平台和应用之间的桥梁可以创建一个能够安装的原生应用上图 中被称作应用封装器。这个原生应用中包含WebView实际上是一个独立的浏览器窗口可以通过JavaScriptAPI 来运行Web 应用。
-
Cordova JavaScript API—这是沟通应用和设备的桥梁应用封装器可以通过JavaScript API 来联通Web 应用和原生平台。具体的实现细节不用在意总之最后Cordova 会帮你生成原生应用。
-
Angular—用来控制应用路由和功能的Web 应用。Angular Web 应用运行在WebView 中。Angular 是一个流行的Web 应用构建框架主要管理Web 应用的逻辑和数据。
-
Ionic—控制应用中用户界面组件的渲染。Ionic 基于Angular 构建主要用来设计用户界面和用户体验。Ionic 包含一些视觉元素比如选项卡、按钮、导航头部。这些界面控件是Ionic 的核心可以在Hybrid 应用中提供接近原生界面的体验。Ionic 还提供了许多功能和特性可以帮助你完成创建- 预览-发布整个流程。
Ionic 将上述这些技术整合起来成为一个非常强大的移动端应用开发平台。现在你对Ionic 及其相关技术有了初步了解下面我们来对比一下三种主流的移动应用同时介绍Ionic 的优势。
2移动开发类型
为移动设备开发应用有好几种方法有必要知道每种方法的优点和缺点。一共有三种基础类型原生应用、移动端网站和Hybrid 应用我们会详细介绍它们的区别。
在下图中你可以看到三种类型在设计和架构上的对比。图中还展示了应用如何通过访问数据库或者Web 服务API 来加载数据。
2.1 原生移动应用
要创建原生应用开发者需要使用移动平台默认的语言对iOS 来说是Objective-C或者Swift对Android 来说是Java。写完之后需要编译应用并把它安装到设备上。开发者可以使用平台的软件开发套件SDK来和平台API 通信从而可以访问设备中的数据或者使用HTTP 请求从外部服务器加载数据。
iOS 和Android 都提供了一系列预先定义好的API可帮助开发者在可控的范围内使用平台特性。有许多官方或者非官方出品的工具可以辅助开发原生应用。对开发者来说在原生应用中使用框架来简化开发是很常见的。
原生应用的好处
比起Hybrid 应用和移动端网站原生应用有很多好处主要得益于和设备平台紧密结合
-
原生API—原生应用可以在应用中直接使用原生API这和平台的交流最紧密。
-
性能—原生应用性能最好。
-
环境相同—原生应用使用原生API 写成对于其他原生开发者来说很容易理解。
-
但是原生应用也有很多缺点。
原生应用的缺点
原生应用的缺点主要是开发和维护难度大。
-
语言要求—原生应用要求开发者掌握平台对应的语言比如Java并且知道如何使用平台提供的API。
-
不支持跨平台—每个平台都要单独开发。
-
费时费力—通常来说需要做很多构建工作增加成本。
如果老板要求你不得不使用Java 和Objective-C 或者团队有大量资源并且真的需要原生应用带来的好处那最好的选择就是原生应用。除此之外你最好考虑其他类型的应用。
2.2移动端网站Web 应用
移动端网站或者说Web 应用很适合移动设备使用可以在手机浏览器中访问。Web 应用就是在手机浏览器中访问的网站它们专门被设计成适合手机屏幕尺寸。
有些网站的设计者会专门为移动设备开发一个版本。你在移动设备*问网站的时候可能会被重定向到另一个功能有限的版本。比如访问eBay你会被重定向到http://m.ebay.com 子域名。而访问其他一些网站比如www.bostonglobe.com 时你会发现网站的设计会根据设备的类型和屏幕尺寸进行调整。这用到了被称为响应式设计的技术。网站的内容会根据浏览器窗口尺寸自动调整大小有些内容甚至会被隐藏起来。
移动端网站的优点
移动端网站有很多优点主要体现在效率和设备兼容性上。
-
可维护性—移动端网站很容易更新和维护没有任何审核流程也不需要更新设备上的程序。
-
免安装—网站在互联网中不需要安装到移动设备中。
-
跨平台—所有移动设备都有浏览器它们都可以访问你的应用。
和原生应用相比移动端网站也有很多缺点。
移动端网站的缺点
移动端网站运行在手机浏览器中因此有很多限制和缺点。
-
不具备原生访问能力—因为移动端网站运行在浏览器中它们不能访问原生API 和平台只能访问浏览器提供的API。
-
需要使用键盘—用户必须在浏览器中输入地址来寻找或者使用移动端网站这比单击一个图标困难多了。
-
受限的用户界面—很难创建对触摸友好的应用尤其是当要同时兼容桌面版时。
-
移动端访问量下降—用户在移动设备*问网站的时间不断减少使用应用的时间越来越多。
不同的产品和服务需求不同即使你已经有了移动端应用可能还是需要一个移动端网站。不过总体来说移动端网站的重要性不断下降研究表明用户使用应用的时间更多。
2.3 Hybrid 应用Hybrid 应用指的是包含独立浏览器实例的移动应用这个实例通常被称作Web-View可以在原生应用中运行Web 应用。Hybrid 应用会使用原生应用封装器来实现WebView 和原生设备平台的通信。这意味着Web 应用可以运行在移动设备上并且可以访问设备的功能比如照相机和GPS。
有很多工具可以实现WebView 和原生平台之间的通信从而让Hybrid 应用成为可能。发布这些工具的并不是iOS 或者Android 官方平台而是第三方比如Apache Cordova。编译Hybrid 应用时你的Web 应用会被转换成一个原生应用。
Hybrid 应用的优点
相比移动端网站和原生应用Hybrid 应用有一些优点这也是它成为有力竞争者的原因。
-
跨平台—可以只开发一次部署到多个平台最小化开发成本。
-
和Web 开发共用技术—可以使用开发网站和Web 应用的技术来开发移动应用。
-
设备访问能力—因为WebView 被封装在原生应用中你的应用让你可以像原生应用一样访问所有的设备功能。
-
简化开发—开发流程简单快捷不需要为了预览重复构建。也可以继续使用构建网站的那一套开发工具。
Hybrid 应用允许使用Web 平台的技术开发移动应用你可以像开发网站一样开发应用的绝大部分功能。当需要使用原生API 时Hybrid 应用框架会把API 桥接到JavaScript 中。你的应用可以像检测单击和键盘事件一样检测扫动和捏合手势。不过如你所料Hybrid 应用也有一些缺点。
Hybrid 应用的缺点
因为身处WebView 中受到原生集成的限制Hybrid 应用有如下一些缺点。
-
WebView 限制—应用只能运行在WebView 实例中这意味着应用的性能取决于浏览器。
-
通过插件访问原生功能—你需要的原生API 现在可能还没有插件实现可能需要一些额外的开发工作来进行桥接。
-
没有原生用户界面控件—如果没有Ionic 这样的工具开发者需要创建所有的用户界面元素。
有了Ionic你可以使用Web 开发者已经熟悉的知识和技能来构建Hybrid 应用。
相 关 图 书
《Ionic实战基于AngularJS的
移动混合应用开发》
集成Cordova|Angular的热门技术
快速实现iOS|Android跨平台应用
【美】Jeremy Wilken 著
奇舞团 译
2016年7月出版
Ionic最大的亮点是集成了Angular和Cordova对于有开发经验的前端工程师来说上手难度大大降低并且能直接使用现有的大量第三方库和框架。这是一本详尽的Ionic实战教程不仅告诉你“怎么做”还告诉你“为什么”这正是大部分入门书籍所欠缺的。