Ionic项目正在迅速普及. 超过27个,GitHub上有000颗星, 它已经成为全球50个最受欢迎的开源项目之一.

因为稳定的版本 Ionic 2 was recently announced，这是工程师分析和理解离子2和离子2之间差异的最佳时机 Ionic 1.

At a high level, Ionic 2 is a complete rewrite of the Ionic 1 project with Angular >= 2.x. 从我使用Ionic 1 2年多的经验来看，这在实际中意味着什么.

改进的变更检测性能

Ionic 1是基于Angular 1的.x, and Ionic 2 is based on Angular >= 2.x. The performance boost you get just by using Angular >= 2.单独的X是显著的.

With Angular 1.为了获得高性能的应用程序，需要大量深入的框架知识(比如 $watch一次性绑定，等等). With Angular >= 2.，x应用程序的性能非常好，开箱即用.

新版本的Angular放弃了著名的消化循环(每次更改时跟踪和测试应用程序的每个变量)。. Instead, Angular >= 2.x relies on Zone.js 跟踪应用程序更改(同步和异步).

Change Detection in Angular >= 2.x 是否值得探索以了解事物的工作原理. In Angular >= 2.X，变更检测总是从上到下执行. Using 正确的变更检测策略 (OnPush or Default)，如果您想控制应用程序的性能，那么在您自己的组件中使用此功能是至关重要的.

所有的离子2成分都使用 OnPush strategy, 这意味着变更检测不会一直执行，而是, instead, 只有当输入改变时. 该策略还避免了不必要的组件子树渲染. 它基本上已经为你优化了.

如果您想了解更多关于如何获得高性能Ionic1应用程序的信息，我建议您阅读本文 终极AngularJS和Ionic性能备忘单.

更快的DOM性能

Angular文档对象模型(DOM)操作已经有了很大的发展. 如果你想要一个响应式用户界面(UI)， DOM操作和 JavaScript性能 is important.

For example, creating 1,使用普通JavaScript，表中000行需要126毫秒, 使用Angular增加了110% (264ms). 1.x, and only 40% more (177ms) with Angular >= 2. As you can see, the performance of Angular >= 2.x比Angular 1更好.x，性能类似于React.

Ionic 2再次从性能升级中获益，而且是“免费的”。.

新的Web动画API

Ionic 1和Ionic 2仍然依赖CSS动画来实现内部的过渡和动画, but as Ionic 2 is based on Angular >= 2.X，开发人员可以访问新的 Web Animations (W3C) API via the 角度动画系统.

Web Animations API是一个JavaScript API，它为开发人员提供了访问浏览器动画引擎的权限. It is 并非所有浏览器都支持 然而，但与一个 polyfill 您现在就可以使用它，并享受最高效和最有前途的Web动画方式之一.

Source

The Angular >= 2.x动画API可以让你很容易地描述复杂的动画(进入和离开不同的状态或组动画)，并让你通过回调来访问动画的生命周期.

@Component({
    template: `
        

            

            {{hero.name}}
            
        
    `,
    animations: [
        触发(' flyInOut ',
            state('in'， style({opacity: 1, transform: 'translateX(0)'}))，
            transition('void => *', [
                style({
                    opacity: 0,
                    变换:“translateX(-100%)的
                }),
                animate('0.2s ease-in')
            ]),
            transition('* => void', [
                animate('0.' ' '，样式({
                    opacity: 0,
                    变换:“translateX(100%)的
                }))
            ])
        ])
    ]

})

内置本机滚动

原生滚动允许Ionic 2监听受支持的webview上的滚动事件. It makes
拉出刷新, 重新排序列表, or Infinite Scroll 可以不模拟这些事件(JavaScript滚动).

到目前为止，JavaScript滚动是必要的，但是 铬(Android) and WKWebView (iOS) WebViews已经进化，现在支持原生滚动. 它只在Android上默认启用Ionic 1(自2015年12月起)，在所有平台上启用Ionic 2.

原生滚动支持带来了更好的性能，并通过异步事件帮助确保平滑滚动来改善用户体验.

改进的组件API

离子2能让你接触到所有 components that made Ionic 1 famous, but are now improved and based on Angular >= 2.x. 以下是最常见的组件列表:

• Button
• Card
• Icon
• List
• Menu
• Modal
• Toolbar

组件API在Ionic 1和Ionic 2之间略有变化. 例如，离子1 ion-spinner components use icon 属性:

而离子2使用 name attribute:

As you can see, 如果你熟悉Ionic 1组件API, 你也会觉得使用离子2很舒服. 您只需要了解这些差异.

具有令人印象深刻的组件列表, 你能用离子1做的所有事情都能用离子2做, and even more.

网络工作者简介

Web Workers 允许应用程序在后台JavaScript线程中运行脚本. worker可以在应用程序上下文之外执行繁琐的任务和HTTP请求.e.，而不会干扰用户界面). 今天，网络工作者是 所有主流浏览器都支持.

传统上，所有的框架都是建立在，并依赖于 window and document objects. 然而，对于工人来说，两者都是不可用的. With the new Angular >=2 architecture that decoupled the renderer，在Web Workers(或任何其他平台)中运行应用程序变得更加容易.

Ionic 2开始尝试使用Web Workers ion-img component. For now, ion-img 只能在 VirtualScroll list. 它将图像HTTP调用委托给Web Workers，并且还支持延迟加载.e.，只检索和渲染视窗上的图像). 您的web应用程序现在只关注UI，让worker完成其余的工作.

下面是如何使用它的一个例子:

请记住，这只是一个开始，我们希望看到 更多的使用或网络工作者 在不久的将来.

打印稿优势

如果你一直在使用离子2，你已经知道它在使用 TypeScript. TypeScript是JavaScript ES2015的超集，可以编译成纯JavaScript. 与打印稿, 您可以访问它的所有独特功能(如接口), mixins, 以及ES2015的特性(比如箭头函数), generator, 多行字符串, and so on).

Let’s look at an example of an Angular >= 2.x组件，显示美国总统的姓名:

从“@angular/core”中导入{Component};

输出接口
    id: number;
    name: string;
}

@Component({
    选择器:“我的程序”,
    template: `
        
{{title}}
        
{{president.name}}
    `
})
导出类AppComponent {
    title:string = '美国总统';
    总统:i总统= {
        id: 44,
        姓名:“巴拉克·奥巴马”
    };
}

我们使用接口(IPresident)，描述了总统物体的形状. 具有描述您正在操作的内容的接口是很有趣的, 特别是当一个项目有几个开发人员的时候. 如果你犯了一个错误，比如，用了 boolean 为了总统的名字, 您的IDE甚至在编译发生之前就会告诉您出了问题.

在几乎任何您使用的IDE中(Visual Studio Code), Atom, WebStorm, or the like), 您将找到启用自动完成的插件, type checking, and a linter.

TypeScript是Ionic 2的一个真正优势, 因为它使你的代码更容易理解, 帮助你避免打字错误, 并帮助你提高工作效率(通过自动补全等功能), 自动导入模块, 悬停时的工具提示定义, and CTRL + Click 去看定义).

All New CLI v2

Ionic CLI v2增加了一种生成页面的方法, Components, Pipes, and Directives, 直接通过命令行.

例如，如果您想创建一个名为 MyPage，下面是你可以运行的命令:

$ ionic生成页面MyPage
√创建src/pages/my-page/my-page.html
√创建src/pages/my-page/my-page.ts
√创建src/pages/my-page/my-page.scss

该命令将遵循约定并为您创建三个文件:

模板的HTML文件. 组件样式的SASS文件. 用于组件逻辑的TypeScript文件.

这是生成的结果 my-page.ts 文件看起来像:

从“@angular/core”中导入{Component};
import {NavController, NavParams} from 'ionic-angular';

@Component({
  选择器:“page-my-page”,
  templateUrl:“页面.html'
})
导出类MyPagePage {

  构造函数(public navCtrl: NavController, public navParams: navParams) {}

  ionViewDidLoad () {
    console.日志(“ionViewDidLoad MyPagePage ');
  }

}

当您在团队中工作时，通过使用CLI强制执行约定是非常棒的. Angular 2.x和Ionic 2在帮助人们更好地理解Angular应用架构应该是什么方面做得很好. 当然，如果您愿意，您可以自由地偏离惯例.

改进包装

Ionic 1依赖于Gulp生态系统来捆绑应用, 而Ionic 2可以让你选择自己喜欢的工具. Ionic 2作为一个独立的项目提供了自己的工具集: ionic-app-scripts.

The ionic-app-scripts 是否基于开发人员根本不应该担心打包配置的想法. 你的项目与Ionic 2唯一相关的依赖项是 @ionic / app-scripts. 默认情况下，它使用 Webpack 但是你可以用 Rollup as well.

有了Ionic 2和CLI v2 assets，以及TypeScript文件，都在同一个目录中 src folder. The www 现在在每次构建期间生成，因此应该从版本控制跟踪中删除.

错误报告工具介绍

新的CLI还引入了一个很大的错误 Reporting tool. To get it, you need to install Ionic version >= 2.1:

$ NPM install -g ionic

$ ionic -v
#应该至少返回2.1.12

每次出现错误时，模态就会弹出一个有意义的信息. For example:

在开发过程中，尽快通知运行时错误是非常有价值的，Ionic 2在这方面做得很好.

提前编译(AoT)的好处

提前编译(AoT)是Angular生态系统中的一个小革命. 在Angular 2中引入.x, AoT允许在构建步骤中预编译模板, 而不是由浏览器实时编译.

虽然这看起来不是很大的区别，但实际上是. 使用AoT，我们不必在应用程序中附带模板编译器. 这有两个好处. First, 这个包会更小, 这直接影响网络，从而使您的应用程序下载速度更快. 其次，应用程序将更快地启动，因为不再需要动态编译模板.

Ionic 2充分利用了Angular 2.x AoT来优化您的应用程序的大小和加载时间免费.

离子2是一个巨大的进步

总的来说，Ionic 2是混合移动行业向前迈出的一大步. 虽然这组离子2组分与离子1组分相似, Ionic 2提供了许多工具和性能改进.

事实上，有了TypeScript这样的工具， ionic-app-scripts and Ionic CLI, 离子2开发人员 可以更有效率, 能产生更易于维护的代码吗, 并在运行时错误发生时立即发出警报.

相对于Ionic 1, Ionic 2也提供了免费的性能提升, 特别是通过消除或减少其瓶颈(与变更检测相关), animations, loading time, and so on).

使用Ionic 2，您的应用程序将比以往任何时候都更加原生. 开出去兜一圈. 你会很高兴这么做的.