Ionic系列——Ionic介绍

阅读量：5925 次

发布时间：2019-06-19

本文共 7378 字，大约阅读时间需要 24 分钟。

1、一张图预览混合应用开发

2、混合应用开发介绍

智能手机日益普及，移动互联网乱战日趋白热化，开发一个应用早就不是技术圈热议的话题，iOS和Android上的App已经成了每个互联网产品的标配。 “唯快不破”也是中被移动互联网人尊为铁律，快速迭代，高效开发，低成本上线是每一个App开发团队追求的目标。同时，随着HTML 5的不断升温和智能手机硬件性能的提高，Hybrid App的概念应运而生。这种“Native搭台，HTML 5唱戏”的Hybrid App开发模式一时间受到各个开发团队追捧，快速进入了大量开发团队，成为主流开发模式。

1、HTML5、Native或混合型应用开发全接触 http://blog.jobbole.com/21298/ 基础

2、Hybrid App开发实战 http://www.infoq.com/cn/articles/hybrid-app-development-combat/ 高级介绍了混合开发的三种模式，工具，趋势

3、别闯进Hybrid App的误区 http://www.infoq.com/cn/articles/hybridapp-misunderstanding?utm_source=infoq&utm_medium=related_content_link&utm_campaign=relatedContent_articles_clk

4、原生应用、Web应用、混合应用优缺点分析

3、为什么选择Hybrid开发模式

•折衷考虑——如果企业使用Hybrid开发方法，就能集两者之所长。一方面，Native让开发者可以充分利用现代移动设备所提供的全部不同的特性和功能。另一方面，使用Web语言编写的所有代码都可以在不同的移动平台之间共享，使得开发和日常维护过程变得集中式、更简短、更经济高效。

•内部技能——Web开发技能十分常见，许多企业都拥有这类技能。如果选择Hybrid开发方法，在合适解决方案的支持下，Web开发者只要仅仅运用HTML、CSS和JavaScript等Web技能，就能构建App，同时提供Native用户体验。

•考虑未来——HTML5的可用性和功能都在迅速改进。许多分析师预测，它可能会成为开发前端App的默认技术。如果用HTML来编写App的大部分代码，并且只有在需要时才使用Native代码，公司就能确保他们今天的投入在明天不会变得过时，因为HTML功能变得更丰富，可以满足现代企业一系列更广泛的移动要求。

4、混合应用开发误区

1、为了HTML 5而Hybrid App。

HTML 5在Hybrid App模式中是一个最常被提起的概念。HTML 5作为一个HTML 4.0.1和XHTML 1.0的升级版，基于旧版本有更强大的表现功能，并加入了Local Storage等技术，确实为Web页面提供了更大的想象空间和更多的可能性。但HTML 5处在目前的发展阶段，受到浏览器兼容性和手机硬件性能水平的影响，它所能提供的功能与Native仍然有很大差距。

所以，我认为作为工程师要明确一款App采用Hybrid App模式的根本原因是什么。作为一款App其最根本的功能是满足使用者的需求，而并不是服务某项新技术。因此当决定采用Hybrid App去构建一款应用时，应该从应用本身功能特点和整个团队的开发资源配比统一考虑，是否有必要同时又有能力去驾驭一款“Native搭台，HTML唱戏”的Hybrid App。类似“HTML 5的时代已经到来，如果我们不这么做就变土鳖了，错过这场技术革新的大潮，终将被这个时代所淘汰”的话真不是一个有责任心的工程师应该发出的声音。

2、忽略关键因素

在谈到Hybrid App的场合我们更多提及的是它有诸多优点，如何架构一个Hybrid App，怎么让Web和Native和谐共处，然而Web开发中会被忽略的一些因素少被提起，这些因素又恰恰经常是一个Web页面能否正常运行在App中的决定性因素。

Web开发是基于PC的一种开发模式，开发者使用PC浏览器模拟App中的Web View进行调试。PC浏览器与手机Web View的区别是巨大的，能支配的CPU资源，最大占有的内存，运行的网络环境，鼠标操作与触控操作的区别，浏览器对CSS/JS的解析和对事件处理，等等。

App工程师，无论是iOS还是Android，最敏感的一个问题莫过于内存管理，而在Web开发则对这个问题没有过多注意。这就经常导致同一个功能界面Native实现中会通过一些技术手段，把内存容量控制在操作系统允许的范围内保证App正常运行。如果以Web方式接入App的页面没有一个明确的标准和严格的验收机制，相应的Web实现则不会过多考虑这方面的问题，而且浏览器也没有给前端工程师提供足够的Api支持处理内存问题，导致在某些条件下造成App无法正常运行，甚至Crash。

同样的问题会出现在网络环境方面，虽然现在wifi覆盖越来越广，3G网络也日益普及，但App运行的网络环境与PC相比仍然有着巨大差距，wifi和蜂窝网络的切换，基站变化等诸多因素都会导致网络间歇性断开。Web开发总是默认有一个稳定的网络环境，因此在对于不稳定网络环境问题的处理上也有所欠缺。没有明确的对于低速网络或不稳定网络访问的处理，在很多情况下这些页面也会非常不给面子。

3、富交互导致体验差

这里所谓的体验问题一分为二：一是与手机平台默认交互习惯不一致的体验，二是与同样功能Native界面存在的体验差距。

无论在Android还是iOS平台上，都有各自的一套交互习惯，包括视觉风格，界面切换，操作习惯等，与Web习惯完全不同。如果使用Web方式开发富交互的页面，或多页面功能就会出现这样的问题。

以iOS界面切换为例，系统风格是新界面自右向左推入，后退时界面自左向右推出，而旧界面保持状态。Web开发的默认习惯则是刷新页面，无论新载入页面或是后退，都会对页面进行刷新。因此使用Web模式开发多界面功能就面临这样的交互习惯差异，造成体验上的损失。当然Web方式也可模拟Native 的交互方式，但这样的模拟首先提高了开发成本，有悖于最初的高效原则，从效果上看，也很难达到Native的流畅性。

另一个方面，也是上述提到的与Native相比，同样的功能在性能上存在巨大差距。Web界面上JS对HTML Node的操作需要消耗大量的CPU资源，手机CPU的性能还不能与PC相提并论，就算在智能手机之间，硬件水准也参差不齐，一个可以在iPhone 5上流畅运行的界面，跑到三星S III上很可能就卡住不动了。所以我们经常可以发现一些富交互页面上的操作无法达到令人满意的流畅度，而流畅度也正是用户评价一款App优劣的最直观因素。

4、跨平台

一次开发，跨平台运行是Web的优势，这也是很多App采用Hybrid模式的重要原因之一。兼容性问题在Web开发过程中往往不被关注，但当下智能手机的软硬件版本众多，兼容性绝对是一个不容忽视的问题。

以Android手机为例，诸多主流品牌都有各自定制过的操作系统，浏览器内核对JS和CSS的解析，事件处理等方面都存在区别。以HTC One为例重叠在一起的层在某些情况下会对点击事件透传，而其他多数平台则不存在这个问题。并且目前移动平台的开发框架还没有完全成熟，可以很好的解决兼容性问题。所以就要求开发者在开发过程中要对兼容性做充分测试，对于某些特殊版本进行特殊处理。

即使在相对统一的iOS平台，不同版本之间也存在较大差异。例如：在iOS 4.x版本中CSS甚至不支持position fix的属性，4英寸屏幕的设备无法很好的支持apple-mobile-web-app-capable属性，等等。

5、交互一致性

交互一致性是一个非常容易被误读的概念，“一致性”经常被理解为同一个应用在各种平台和场景下要有一致性的体验。我认为在移动平台开发过程中，“一致性”应该是App视觉和交互习惯与其运行平台的习惯保持一致。而Web开发“一次开发，跨平台运行”的特性与此存在一定程度上的冲突。

以“返回上一页面”的操作为例，在iOS平台上在页面顶部始终存在一个44像素高的导航栏，左侧有一个返回按钮用于返回操作，而Android平台则习惯使用设备提供的返回键操作。这个返回按钮在iOS平台可以通过绝对地址的方式连接到任何其他页面，而在Android平台返回按钮和设备的返回键则可能指向不同的位置。

例如这样的一个流程：首页->列表->筛选->刷新过的列表，此时的返回操作被期望是导向首页，则页面上的返回按钮可以通过绝对链接的方式实现，而Android设备的返回键则只能返回上一个筛选页面，再次返回是筛选前的列表页。

5、Hybrid开发总结

移动端开发不能确定哪一种是最佳的开发方式，因为不存在最佳的开发方式，每种方式都有天生的优点和局限性，找到最适合本企业需求的一种开发方式是关键。

过度依赖Hybrid方案会造成Web前端开发成本快速上升，甚至造成 App整体体验下降，甚至造成功能缺失。不要为了Hybrid而Hybrid，控制好方案中Native与Web的边界。

6、Ionic介绍

•Ionic 是一个强大的 HTML5 应用程序开发框架，号称 Advanced HTML5 Hybrid Mobile AppFramework 是 AngularJS 移动端解决方案可以帮助您使用 Web 技术，比如 HTML、 CSS 和Javascript 构建接近原生体验的移动应用程序。 Ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

•Ionic 是一个轻量的手机 UI 库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI 库在手机上运行缓慢的问题。

•漂亮的界面　追求性能　专注原生　免费开源

Ionic中文网地址 http://www.ionic.wang/

Ionic官网地址 http://ionic.io/

7、Ionic开发现状

1、使用Ionic框架，可以有效利用AngularJs的特性，极大的提供HTML5应用开发效率，质量，模块化程度。根据我们的经验，使用ionic开发，比使用基于jquery的移动框架，同样功能代码量会减少50%，开发速度提高一倍以上。

2、与原生开发相比，不考虑原生应用开发不能跨平台的因素，同样是在iOS上开发，使用ionic要比使用oc开发快一倍以上。用户体验方面，在iOS和高端Android设备（1500元以上的手机，平板）上，与原生应用差别不大，一般用户无法分辨出是HTML5的。

3、目前来看，市场竞争激烈的App，暂时还不适合用HTML5开发，即使HTML5完全能实现业务需求，例如去哪儿，携程这种竞争性的App。但在企业应用领域，使用ionic有明显优势，我们已经用ionic框架上线了iPad和android Pad企业应用。

8、Ionic框架包含三部分内容

Ionic Css样式 http://www.ionic.wang/css_doc-index.html

Ionic AngularJS 扩展 http://www.ionic.wang/js_doc-index.html

Ionic Icon库

9、Ionic学习资料

•汇智网上的Ionic教程

•Ionic中很多东西官网文档并没有写的很全，所以要看源码

•GitHub上找项目源码学习

10、Angular使用场合

适合：

1、单页面应用程序

2、Angular更适合于CRUD的管理系统开发。

3、也非常适合模块化，分层化，数据绑定

4、hybrid开发神器

不适合：

1、内容网站，需要SEO的。(SEO目前也有了prerender解决方案)2、交互频繁的，如游戏之类交互体验网站。（单页面应用程序）

3、太过于简单的页面。（因为要考虑mvc,注入等，就会笨重）

单页Web应用或引领下一代Web新趋势 http://www.csdn.net/article/2012-12-10/2812658-Single-Page-Applications

11、Angular开发

Angular代码规范

http://www.reqianduan.com/1722.html

Yeoman 前端开发神器

http://my.oschina.net/u/1416844/blog/196199

25 款最有用的 AngularJS 工具

http://www.oschina.net/news/60200/bestl-angularjs-tools

推荐 15 个 Angular.js 应用扩展指令

Angular样例

12、Angular2介绍

移动：新的版本将专注于移动应用的开发。依据是它更容易处理桌面方面的事情，一旦挑战涉及到移动（性能、加载时间），注重这方面会使问题得到解决。

模块化：各个模块将从Angular的核心中移除，从而获得更好的性能。这意味着你可以选择你需要的零件。

现代化：Angular 2.0将把ES6和“常青”现代浏览器（自动更新到最新版本）作为目标。这意味着开发者可以专注于业务领域相关的代码。

AngularJS 2.0会有哪些新特性？

Angular2官网

13、ECMAScript6介绍

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

2015年6月，ECMAScript 6正式通过，成为国际标准。

Node.js和io.js（一个部署新功能更快的Node分支）是JavaScript语言的服务器运行环境。它们对ES6的支持度，比浏览器更高。通过它们，可以体验更多ES6的特性。

这个标准的牛逼之处就在于会逐步统一前端，因为新增加的module,异步编程，Generator函数这些东西在angular中和node中都有很好的实现了。而他们又是按照ECMAScript5规范写的。

ECMAScript6学习网址 http://es6.ruanyifeng.com/#docs/intro

14、Cordova介绍

Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。

Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

Cordova是贡献给Apache后的开源项目，是从PhoneGap中抽出的核心代码，目前(PhoneGap和Apache Cordova之间的)唯一区别是下载的包的名字，这会持续一段时间。

15、Phonegap和cordova的关系

Adobe将会继续以Cordova加上PhoneGap Build和Adobe Shadow的组合提供PhoneGap。　早在2011年10月，Adobe收购了Nitobi Software和它的PhoneGap产品，然后宣布这个移动开发框架将会继续开源，并把它提交到Apache Incubator，以便完全接受ASF的管治。我们想知道为什么Adobe会收购Nitobi并开源PhoneGap，尤其是为什么PhoneGap还会继续，如果另一个项目应该完成它的工作?

最近Adobe出现了一系列的沟通问题，包括处理Flash、Flex、AIR和PhoneGap的过渡问题。几个月之后，Adobe终于搞清楚他们对Flash和Flex的规划了，现在发帖澄清围绕着PhoneGap的一些谜团。

PhoneGap的项目主管Brian LeRoux指出开源PhoneGap的决定在Adobe收购Nitobi之前就做出了，由于Adobe现在拥有PhoneGap商标，他们不得不换个名字。第一个选中的名字是Callback，毫无创意，因此再改一次，产品现在叫Apache Cordova。

虽然很多人认为PhoneGap这个名字不会再用，因为代码已在一个不同的名字下面，但现实的情况是，Adobe想继续在PhoneGap品牌下提供Cordova。在不久的将来，Adobe会把Cordova、PhoneGap Build(一个在线应用程序构建服务)和Adobe Shadow(一个检查和预览工具)打包起来，将来很可能还会向PhoneGap包添加更多移动开发工具。

目前还不清楚Adobe是否会巩固PhoneGap品牌，虽然开发者对它已经耳熟能详，或者是否换成另一个名字。此外，也不清楚他们是否会在Cordova代码之上构建私有代码，但LeRoux的帖子留下了线索：“目前(PhoneGap和Apache Cordova之间的)唯一区别是下载的包的名字，这会持续一段时间(加重语气)。”