Ionic 2 与 Ionic 1：性能提升、新工具和向前迈出的一大步

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

而且由于最近发布了 Ionic 2 的稳定版本，现在正是工程师分析和了解 Ionic 2 和 Ionic 1 之间差异的最佳时机。

在高层次上，Ionic 2 是对 Ionic 1 项目的完全重写，Angular >= 2.x。 根据我使用 Ionic 1 的 2 年以上经验，这就是这在实际中的含义。

提升变更检测性能

Ionic 1 基于 Angular 1.x，Ionic 2 基于 Angular >= 2.x。 仅使用 Angular >= 2.x 所获得的性能提升是显着的。

使用 Angular 1.x，要获得高性能的应用程序，需要大量深入的框架知识（如$watch 、一次性绑定等）。 Angular >= 2.,x 应用程序开箱即用。

新版本的 Angular 放弃了著名且受到谴责的摘要循环（在每次更改时跟踪和测试应用程序的每个变量）。 相反，Angular >= 2.x 依赖 Zone.js 来跟踪应用程序更改（同步和异步）。

Angular >= 2.x 中的变更检测值得探索，以了解事物在幕后是如何工作的。 在 Angular >= 2.x 中，更改检测总是从上到下执行。 如果您想控制应用程序的性能，在您自己的组件中使用正确的更改检测策略（ OnPush或Default ）至关重要。

所有 Ionic 2 组件都使用OnPush策略，这意味着不会一直执行更改检测，而是仅在输入更改时执行。 这种策略也避免了组件子树的不必要渲染。 它基本上已经为您优化了。

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

更快的 DOM 性能

Angular 文档对象模型 (DOM) 操作已经发展了很多。 如果您想要反应式用户界面 (UI)，DOM 操作和 JavaScript 性能很重要。

例如，使用原生 JavaScript 在表中创建 1,000 行需要 126 毫秒，而使用 Angular 则需要 110%（264 毫秒）。 1.x，而 Angular >= 2 仅增加 40% (177ms)。正如您所见，Angular >= 2.x 的性能优于 Angular 1.x，并且与 React 性能相似。

Ionic 2 再次受益于这种性能升级，而且是“免费”的。

新的网络动画 API

Ionic 1 和 Ionic 2 仍然依赖 CSS 动画进行内部转换和动画，但由于 Ionic 2 基于 Angular >= 2.x，开发人员可以通过 Angular 动画系统访问新的 Web Animations (W3C) API。

Web Animations API 是一种 JavaScript API，它为开发人员提供对浏览器动画引擎的访问。 并不是所有的浏览器都支持它，但是有了一个 polyfill，你现在就可以使用它，并享受最高效和最有前途的 Web 动画方法之一。

资源

Angular >= 2.x 动画 API 让您可以轻松地描述复杂的动画（从不同状态或组动画进入和离开），并允许您通过回调访问动画生命周期。

 @Component({ template: ` <ul> <li *ngFor="let hero of heroes" (@flyInOut.start)="animationStarted($event)" (@flyInOut.done)="animationDone($event)" [@flyInOut]="'in'"> {{hero.name}} </li> </ul> `, animations: [ trigger('flyInOut', [ state('in', style({ opacity: 1, transform: 'translateX(0)' })), transition('void => *', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition('* => void', [ animate('0.2s 10 ease-out', style({ opacity: 0, transform: 'translateX(100%)' })) ]) ]) ] })

内置原生滚动

原生滚动允许 Ionic 2 监听支持的 WebView 上的滚动事件。 它使
在不模拟这些事件（JavaScript 滚动）的情况下，可以拉到Pull to Refresh 、 List Reordering或Infinite Scroll 。

到目前为止，JavaScript 滚动是必要的，但 Chromium (Android) 和 WKWebView (iOS) WebViews 已经发展，现在支持原生滚动。 它仅在具有 Ionic 1 的 Android 上默认启用（自 2015 年 12 月起），并在具有 Ionic 2 的所有平台上启用。

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

改进的组件 API

Ionic 2 使您可以访问使 Ionic 1 出名的所有组件，但现在已经改进并基于 Angular >= 2.x。 以下是最常见的组件列表：

• 按钮
• 卡片
• 图标
• 列表
• 菜单
• 模态
• 工具栏

组件 API 在 Ionic 1 和 Ionic 2 之间发生了一些变化。例如，Ionic 1 ion-spinner组件使用icon属性作为微调器类型：

 <ion-spinner icon="bubbles"></ion-spinner>

而 Ionic 2 使用name属性：

 <ion-spinner name="bubbles"></ion-spinner>

如您所见，如果您熟悉 Ionic 1 组件 API，那么您也会对使用 Ionic 2 组件感到自在。 您只需要了解这些差异。

凭借令人印象深刻的组件列表，您可以在 Ionic 1 上做的所有事情都可以在 Ionic 2 上完成，甚至更多。

Web Workers 介绍

Web Workers 允许您的应用程序在后台 JavaScript 线程中运行脚本。 Worker 可以在应用程序上下文之外执行繁琐的任务和 HTTP 请求（即，不干扰用户界面）。 如今，所有主流浏览器都支持 Web Workers。

传统上，所有框架都建立在并依赖于window和document对象。 但是，在工人中两者都不可用。 使用解耦renderer的新 Angular >=2 架构，在 Web Workers（或任何其他平台）中运行应用程序变得更加容易。

Ionic 2 开始尝试将 Web Workers 与新的ion-img组件一起使用。 目前， ion-img只能在 VirtualScroll 列表中使用。 它将图像 HTTP 调用委托给 Web Workers，并且还支持延迟加载（即，仅在视口上检索和呈现图像）。 您的 Web 应用程序现在只关注 UI，让工作人员完成其余的工作。

以下是如何使用它的示例：

 <ion-img width="80" height="80" [src]="imageSrc"></ion-img>

请记住，这仅仅是开始，我们希望在不久的将来看到更多的使用或 Web Workers。

TypeScript 优势

如果您一直在使用 Ionic 2，那么您已经知道它使用的是 TypeScript。 TypeScript 是 JavaScript ES2015 的超集，可编译为纯 JavaScript。 使用 TypeScript，您可以访问其所有独特功能（如接口、mixin 等）和 ES2015 功能（如箭头函数、生成器、多行字符串等）。

让我们看一个显示美国总统姓名的 Angular >= 2.x 组件的示例：

 import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{president.name}}</h2> ` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; }

我们使用描述总统对象形状的接口（ IPresident ）。 拥有描述您正在操作的内容的接口很有趣，尤其是在一个项目中有多个开发人员的情况下。 如果您犯了错误，例如，对总统名称使用boolean ，您的 IDE 甚至会在编译发生之前告诉您有问题。

在您使用的几乎任何 IDE（Visual Studio Code、Atom、WebStorm 等）中，您都会找到启用自动完成、类型检查和 linter 的插件。

TypeScript 是 Ionic 2 的真正优势，因为它使您的代码更易于理解，帮助您避免类型错误，并帮助您提高工作效率（通过自动完成、自动导入模块、悬停时的工具提示定义和CTRL + Click to转到定义）。

全新 CLI v2

Ionic CLI v2 添加了一种直接通过命令行生成页面、组件、管道和指令的方法。

例如，如果您想创建一个名为MyPage的新页面，您可以运行以下命令：

 $ ionic generate page MyPage √ Create src/pages/my-page/my-page.html √ Create src/pages/my-page/my-page.ts √ Create src/pages/my-page/my-page.scss

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

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

这是生成my-page.ts文件的样子：

 import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-my-page', templateUrl: 'my-page.html' }) export class MyPagePage { constructor(public navCtrl: NavController, public navParams: NavParams) {} ionViewDidLoad() { console.log('ionViewDidLoad MyPagePage'); } }

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

改进的包装

Ionic 1 依赖 Gulp 生态系统来捆绑应用程序，而 Ionic 2 允许您选择自己喜欢的工具。 Ionic 2 提供了自己的工具集合作为一个单独的项目：ionic-app-scripts。

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

使用 Ionic 2 和 CLI v2， assets以及 TypeScript 文件位于同一个src文件夹中。 www现在在每次构建期间生成，因此应该从版本控制跟踪中删除。

错误报告工具介绍

新的 CLI 还引入了一个很棒的错误报告工具。 要获得它，您需要安装 Ionic 版本 >= 2.1：

 $ npm install -g ionic $ ionic -v # should return at least 2.1.12

现在，每次出现错误时，都会弹出一个模态框，其中包含有关它的有意义的信息。 例如：

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

提前编译 (AoT) 的好处

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

虽然这可能看起来没什么大区别，但实际上确实如此。 使用 AoT，我们不必随应用程序一起提供模板编译器。 这有两个优点。 首先，捆绑包会更小，这会直接影响网络，从而使您的应用程序下载速度更快。 其次，应用程序将启动更快，因为不再需要即时编译模板。

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

Ionic 2 向前迈出了一大步

总的来说，Ionic 2 是混合移动行业向前迈出的一大步。 尽管 Ionic 2 组件集与 Ionic 1 组件相似，但 Ionic 2 提供了很多工具和性能改进。

事实上，借助 TypeScript、 ionic-app-scripts和 Ionic CLI 等工具，Ionic 2 开发人员可以提高工作效率，生成更易于维护的代码，并在运行时错误发生时立即收到警报。

相对于 Ionic 1，Ionic 2 还提供了免费的性能提升，特别是通过消除或减少其瓶颈（与更改检测、动画、加载时间等相关）。

使用 Ionic 2，您的应用程序将比以往任何时候都更加原生。 拿出来转一圈。 你会很高兴你做到了。