1.2 跨平台移动开发框架

对于技术人员来说，一个技术平台路线的选择往往决定了未来2～3年的努力方向和收入水平增长速度能否跟上和超越国家货币总量增长速度。为了提升收入水平，主要可以采用两种策略：

● 深：专攻某方面专门技术成为专家，包治该领域内疑难杂症。崇尚磨刀不误砍柴工，十年磨一剑。

● 快：跟随社会与行业动向，迅速站到风口抓住商机，敏捷抢到头桶金。崇尚天下武功，唯快不破。

本书更适合那些希望从国家社会民族产业的大局入手，不过早拘泥小节，使用第二个手段野蛮生长，把机会快速变现成个人和团队现金流的技术人员或创业人士。当然作者不推崇和强调这两种手段之间的对立。对技术的钻研和深入探索也非常重要，毕竟知道分子和半桶水是无法适应稍微复杂的商业需求和后续演进的。然而本书介绍的Ionic框架技术，会更侧重于快而不是深。

1.2.1 什么是跨平台移动开发框架

相信本书的读者都经历过为自己或家人朋友购买智能手机。如果不是因为经济上的原因，买一个苹果手机还是安卓手机都有可能成为一个艰难的选择。两者操作系统的不同导致了其上的APP应用文件也是不兼容的。与PC市场上微软的Windows操作系统一支独大的情况相反，苹果和谷歌分别推出的iOS和Android移动操作系统，都各自有指定的技术开发平台和官方推荐的开发语言。

作为一个移动应用开发者不得不做出取舍，是做个专家只能精通某一移动操作系统平台还是冒着什么都会一点，但又什么都只会比Hello World深一点的风险同时兼顾多个移动操作系统平台呢？这里还不能算上市场份额在不断丢失，说多了都是泪的Windows Phone操作系统。看似两难的选择题目前有另外一个选项可以考虑：跨平台移动开发框架。

跨平台移动开发框架是指基本经过一次开发，然后通过打包工具适配输出可以在多个移动操作系统（也包括PC操作系统）流畅运行并能调用丰富硬件设备功能的开发框架。为了实现多系统之间的兼容，跨平台开发框架的思路都是采用HTML 5/CSS 3/JavaScript为主力开发语言平台，利用移动操作系统对Web技术或内嵌Web浏览器的支持来执行代码逻辑，使用开发环境提供的工具生成适合各操作系统平台的安装文件。

以本书主要篇幅介绍的Ionic v1.x为例，从技术上来看，它是一款基于HTML 5/CSS 3/JavaScript的跨平台开发框架，使用它进行开发的主要产品是用于界面结构的网页视图模板、定制后生成的CSS渲染文件和包含数据业务逻辑的JavaScript文件。为了能够被安装在多个移动操作系统上，它的构建命令会调用底层的Cordova框架来生成用于Android平台安装的apk文件和用于iOS平台安装的ipa文件。而Ionic具有的开发框架特性，是指它已经内置了符合移动平台外观特征和操作逻辑的一组预定义设计组件，它们能通过AngularJS这个基于MVVM（Model-View-ViewModel的简写）模式的业内流行前端开发框架完美配合。使用Ionic的开发人员并不用从头开始写HTML 5/CSS 3/JavaScript代码，而是站在业内有丰富的前端界面与功能组件开发经验的设计师团队的肩膀上，通过对已有应用模板的定制修改扩展，快速地将商业计划变成可以运行的APP应用。

1.2.2 为什么选择跨平台移动开发框架

之所以推荐读者选择跨平台移动开发框架，是因为它有以下优势：

● 一次编写多平台兼容

两大移动操作系统平台（iOS和Android）均使用同一浏览器内核，能够完美支持HTML 5技术。开发出的代码可以使用框架提供的打包工具生成适配于相应平台的应用安装包，以不断适应移动操作系统的演化而升级的标准工具，确保应用的兼容性。而框架提供的对底层硬件设备的JavaScript访问接口又保证了充分发挥设备的能力，突破了HTML 5只能在Web浏览器里渲染的限制。

● 迅速上手，立即产出

没有学过计算机专业知识，不懂C++、Java、C#的业余爱好者或是创业者，也能够通过业余时间学习网上大量充斥的免费HTML 5/CSS 3/JavaScript教程，遵照开发框架的入门指引开发出可用的APP应用。特别对于创业者来说，在事业启动时如果能够Fail fast or win big（快速失败或是获得大成功），将有助于更快到达成功的彼岸或放弃无谓的尝试。

● 拥抱变化，贴近用户

碎片化的国内Android应用市场和被苹果任性而严厉管理的Apple Store，都是APP应用发布推广和升级的噩梦。而通过网页形式动态渲染界面和内容的跨平台移动开发框架，辅以动态加载组件，基本能做到无痛苦的更新推送。另外也可以处理成有些内容页面直接访问在线站点，提高更新效率，绕开某些应用市场过于烦琐的审核机制。现实中虽然不至于出现一夜之间把APP应用的业务领域从互联网金融转向为O2O社区服务的实际需要，但具备这个应变能力是创业团队和个人在这个残酷的商业社会生存下去的一个重要保障。

● 提供界面框架使无美工基础的全栈开发者也能开发出友好的用户界面

因为在这些开发框架中基本都已经提供了定义好的适合移动平台的组件和样式，开发人员只需要根据需要选择组件和样式即可。基于开源技术的组件和样式又都提供客制化的途径，开发人员后期也可以为了美化界面而修改框架原生设置来定制APP应用界面。

1.2.3 可选的跨平台移动开发框架简介

目前在国内流行的跨平台移动开发框架有：Ionic、jQuery Mobile、AppCan、React Native等。类似的其他框架还有很多，这里只介绍有代表性和有活跃开发者群的。此外由于本书的主题是关于Ionic，因此将会集中大量篇幅为读者介绍Ionic，以帮助树立学习该开发框架的信心和决心。

1.Ionic

在2015年5月12日宣布正式发布的Ionic被认为是目前最成熟和有潜力的一款HTML 5跨平台移动开发框架。直观地看，它提供了很多符合移动平台界面观感和操作逻辑的UI组件来帮助开发者开发强大的互联网APP移动应用（以及企业APP移动应用）。

Ionic框架的目的是以Web的技术开发移动应用，而基于Apache Cordova的编译平台，实现了编译打包成各个移动操作系统平台适配的应用程序包。

在评估基于HTML 5技术的APP应用各项指标中，运行速度占据非常重要的位置。基于Ionic编写的APP应用在最新的移动设备中表现卓越，运行流畅，能让用户感觉到用HTML 5开发的APP也可以飞起来。

Ionic已经成为MVVM前端框架AngularJS的移动端标准解决方案。Ionic基于AngularJS创造出一款适合开发者分离业务模型、构建单元测试的强大应用开发框架。因此Ionic可以适用于大中小各种规模的APP应用开发和团队协作。

Ionic为当前流行的两种移动设备而设计，并且有相当完美的展现层。伴随框架提供的众多流行移动组件、单页面路由结构、内置的用户界面交互规范、华丽且可扩展定义的主题和全面的官方文档，移动开发者一旦上手就不愿意离开它了。

利用Ionic提供的CLI（命令行接口），只需要通过输入一个命令就可以完成创建应用初始框架，构建测试包，部署应用程序到指定的平台设备或模拟器上。

安装Ionic消耗的时间成本也非常低，只需要在命令行运行npm install -g ionic完毕就可以开始上手了。

最值得一提的是，Ionic的开发运营团队提供了完整的社区生态和支持体系。在图1.1演示的Ionic官方发现者（discover）网站http://ionic.io/discover里读者可以由此入口找到关于Ionic的官方与社区资源。

在笔者写本书的时候，Ionic的v2（第2个大版本）也于2016年6月30日推出了Beta测试版，并在紧张地设计和编写从v1平滑迁移升级到v2的方案，可见基于Ionic开发框架的开发者有乐观的未来前景保障。

2.jQuery Mobile

jQuery Mobile的前身是jQuery。jQuery是一个非常流行的Web程序开发时使用的JavaScript类库，当时它的出现只是为了在PC端的浏览器而设计开发的。在移动互联网中为了更好地满足浏览器运行Web程序的需求，基于jQuery和jQueryUI的基础上，jQuery Mobile应运而生。它是jQuery在移动设备上的版本，它不仅带来能够让主流移动平台支持的jQuery核心库，还包括一整套完整和统一的移动UI框架。对于已熟练掌握jQuery，任务是编写小型APP应用的个人或小团队来说，jQuery Mobile不失为一个好的选项。笔者在北美搭乘过的灰狗（GreyHound）公司提供的简单APP应用，就是使用jQuery Mobile开发的。图1.2列出了一些使用jQuery Mobile开发出的移动应用示例。

3.AppCan

AppCan是中国人自行开发的基于HTML 5技术的跨平台移动应用快速开发一体化解决方案。开发者利用HTML 5/CSS 3/JavaScript技术可以快速地开发与原生应用体验相媲美的移动应用。AppCan平台提供了UI快速开发框架、封装过的本地功能调用API接口、应用打包系统、IDE集成开发环境和本地应用调试模拟器，并预置数百套界面模板和数十种应用插件，提供多套应用模板。完善的框架接口，人性化的开发环境，丰富的开发资源，强大的服务支持，使学习AppCan的开发者可以快速迈入移动开发领域。

不过网上评论AppCan有一些缺点比如不开源、无法修改优化底层代码、暂不支持自行开发原生控件、框架自带功能过多导致应用安装包偏大等。因此有一些早期基于AppCan开发的团队慢慢流失转到更加开放和灵活的PhoneGap/Cordova/Ionic阵营。从图1.3的AppCan架构图来看，这个框架功能还是很全面的。

4.React-Native

React-Native是Facebook在2015年初React.js技术研讨大会上公布的一个开源项目。它支持用开源的JavaScript库React.js来开发iOS和Android原生App。在初期React-Native仅支持iOS平台，同年9月份，该开源项目同时支持Android平台。

React-Native的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View>取代<div>，以<Image>替代<img>等。

和其他的跨平台移动Web框架相比，React-Native优点显著：不用WebView，彻底摆脱了WebView让人不爽的交互和性能问题、React-Native封装的原生控件有更好的触摸滚动体验和灵敏的手势识别、React-Native有更适合的线程模型保证了前台操作的流畅性。

然而目前阶段React-Native的缺点也比较鲜明：尚未正式发布的代码还在持续改动，对于技术能力不强的团队很难跟上步伐、官方对Android平台的支持依然较弱，开发者需要借助社区力量的支持、提供的界面组件偏少，对类CSS的样式支持也不丰富完整。笔者曾经把玩过一阵React-Native，感觉目前它虽是众望所归的明日之星，但真要到达普罗大众都能轻松上手完整开发出一个APP应用的程度，还需要加以一些时日来沉淀完善。笔者的观点是开发者如无一定实力做基础，在黑夜里盲目走在最前面可能会不容易见到明天的太阳。图1.4中显示的React Native开发的APP，是iOS版本下的应用。

1.2.4 什么是PhoneGap / Cordova / Ionic

在混合型应用（Hybrid APP）技术里，PhoneGap和Cordova这两个词往往会被混用。虽然本书主要内容是介绍Ionic开发框架，但是弄清楚提供打包支持和底层硬件设备接口组件的Cordova的来龙去脉也有助于技术人员与同行探讨IT文化。

2008年8月，PhoneGap在旧金山举办的iPhone Dev Camp上崭露头角，起名为PhoneGap源于创始人的想法：“跨越Web技术和iPhone之间的鸿沟（Gap）”。当时PhoneGap还隶属于Nitobe（泥土鳖）公司。经过几个版本的更新，PhoneGap开始支持更多的移动操作系统平台。在2011年，Adobe公司收购了Nitobe公司，随后Adobe把PhoneGap项目捐献给了Apache基金会，但是保留了PhoneGap的商标所有权。而Apache收录这个项目后在2012年Adobe PhoneGap更新到1.4版本时最终更名为Apache Cordova。

随后就出现了PhoneGap和Cordova两个名字经常被混淆使用的状况。两者区别如下：

● Cordova是Adobe捐献给Apache的开源项目名，而PhoneGap是Adobe的商业产品名。

● PhoneGap产品另外还包括一些额外的属于Adobe的商用组件，例如PhoneGap Build和Adobe Shadow。

目前其实Adobe的PhoneGap产品和Apache的Cordova项目维护的是共同的一份源代码组件。最终我们可以把PhoneGap看作是Apache Cordova的一个分支。类似于Apache Cordova是一台发动机，运行在PhoneGap上，就像WebKit这个浏览器引擎运行在Chrome浏览器和Safari浏览器上。为了正确地反映现状，本书使用的是Cordova这个代号，尽管很多时候两者是可以混用的。

然而不是装了Cordova以后开发起跨平台的APP应用就一了百了了。Cordova提供的是比较底层的硬件设备功能库和APP打包功能，而它对表现层并没有任何实现支持。因此业内使用Cordova开发往往至少需要再加上作为展现和交互的UI层工具或者框架，而Ionic和前面提及的jQuery Mobile主要职责就都是提供这部分UI层功能。

所以读者可以把Ionic理解成一个基于Web技术开发SPA（单页面应用）的框架，通俗地说就是使用HTML 5/CSS 3/JavaScript开发一个APP应用页面。

为了便于大型项目的开发协作，Ionic本身的组件和样式开发分别集成利用了AngularJS和SASS/SCSS。最后为了提供给开发者一站式开发平台，Ionic又集成了Cordova的构建打包功能，使得开发者最终可以直接用Ionic的CLI（命令行接口）来调用Cordova的创建、编译、打包等功能。