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

本文概述

• 提升变更检测性能
• 更快的DOM性能
• 新的Web动画API
• 内置本机滚动
• 改进的组件API
• 网络工作者简介
• TypeScript的优势
• 所有新的CLI v2
• 改良包装
• 错误报告工具简介
• 提前进行时间编译(AoT)的好处
• Ionic2是巨大的进步

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

自从最近发布了Ionic 2的稳定版本以来, 现在正是工程师分析和了解Ionic 2和Ionic 1之间差异的最佳时机。

在较高的层次上, Ionic 2是Angular> = 2.x的Ionic 1项目的完整重写。根据我2年以上使用Ionic 1的经验, 这实际上意味着什么。

提升变更检测性能

Ionic1基于Angular 1.x, Ionic2基于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在表中创建1000行需要126毫秒, 而使用Angular则要花费110％(264毫秒)。 1.x, 而Angular> = 2仅增加40％(177毫秒)。如你所见, Angular> = 2.x的性能优于Angular 1.x, 与React性能相似。

Ionic 2再次受益于此性能升级, 并且”免费”这样做。

新的Web动画API

Ionic 1和Ionic 2仍依赖CSS动画进行内部过渡和动画处理, 但由于Ionic 2基于Angular> = 2.x, 开发人员可以通过Angular动画系统访问新的Web动画(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滚动)。

到目前为止, JavaScript滚动是必需的, 但是Chromium(Android)和WKWebView(iOS)WebView已经发展, 现在支持本机滚动。仅在具有Ionic 1的Android上默认启用(自2015年12月起), 并在所有具有Ionic 2的平台上启用。

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

改进的组件API

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

• 纽扣
• 卡
• 图标
• list
• 菜单
• 资本金
• 工具列

组件API在Ionic 1和Ionic 2之间进行了一些更改。例如, Ionic 1Ionic纺纱器组件将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允许你的应用程序在后台JavaScript线程中运行脚本。工作人员可以在你的应用程序上下文之外执行繁琐的任务和HTTP请求(即, 不干扰用户界面)。如今, 所有主要的浏览器都支持Web Worker。

传统上, 所有框架都建立在窗口和文档对象之上, 并依赖于它们。但是, 在工人中都没有。通过将渲染器分离的新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, 你可以访问其所有独特功能(如界面, mixins等)和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)。拥有描述你正在操作的界面的接口很有趣, 尤其是在一个项目中有多个开发人员的情况下。如果你犯了一个错误, 例如, 使用一个布尔值作为总裁名称, 那么即使在编译发生之前, 你的IDE也会告诉你有问题。

在几乎所有你使用的IDE(Visual Studio Code, Atom, WebStorm等)中, 你都会找到用于启用自动完成功能, 类型检查和linter的插件。

TypeScript是Ionic 2的真正优势, 因为它可以使你的代码更易于理解, 可以帮助你避免键入错误, 并可以提高工作效率(通过自动完成功能, 自动导入模块, 悬停时的工具提示定义以及CTRL +单击以转到定义)。

所有新的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, 但你也可以使用汇总。

使用Ionic 2和CLI v2, 资产以及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来免费优化应用程序的大小和加载时间。

Ionic2是巨大的进步

总体而言, Ionic 2对于混合移动行业而言是巨大的进步。尽管Ionic 2组件集与Ionic 1组件类似, 但Ionic 2提供了许多工具并提高了性能。

确实, 借助TypeScript, ionic-app-scripts和Ionic CLI等工具, Ionic 2开发人员可以提高生产率, 产生更多可维护的代码, 并在发生运行时错误时立即得到警告。

相较于Ionic 1, Ionic 2还提供了免费的性能提升, 特别是通过消除或减少了其瓶颈(与变更检测, 动画, 加载时间等有关)。

有了Ionic 2, 你的应用程序将比以往更加原生。旋转一下。你会很高兴的。

相关：Ionic开发人员最常犯的9个错误