1.3　初识Ionic v3.x

经过之前的介绍，相信读者已经了解了跨平台移动开发框架的含义以及使用它们的原因。目前市面上经过大浪淘沙，尚存的移动开发框架各具特色，而且大都开源免费，如何选择出适合自己的那一款就成了开发者必须要面对的问题。

1.3.1　为什么选择Ionic

虽不能说在移动开发领域非常资深和见多识广，笔者也是在历经数月了解把玩多个移动开发框架后最终选择了Ionic作为主力开发平台。个人考虑的原因大概有以下几点，供读者借鉴参考和批判：

•　成熟堪用

从2015年5月12日发布v1.0正式版本以来，经过Ionic框架开发团队不断改进，最近Github上该开源项目的issue（报错）总数趋于不变。除了能找到一些Ionic处于早期Beta版阶段时被黑得伸手不见五指的历史老帖，国内外的开发者论坛上目前对Ionic的口碑反映都还不错。在stackoverflow网站上Ionic的新问题也已经不多了。种种迹象表明现在的Ionic历经时间的洗礼，达到了成熟可控没有弱智bug的程度。

•　适合团队协作和中大型项目

通过集成Angular和AngularUIRouter，Ionic框架充分发挥了Angular的优势。本书会在第3章介绍Angular的一些特性。在这里读者需要了解的就是，有了Angular做基础，Ionic开发应用的过程比基于jQuery/Zepto或者jQuery Mobile框架的过程更容易进行工程质量管理和开发团队职责划分。

•　相对的性能优势

Ionic早期的版本虽然功能初步完备，但是面对大数据量或动画切换场景时往往性能不佳。经过一年多的持续改进和定点优化，情况已经有很大改善。对于一些经典的性能瓶颈场景，Ionic或提供特殊优化过的Angular指令，或内置可灵活定制的缓存机制，或给出调整影响性能的开关参数，使开发人员能无痛地让开发出的应用在使用流畅性上大致接近原生应用。

•　良好的社区支持服务

目前处于正式版的v3.x，Ionic都有专人在社区进行问题解答和在Github跟踪解决issue。对于有bug暂未解决的部分，官方文档网站也都会及时明确提示，使开发者能够避开雷区。

•　完整的开发构建工具链

在完成第2章的Ionic开发调试环境安装后，通过使用NPM、Gulp、Bower、Gordova和Ionic CLI一起组成的工具链，就能快速进入App应用的迭代开发测试阶段，节省传统开发中大量的无效时间。相信读者在后面章节的动手实验环节中将能深入感受到这一点带来的便利。

1.3.2　基于Web技术HTML 5/CSS 3/JavaScript

大体上基于Ionic框架的开发可以理解成开发一个基于Web技术开发SPA（单页面应用），通俗地说就是使用HTML 5/CSS 3/JavaScript开发一个App应用页面。可能有些读者未曾了解和接触过Angular和SASS/SCSS技术，目前可以把Angular理解为基于TypeScript开发的框架，而SASS/SCSS只是用于最终生成CSS代码的过程文件。因此具备HTML 5/CSS 3/JavaScript基础知识的开发者，是有能力快速入门和产出的。

从图1.5的示例图中读者可以发现，一个使用Ionic框架开发的App应用主要有效运行代码就是主HTML文件＋主CSS文件＋若干TypeScript文件构成。

1.3.3　基于Angular框架

选择基于Angular框架，Ionic开发团队应该是经过深思熟虑的，虽然最近在React Native大火之后出现了很多对Angular诟病的声音。

Angular建立在这样的信念上：应该把声明式编程用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。Angular框架采用并扩展了传统HTML，它设计了双向的数据绑定来适应动态内容刷新，这种双向数据绑定允许模型和使用模型数据来完成界面渲染的多视图之间的自动同步。因此，Angular使得引入jQuery这样的库来对DOM的操作不再重要并提升了可测试性。

Angular完成了以下的设计目标：

•　将应用逻辑与对DOM的操作解耦，这能提高代码的可测试性。

•　将应用程序的测试看的跟应用程序的编写一样重要，而代码的模块构成方式对编写单元测试的难度有巨大的影响。

•　将应用程序的客户端与服务器端解耦，这允许客户端和服务器端的开发可以分头行动，并且让双方的复用成为可能。

•　指导和约束开发者构建应用程序的整个历程：从用户界面的设计，到编写业务逻辑，再到测试。

Angular实现了MVVM模式，并鼓励模型、视图和视图-模型组件之间的松耦合。通过依赖注入（dependency injection），Angular为客户端的Web应用引入了传统服务端开发常用的模式实践。

相对jQuery类库来说，Angular是一个复杂完善的系统级框架，因此学习和上手都需要相对花费更多的时间和精力。本书第3章将为未曾接触过Angular框架的读者介绍Ionic开发中需要了解的基础概念。

1.3.4　接近原生App应用的绚丽界面组件

Ionic提供了模拟参照iOS和Android平台上的原生移动应用布局和众多移动端界面组件。这些布局和交互型组件都带有可调整的动画效果和支持触摸手势事件。因此Ionic在为技术人员提供快速开发能力的同时，又最大程度兼顾了用户友好性和界面美观。更有甚者，界面设计的专业开发者在Ionic界面组件的基础上实践了Material Design的概念，推出了有更多开源绚丽界面组件的网站http://ionicmaterial.com/。该网站也提供了如图1.6所示的模拟界面预览组件供学习参考。

本书第5～9章将会逐一详细介绍Ionic提供的各种界面组件，有兴趣的读者可以提前翻看组件示例图来了解。

1.3.5　自适应（Responsive）布局

移动设备已经慢慢超过桌面设备，成为访问互联网的最常见终端。然而Android设备屏幕大小分布的碎片化使开发者不得不面对一个难题：如何才能在不同大小的设备上使同样的内容呈现时更加自然友好？

2010年，Ethan Marcotte提出了“自适应网页设计”（Responsive Web Design）这个名词。它指可以自动识别屏幕宽度，并做出相应调整的网页设计。图1.7展现的就是同一网页在浏览器调整为四种不同宽度时自动调整布局结构的示例。

Ionic框架已经内置了自适应布局的支持，它额外提供了三个不同响应式CSS类默认样式用于区分手机竖屏与横屏、平板竖屏与横屏这4种宽度布局类别。另外开发者也可以自定义更多的响应式CSS类满足特殊需要。

1.3.6　支持个（任）性定制

本章的1.3.4节笔者提到Ionic内置了多组适应布局和交互型组件。这些开箱即用，功能完善、界面完美的组件集能够满足大多数开发场景的需要。但世界并不总是那么如意，可能某些时候开发者需要应对自己或他人的脑洞大开，必须将已有组件做各种个性化更改的局面。

提前考虑到这一点的Ionic团队在开发组件的样式CSS类时放开了本书第4章将要介绍的SASS/SCSS，将CSS更动态化，此外再结合本书第10章将要介绍的设备信息服务组件，开发者就能依据移动设备的硬件参数和平台资源配置，将应用定制成任意的模样。

1.3.7　Ionic的缺点

前面介绍了一大堆使用Ionic框架做跨平台移动应用开发的优势，但是理性最终总能战胜狂热，读者有必要了解Ionic与生俱来的一些缺陷，从而知道不适合使用Ionic的环境或者需要提前筹划规避的深坑。

经过近2年全球开发人员的使用，基本对Ionic存在的缺点达成了共识：

•　Hybrid（混合）模式开发的应用自有的性能缺陷。

由于应用的逻辑执行是基于浏览器所带的JavaScript动态代码在界面主线程上执行，因此在低端Android设备上性能缺陷严重，用户操控时卡顿感很明显。好在随着Android设备提供商的硬件跑分残酷竞争，目前市面所售的智能手机使用Ionic开发出的App应用与原生应用相比已经基本无差异感了。不过即使如此，Ionic也不能用于有较高实时图形响应要求的游戏开发。

•　深度依赖于Angluar框架。

Angluar框架在为Ionic带来各种好处的同时，也带来了初学者学习曲线陡峭（这对那些笔者极端仰慕的天资聪颖者当然例外），深刻理解的人用起来效率很高，不理解的用了到处是坑的局面。而对Angluar框架的深度依赖，也让Ionic在Angluar开发团队开发其2.0版本时决定重起炉灶抛弃以前的架构的时候处境尴尬，不得不有点被胁迫地将Ionic框架同步升级为2.0版本，将开发使用的主力语言从JavaScript转为微软主导开发的TypeScript。

•　深度依赖Cordova插件提供硬件设备的接口。

当没有相应的Cordova插件提供想要的硬件设备的接口时，开发人员需要自己分别编写iOS和Android平台的插件。当然这种情形出现的概率并不大。

•　Windows Phone支持比较弱。

Ionic的官方网站已经基本没有关于Windows Phone的开发内容，好在Windows Phone的市场也已经日暮西山，这部分微软死忠用户的价值基本不用惦记了。

在笔者看来，对于开发应用型的技术，应该也本着“合则用，不合则弃”的原则来决定是否投入精力来学习。读者需要根据Ionic的优缺点、自身的技术积累优势和计划编写的移动App的特点来考虑是否要使用Ionic框架。

1.3.8　Ionic的商业案例

从Ionic的Beta版开始，国外就已经有众多的个人开发者和公司开始追踪和试用这个据称是混合开发的神器，从此诞生了不少使用Ionic框架开发的App应用。目前据Ionic网站的官方统计，已有超过120万移动App应用是用Ionic框架来构建的。感兴趣的读者可以到http://showcase.ionicframework.com/查找一些被Ionic官方推荐的应用列表，如图1.8所示。

考虑到大部分购买本书的读者更关注Ionic的中文资料和在国内互联网的使用，这里笔者也列出了专门以Ionic为主题的技术论坛的网页http://ionichina.com/showcase上展示的基于Ionic开发的部分App应用，如图1.9所示。

1.3.9　Ionic的开源案例

学习和提升IT开发技术的最好方式就是大量阅读其他优秀开发者的代码。在Ionic的官方网站同时也维护了为初学者准备的很多基于Ionic框架开发的App应用开源案例，感兴趣的读者可以去自行登录下载学习http://market.ionic.io/starters，如图1.10所示。