Ionic系列——Ionic介绍

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

二、混合应用开发介绍

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

一、HTML五、Native或混合型应用开发全接触     http://blog.jobbole.com/21298/   基础
二、Hybrid App开发实战    http://www.infoq.com/cn/articles/hybrid-app-development-combat/   高级  介绍了混合开发的三种模式，工具，趋势
三、别闯进Hybrid App的误区    http://www.infoq.com/cn/articles/hybridapp-misunderstanding?utm_source=infoq&utm_medium=related_content_link&utm_campaign=relatedContent_articles_clk  
四、原生应用、Web应用、混合应用优缺点分析    http://mobile.51cto.com/app-show-410661.htm

三、为何选择Hybrid开发模式

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

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

•考虑将来——HTML5的可用性和功能都在迅速改进。许多分析师预测，它可能会成为开发前端App的默认技术。 若是用HTML来编写App的大部分代码，而且只有在须要时才使用Native代码，公司就能确保他们今天的投入在明天不会变得过期，由于HTML功能变 得更丰富，能够知足现代企业一系列更普遍的移动要求。

四、混合应用开发误区

一、为了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的时代已经到来，若是咱们不这么作就变土鳖了，错过这场技术革新的大潮，终将被这个时代所淘汰”的话真不是一个有责任心的工程师应该发出的声音。
二、忽略关键因素
       在谈到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开发老是默认有一个稳定的网络环境，所以在对于不稳定网络环境问题的处 理上也有所欠缺。没有明确的对于低速网络或不稳定网络访问的处理，在不少状况下这些页面也会很是不给面子。
三、富交互致使体验差
      这里所谓的体验问题一分为二：一是与手机平台默认交互习惯不一致的体验，二是与一样功能Native界面存在的体验差距。
      不管在Android仍是iOS平台上，都有各自的一套交互习惯，包括视觉风格，界面切换，操做习惯等，与Web习惯彻底不一样。若是使用Web方式开发富交互的页面，或多页面功能就会出现这样的问题。
      以iOS界面切换为例，系统风格是新界面自右向左推入，后退时界面自左向右推出，而旧界面保持状态。Web开发的默认习惯则是刷新页面，不管新载入 页面或是后退，都会对页面进行刷新。所以使用Web模式开发多界面功能就面临这样的交互习惯差别，形成体验上的损失。固然Web方式也可模拟Native 的交互方式，但这样的模拟首先提升了开发成本，有悖于最初的高效原则，从效果上看，也很难达到Native的流畅性。
      另外一个方面，也是上述提到的与Native相比，一样的功能在性能上存在巨大差距。Web界面上JS对HTML Node的操做须要消耗大量的CPU资源，手机CPU的性能还不能与PC相提并论，就算在智能手机之间，硬件水准也良莠不齐，一个能够在iPhone 5上流畅运行的界面，跑到三星S III上极可能就卡住不动了。因此咱们常常能够发现一些富交互页面上的操做没法达到使人满意的流畅度，而流畅度也正是用户评价一款App优劣的最直观因 素。
四、跨平台
       一次开发，跨平台运行是Web的优点，这也是不少App采用Hybrid模式的重要缘由之一。兼容性问题在Web开发过程当中每每不被关注，但当下智能手机的软硬件版本众多，兼容性绝对是一个不容忽视的问题。
       以Android手机为例，诸多主流品牌都有各自定制过的操做系统，浏览器内核对JS和CSS的解析，事件处理等方面都存在区别。以HTC One为例重叠在一块儿的层在某些状况下会对点击事件透传，而其余多数平台则不存在这个问题。而且目前移动平台的开发框架尚未彻底成熟，能够很好的解决兼 容性问题。因此就要求开发者在开发过程当中要对兼容性作充分测试，对于某些特殊版本进行特殊处理。
       即便在相对统一的iOS平台，不一样版本之间也存在较大差别。例如：在iOS 4.x版本中CSS甚至不支持position fix的属性，4英寸屏幕的设备没法很好的支持apple-mobile-web-app-capable属性，等等。
五、交互一致性
       交互一致性是一个很是容易被误读的概念，“一致性”常常被理解为同一个应用在各类平台和场景下要有一致性的体验。我认为在移动平台开发过程当中，“一 致性”应该是App视觉和交互习惯与其运行平台的习惯保持一致。而Web开发“一次开发，跨平台运行”的特性与此存在必定程度上的冲突。
       以“返回上一页面”的操做为例，在iOS平台上在页面顶部始终存在一个44像素高的导航栏，左侧有一个返回按钮用于返回操做，而Android平台 则习惯使用设备提供的返回键操做。这个返回按钮在iOS平台能够经过绝对地址的方式链接到任何其余页面，而在Android平台返回按钮和设备的返回键则 可能指向不一样的位置。
       例如这样的一个流程：首页->列表->筛选->刷新过的列表，此时的返回操做被指望是导向首页，则页面上的返回按钮能够经过绝对连接的方式实现，而Android设备的返回键则只能返回上一个筛选页面，再次返回是筛选前的列表页。

五、Hybrid开发总结

    移动端开发不能肯定哪种是最佳的开发方式，由于不存在最佳的开发方式，每种方式都有天生的优势和局限性，找到最适合本企业需求的一种开发方式是关键。
    过分依赖Hybrid方案会形成Web前端开发成本快速上升，甚至形成 App总体体验降低，甚至形成功能缺失。不要为了Hybrid而Hybrid，控制好方案中Native与Web的边界。

六、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/

七、Ionic开发现状

    一、使用Ionic框架，能够有效利用AngularJs的特性，极大的提供HTML5应用开发效率，质量，模块化程度。根据咱们的经验，使用ionic开 发，比使用基于jquery的移动框架，一样功能代码量会减小50%，开发速度提升一倍以上。
    二、与原生开发相比，不考虑原生应用开发不能跨平台的因素，一样 是在iOS上开发，使用ionic要比使用oc开发快一倍以上。用户体验方面，在iOS和高端Android设备（1500元以上的手机，平板）上，与原 生应用差异不大，通常用户没法分辨出是HTML5的。
    三、目前来看，市场竞争激烈的App，暂时还不适合用HTML5开发，即便HTML5彻底能实现业务需 求，例如去哪儿，携程这种竞争性的App。但在企业应用领域，使用ionic有明显优点，咱们已经用ionic框架上线了iPad和android Pad企业应用。

八、Ionic框架包含三部份内容

Ionic   Css样式     http://www.ionic.wang/css_doc-index.html
Ionic   AngularJS 扩展     http://www.ionic.wang/js_doc-index.html
Ionic   Icon库      http://ionicons.com/

九、Ionic学习资料

•汇智网上的Ionic教程
•Ionic中不少东西官网文档并无写的很全，因此要看源码
•GitHub上找项目源码学习

十、Angular使用场合

适合：
一、单页面应用程序
二、Angular更适合于CRUD的管理系统开发。
三、也很是适合模块化，分层化，数据绑定
四、hybrid开发神器

不适合：
一、内容网站，须要SEO的。(SEO目前也有了prerender解决方案)二、交互频繁的，如游戏之类交互体验网站。（单页面应用程序）
三、太过于简单的页面。（由于要考虑mvc,注入等，就会笨重）

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

十一、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 应用扩展指令
http://www.oschina.net/translate/15-directives-to-extend-your-angular-js-apps

Angular样例 http://www.ngnice.com/showcase/#/input/file

十二、Angular2介绍

    移动：新的版本将专一于移动应用的开发。依据是它更容易处理桌面方面的事情，一旦挑战涉及到移动（性能、加载时间），注重这方面会使问题获得解决。
    模块化：各个模块将从Angular的核心中移除，从而得到更好的性能。这意味着你能够选择你须要的零件。
    现代化：Angular 2.0将把ES6和“常青”现代浏览器（自动更新到最新版本）做为目标。这意味着开发者能够专一于业务领域相关的代码。

    AngularJS 2.0会有哪些新特性？  http://www.csdn.net/article/2015-03-03/2824087

    Angular2官网    https://angular.io/

1三、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

1四、Cordova介绍

    Cordova提供了一组设备相关的API，经过这组API，移动应用可以以JavaScript访问原生的设备功能，如摄像头、麦克风等。
    Cordova支持以下移动操做系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
    Cordova是贡献给Apache后的开源项目，是从PhoneGap中抽出的核心代码，目前(PhoneGap和Apache Cordova之间的)惟一区别是下载的包的名字，这会持续一段时间。

1五、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之间的)惟一区别是下载的包的名字，这会持续一段时间(加剧语气)。”

1六、ng-cordova介绍

    ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展，让开发者能够方便的在HybridApp开发中调用设备能力，便可以在AngularJs代码中访问设备能力Api。    在cordova插件的sucess和error js回调方法中，是没法使用 angularjs的$scope对象和注入的方法的，只能访问全局的方法和变量，这样会致使不少麻烦，必须使用传统的js方法写不少难看的代码。使用 ngCordova应该能够解决这个问题。    Ng-cordova官网   http://ngcordova.com/docs/plugins/