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，您的應用程序將比以往任何時候都更加原生。 拿出來轉一圈。 你會很高興你做到了。