Ionic2とIonic1：パフォーマンスの向上、新しいツール、そして大きな前進

Ionicプロジェクトの人気は急速に高まっています。 GitHubには27,000を超えるスターがあり、世界中で最も人気のあるオープンソースプロジェクトのトップ50の1つになりました。

また、Ionic 2の安定版が最近発表されたので、エンジニアがIonic2とIonic1の違いを分析して理解する絶好の機会です。

大まかに言えば、Ionic 2は、Angular>=2.xを使用してIonic1プロジェクトを完全に書き直したものです。 Ionic 1を使用した2年以上の経験から、これが実際的な意味で何を意味するかを次に示します。

変化検出パフォーマンスの向上

Ionic1はAngular1.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 ）を使用することが最も重要です。

すべてのIonic2コンポーネントはOnPush戦略を使用します。つまり、変更検出は常に実行されるのではなく、入力が変更されたときにのみ実行されます。 この戦略は、コンポーネントのサブツリーの不要なレンダリングも回避します。 基本的にはすでに最適化されています。

パフォーマンスの高いIonic1アプリケーションを入手する方法について詳しく知りたい場合は、このUltimateAngularJSおよびIonicパフォーマンスのチートシートを読むことをお勧めします。

DOMパフォーマンスの高速化

Angular Document Object Model（DOM）の操作は大きく進化しました。 リアクティブユーザーインターフェイス（UI）が必要な場合は、DOM操作とJavaScriptのパフォーマンスが重要です。

たとえば、テーブルに1,000行を作成するには、バニラJavaScriptでは126ミリ秒、Angularでは110％（264ミリ秒）かかります。 1.xであり、Angular> = 2の場合はわずか40％（177ms）多くなります。ご覧のとおり、Angular> = 2.xのパフォーマンスはAngular1.xよりも優れており、Reactのパフォーマンスと似ています。

Ionic 2もまた、このパフォーマンスアップグレードの恩恵を受けており、「無料」で提供しています。

新しいWebアニメーションAPI

Ionic1とIonic2は、内部遷移とアニメーションをCSSアニメーションに依存していますが、Ionic2はAngular>= 2.xに基づいているため、開発者はAngularアニメーションシステムを介して新しいWebアニメーション（W3C）APIにアクセスできます。

Web Animations APIは、開発者にブラウザのアニメーションエンジンへのアクセスを提供するJavaScriptAPIです。 まだすべてのブラウザでサポートされているわけではありませんが、ポリフィルを使用すると、今すぐ使用して、Webをアニメーション化するための最もパフォーマンスが高く有望な方法の1つを楽しむことができます。

ソース

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%)' })) ]) ]) ] })

組み込みのネイティブスクロール

ネイティブスクロールにより、Ionic2はサポートされているWebViewでスクロールイベントをリッスンできます。 させる
Pull to Refresh 、 List Reordering 、またはこれらのイベントをエミュレートせずに可能なInfinite Scroll （JavaScriptスクロール）。

これまでJavaScriptスクロールが必要でしたが、Chromium（Android）およびWKWebView（iOS）WebViewは進化し、ネイティブスクロールをサポートするようになりました。 これは、Ionic 1を搭載したAndroid（2015年12月以降）でデフォルトでのみ有効になり、Ionic2を搭載したすべてのプラットフォームで有効になります。

ネイティブスクロールのサポートは、非同期イベントのおかげでスムーズなスクロールを保証することにより、パフォーマンスを向上させ、ユーザーエクスペリエンスを向上させます。

改善されたコンポーネントAPI

Ionic 2を使用すると、Ionic 1を有名にしたすべてのコンポーネントにアクセスできますが、現在は改良されており、Angular>=2.xに基づいています。 最も一般的なコンポーネントのリストは次のとおりです。

• ボタン
• カード
• アイコン
• リスト
• メニュー
• モーダル
• ツールバー

コンポーネントAPIは、Ionic1とIonic2の間で少し変更されました。たとえば、Ionic 1 ion-spinnerコンポーネントは、スピナータイプのicon属性を使用します。

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

Ionic 2はname属性を使用しますが、次のようになります。

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

ご覧のとおり、Ionic 1コンポーネントAPIに精通している場合は、Ionic2コンポーネントも快適に使用できます。 これらの違いに注意する必要があります。

印象的なコンポーネントのリストにより、Ionic1で実行できることはすべてIonic2で実行できます。

Webワーカーの紹介

Webワーカーを使用すると、アプリケーションでバックグラウンドのJavaScriptスレッドでスクリプトを実行できます。 ワーカーは、アプリケーションコンテキストの外部で（つまり、ユーザーインターフェイスに干渉することなく）面倒なタスクやHTTP要求を実行できます。 現在、Webワーカーはすべての主要なブラウザーでサポートされています。

従来、すべてのフレームワークは、 windowオブジェクトとdocumentオブジェクトの上に構築され、それらに依存していました。 ただし、労働者ではどちらも利用できません。 rendererを分離した新しいAngular>=2アーキテクチャーを使用すると、Webワーカー（またはその他のプラットフォーム）内でのアプリケーションの実行が容易になります。

Ionic 2は、新しいion-imgコンポーネントでWebワーカーを使用する実験を開始しています。 現在のところ、 ion-imgはVirtualScrollリスト内でのみ使用できます。 画像のHTTP呼び出しをWebワーカーに委任し、遅延読み込みもサポートします（つまり、ビューポートで画像を取得してレンダリングするだけです）。 WebアプリケーションはUIのみに焦点を合わせ、残りはワーカーに任せるようになりました。

使用方法の例を次に示します。

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

これはほんの始まりに過ぎず、近い将来、より多くの使用法またはWebワーカーが見られることを覚えておいてください。

TypeScriptの利点

Ionic 2を使用している場合は、TypeScriptを使用していることをすでに知っています。 TypeScriptは、プレーンJavaScriptにコンパイルされるJavaScriptES2015のスーパーセットです。 TypeScriptを使用すると、その独自の機能（インターフェイス、ミックスインなど）と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など）には、オートコンプリート、型チェック、およびリンターを有効にするプラグインがあります。

TypeScriptは、コードをより理解しやすくし、タイプミスを回避し、生産性を高めるのに役立つため、Ionic 2の真の利点です（オートコンプリート、モジュールの自動インポート、ホバー時のツールチップ定義、 CTRL + Clickなどの機能を通じて）定義に移動します）。

すべての新しいCLIv2

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

このコマンドは規則に従い、次の3つのファイルを作成します。

テンプレートの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を使用して規則を適用することをお勧めします。 Angular2.xとIonic2は、Angularアプリアーキテクチャがどうあるべきかについての理解を深めるのに役立つ素晴らしい仕事をしています。 もちろん、必要に応じて、規則から自由に逸脱することができます。

改善されたパッケージング

Ionic 1はGulpエコシステムに依存してアプリケーションをバンドルしますが、Ionic2ではお気に入りのツールを選択できます。 Ionic 2は、独自のツールのコレクションを別個のプロジェクトとして提供します：ionic-app-scripts。

ionic-app-scriptsは、開発者がパッケージ構成についてまったく心配する必要がないという考えに基づいています。 プロジェクトがIonic2で持つ唯一のパッケージ関連の依存関係は、 @ionic/app-scriptsです。 デフォルトではWebpackを使用しますが、Rollupも使用できます。

Ionic2とCLIv2では、 assetsとTypeScriptファイルは同じsrcフォルダーにあります。 wwwはすべてのビルド中に生成されるため、バージョン管理の追跡から削除する必要があります。

エラー報告ツールの紹介

新しいCLIは、優れたエラー報告ツールも導入しました。 これを取得するには、Ionicバージョン>=2.1をインストールする必要があります。

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

これで、エラーが発生するたびに、モーダルに意味のある情報がポップアップ表示されます。 例えば：

開発中にできるだけ早くランタイムエラーについて通知を受けることは非常に価値があり、Ionic2はこの点で素晴​​らしい仕事をしました。

事前コンパイル（AoT）の利点

Ahead of TimeCompilation（AoT）はAngularエコシステムの小さな革命です。 Angular 2.xで導入されたAoTを使用すると、ブラウザーでオンザフライでコンパイルするのではなく、ビルドステップでテンプレートを事前にコンパイルできます。

これは大きな違いのようには見えないかもしれませんが、実際には違いがあります。 AoTを使用すると、テンプレートコンパイラをアプリケーションに同梱する必要はありません。 これには2つの利点があります。 まず、バンドルが小さくなり、ネットワークに直接影響を与えるため、アプリケーションのダウンロードが高速になります。 次に、テンプレートのオンザフライでのコンパイルが不要になるため、アプリのブートストラップが高速になります。

Ionic 2は、Angular 2.x AoTを最大限に活用して、アプリケーションのサイズと読み込み時間を無料で最適化します。

Ionic2は大きな前進です

全体として、Ionic2はハイブリッドモバイル業界にとって大きな前進です。 Ionic2コンポーネントのセットはIonic1コンポーネントに似ていますが、Ionic2は多くのツールとパフォーマンスの向上を提供します。

実際、TypeScript、 ionic-app-scripts 、Ionic CLIなどのツールを使用すると、Ionic 2開発者は生産性が向上し、保守性の高いコードを生成でき、実行時エラーが発生するとすぐにアラートを受け取ります。

Ionic 2は、特にボトルネック（変更の検出、アニメーション、読み込み時間などに関連する）を排除または削減することにより、Ionic1と比較して無料のパフォーマンス向上も提供します。

Ionic 2を使用すると、アプリケーションはこれまで以上にネイティブに感じられます。 スピンのためにそれを取り出してください。 あなたはあなたがしたことをうれしく思うでしょう。