Ionic開発者が犯す9つの最も一般的な間違い

公開: 2022-03-11

序章

Ionicは2年前から存在しています。これは、AngularJSに基づくハイブリッドアプリケーションを開発するための優れたツールセットです。 Ionicは現在非常に人気があり、100万を超えるアプリケーションが構築され、数千の開発者からなるコミュニティが拡大しています。

Ionicの最初のリリース以来、時間が経過し、Webテクノロジーとベストプラクティスはさまざまな方法で進化してきました。したがって、新しいプロジェクトを開始するときにどのパスをたどるかを判断するのは困難です。このような状況では、開発者は、アプリケーションの品質やチームの生産性に影響を与える可能性のあるミスを犯す可能性があります。

次のよくある間違いを読むことで、根本的な問題を回避し、Ionicを使用してパフォーマンスが高くスケーラブルなアプリケーションを作成するための鍵を得ることができます。

よくある間違い＃1：ネイティブスクロールを有効にするのを忘れる

ネイティブスクロールにより、IonicはサポートされているWebビューでスクロールイベントをリッスンできます。これにより、ブラウザに適切なスクロールイベントがなかったときに作成された、JavaScriptスクロールなしで、プルトゥリフレッシュ、リストの並べ替え、および無限スクロールが可能になります。

Ionic 1.2（2015年12月）以降、Androidではネイティブスクロールがデフォルトで有効になっています。非同期イベントによるスムーズなスクロールを保証するため、パフォーマンスとユーザーエクスペリエンスが大幅に向上します。

残念ながら、iOSには適切なイベントがないため、そのプラットフォームではネイティブスクロールがまだ有効になっていません。

1.2より前のバージョンを使用している場合は、 $ionicConfigProviderを使用してAndroidのネイティブスクロールを有効にできます。

 // Enable Native Scrolling on Android $ionicConfigProvider.platform.android.scrolling.jsScrolling(false);

また、任意のion-contentでoverflow-scrollディレクティブを使用して、任意のページでネイティブスクロールを有効または無効にすることができます。

 <!-- Disable Native Scrolling on this page only --> <ion-content overflow-scroll=”false”>

残念ながら、アプリケーションでアイテムの膨大なリストを表示できるcollection-repeatは、ネイティブスクロールではカバーできないことに注意してください。

よくある間違い＃2：プラットフォームとプラグインをインストールするためにIonicCLIを使用しない

Ionic CLIは、CordovaCLIに機能を追加します。プラットフォームとプラグインの永続性は、IonicCLIが追加する優れた機能です。

Cordova CLIの問題は、インストールするプラットフォームとプラグインがマシンにのみインストールされることです。チームで作業するときは、バグを回避するために、同じ環境、プラットフォーム、およびプラグインを共有する必要があります。 Cordova CLIを使用すると、開発者のマシン間でプロジェクトの同期を維持することが難しくなります。はい、プラットフォームとプラグインのフォルダーをコミットできますが、お勧めしません。

IonicCLIを使用してプラットフォームをインストールする場合ionic platform add iosおよびpluginsionicplugin ionic plugin add camera 、 package.jsonファイルは適切に編集されます。

プラットフォームとプラグインは、 cordovaPlatformsとcordovaPluginsのプロパティに保存されます。

 "cordovaPlugins": [ "[email protected]", "[email protected]", "[email protected]" ], "cordovaPlatforms": [ "android", "ios" ]

必要に応じてionic state restore （追加、削除、バージョン更新）を実行するだけで、他の開発者が新しいコードをプルするときに簡単に同期できるようになりました。

よくある間違い＃3：思考パフォーマンスは箱から出して来る

IonicはAngularJSに基づいており、デバイスのパフォーマンスがしばしば疑問視されます。この点について安心させていただきたいと思います。AngularJSの背景が少しあれば、Ionicを使用してワールドクラスのアプリケーションを作成できます。

完璧な例は、Ionicで構築され、900万以上のユーザーベース、700万以上のダウンロード、GooglePlayでの平均4.5つ星のSworkitアプリです。

AngularJSを最大限に活用したい場合は、プロジェクトを開始する前に学ぶ必要のあることがいくつかあります。

$ watch

ウォッチャーは、AngularJSでスコープの変更をリッスンすることに慣れています。 $watchには、基本的に4つのタイプがあります。 $watch (normal) 、 $watch (deep) 、 $watchCollection 、および$watchGroupです。

それらはそれぞれ異なり、適切なものを選択すると、パフォーマンスの面で大きな違いが生じる可能性があります。

$ watch（通常）

通常の$watchを使用すると、既存のオブジェクトプロパティまたは配列アイテムのみがチェックされます。 Objectプロパティの追加や、新しいアイテムの配列へのプッシュなどの浅い変更は処理されません。

 $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } });

$ watch（深い）

深い$watchは、ネストされたオブジェクトのプロパティのように、浅い変更と深い変更を処理します。この$watchを使用すると、変更を見逃すことはありません。ただし、深い$watchを使用すると、パフォーマンスに影響があります。注意して使用することをお勧めします。

 $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }, true);

$ watchCollection

$watchCollectionは、通常の$watchと深い$watchの中間と見なすことができます。オブジェクト参照の比較も機能しますが、Objectプロパティを追加したり、新しいアイテムを配列にプッシュしたりすることで、オブジェクトのプロパティを浅く監視できるという利点もあります。

 $scope.$watchCollection('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } });

$ watchGroup

AngularJS1.3で導入された$watchGroupを使用すると、一度に複数の式を監視できます。

$watchGroupは、通常の$watchと比較してアプリケーションのパフォーマンスを向上させない場合がありますが、複数のスコープ式を監視する場合に、より合成的であるという利点があります。

 $scope.$watchGroup([ 'watchExpression', 'watchExpression2', 'watchExpression3' ], function(newVals, oldVals) { if (newVals[0]) { // watchExpression has changed. } if (newVals[1]) { // watchExpression2 has changed. } if (newVals[2]) { // watchExpression3 has changed. } });

追跡者

track byは、 ng-repeatを使用するときに無駄なDOM操作を回避するために使用されます。実際、ダイジェストサイクルで、コレクションの少なくとも1つの要素が変更されていることが検出された場合、 ng-repeatはすべての要素を再レンダリングします。 DOM操作は常にアプリケーションのパフォーマンスに影響を与えるため、少ないほど良い結果が得られます。

コレクション全体の再レンダリングを回避し、更新が必要な要素のみを更新するには、一意の識別子を使用してtrack byを使用します。

 <!-- if items have a unique id --> <div ng-repeat="item in items track by item.id"></div> <!-- if not, you can use the $index that ng-repeat adds to every of its items --> <div ng-repeat="user in users track by $index"></div>

collection-repeatでtrack byを使用することは避けてください。

ワンタイムバインディング

ワンタイムバインディング、または::はAngular 1.3で導入され、アプリケーションのパフォーマンスに大きな影響を与えます。

基本的に、式でワンタイムバインディング::を使用すると、入力時に$watchersリストから削除されます。これは、データが変更されても式を更新できないことを意味します。

 <p>{{::user.firstName}}</p>

私たちのアドバイスは、アプリケーションのすべてのビューを調べて、更新できるものとできないものについて考え、それに応じて1回限りのバインディング::を使用することです。ダイジェストサイクルにとっては大きな安心になります。

残念ながら、画面に表示されるアイテムのリストがスクロール上で変化するため、 collection-repeatではワンタイムバインディングを使用できないことに注意してください。

AngularJSとIonicのパフォーマンスに関するヒントとコツについて詳しく知りたい場合は、UltimateAngularJSとIonicのパフォーマンスに関するチートシートを読むことをお勧めします。

よくある間違い＃4： `View Cache`ロジックと混同している

シングルページアプリケーションは、デフォルトではページをキャッシュしません。おそらく、AngularJSアプリケーションを使用してこれを経験したことがあります。このアプリケーションでは、ページ間を行き来するときにスクロールやユーザー入力が保存されません。

Ionicでは、デフォルトで10ページがキャッシュされ、これはグローバルに、またはプラットフォームごとに変更できます。

 // Globally $ionicConfigProvider.views.maxCache(5); // Per platforms $ionicConfigProvider.platform.android.views.maxCache(5); $ionicConfigProvider.platform.ios.views.maxCache(5);

これは優れた機能ですが、初心者がキャッシュされたページの処理方法を理解するのが難しい場合があります。

問題は、ユーザーがキャッシュされたページに戻ったときに、コントローラーが再度インスタンス化されないことです。これは、AngularJSアプリケーションとは異なり、すべてがそのページを離れたことがないようなものです。

このような状況で、ページのデータをどのように更新する必要がありますか？

コントローラのライフサイクルイベントの紹介

AngularJSと比較して、Ionicは多くのライフサイクルイベントを提供します。

 $scope.$on('$ionicView.loaded', function(){}); $scope.$on('$ionicView.unloaded', function(){}); $scope.$on('$ionicView.enter', function(){}); $scope.$on('$ionicView.leave', function(){}); $scope.$on('$ionicView.beforeEnter', function(){}); $scope.$on('$ionicView.beforeLeave', function(){}); $scope.$on('$ionicView.afterEnter', function(){}); $scope.$on('$ionicView.afterLeave', function(){});

これらのイベントは、ビューキャッシュを制御する場合に必要です。

たとえば、 $ionicView.loadedイベントは、ビューが最初にロードされたときにトリガーされます。このビューがキャッシュされている間は、ユーザーが戻ってきても、このイベントはトリガーされなくなります。これは通常、AngularJSの$viewContentLoadedイベントで行うのと同じ方法で変数を開始するために使用するイベントです。

キャッシュされているかどうかに関係なく、ビューに入るたびにデータをフェッチする場合は、 $ionicView.enterイベントを使用できます。

適切なイベントを適切なタイミングで使用することで、アプリケーションの使いやすさを向上させることができます。

パフォーマンスに関しては、キャッシュビューの使用はDOMのサイズにのみ影響します。ページがキャッシュされると、そのウォッチャーはすべて切断されるため、ページは、ページ上にあるさらにいくつかのDOM要素であり、再び使用されるのを待っています。

DOMのサイズは、優れたユーザーエクスペリエンスを実現するために重要ですが、最大10ページのキャッシュは問題なく機能するようです（もちろん、ページに何をロードするかによって異なります）。

よくある間違い＃5：Android用Crosswalkについて知らない

Androidのバージョンごとに、異なるWebView（アプリケーションを実行するブラウザー）が実行されます。パフォーマンスはデバイスによって異なり、古いAndroidデバイスでは非常に悪い場合があります。すべてのAndroidデバイスで同じ流動性と応答性を体験するために、Crosswalkをインストールできます。基本的に、最新のChromiumブラウザーがアプリケーションに組み込まれ、ARMとX86の両方でAPKあたり約20Mbが追加されます。

Crosswalkは、IonicCLIまたはCordovaCLIを使用して簡単にインストールできます。

 ionic plugin add cordova-plugin-crosswalk-webview

よくある間違い＃6：ブラウザ内でCordovaプラグインを実行しようとする

Ionicを使用している開発者の大多数は、アプリをiOSとAndroidで実行することを望んでいます。プラットフォームを追加した後、 ionic platform add ios android iosandroidといくつかのプラグionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts 、ルーキーな間違いは、ブラウザーでそれらをテストできると考えることです。できますが、適切なブラウザプラットフォームをインストールした後でのみ可能です。すべてのプラグインで機能するわけではないことに注意してください。

Cordovaのプラグインは、JavaScriptを介してネイティブデバイスAPIと対話することを目的としています。したがって、連絡先プラグインまたはデバイスオリエンテーションプラグインは、デバイスでのみ機能します。

ただし、デバイスでコードを簡単にテストし、コンピューターを介してリモートでデバッグすることができます。

Androidでのリモートデバッグ

デバイスを接続し、 adb devicesを実行してコンピューターによって正しく検出されることを確認します（Android SDKが必要です）。

ionic run androidを実行して、アプリをビルドし、デバイスにインストールします。アプリがデバイスで起動したら、Chrome開発ツール（コンピューター上） chrome://inspect/#devicesを使用してコンソールを開き、デバイスを検査します。

iOSでのリモートデバッグ

デバイスを接続し、コンピューターによって正しく検出されていることを確認します。 ionic run ios --deviceを実行して、アプリをビルドし、デバイスにインストールします。

アプリがデバイスで起動したら、[ Develop > Your iPhone > Your app ]をクリックして、（コンピューターで）Safari開発ツールを開きます。

ブラウザ内でCordovaプラグインを実行する

ブラウザ内でCordovaプラグインを実行することは、知っておくべき高度な機能です。 Ionic 1.2以降、ブラウザは公式にサポートされているため、iOSおよびAndroidプラットフォームをはるかに超えたクロスプラットフォームアプリケーションの時代が開かれます。

Cordova Browserプラットフォーム、Electron、および唯一のWebテクノロジー（JavaScript、HTML、およびCSS）を使用して、ブラウザーおよびデスクトップ（Windows、Linux、およびOSX）用のIonicアプリケーションを構築できるようになりました。

スターターキットはGithubで入手できます。

Cordovaブラウザプラットフォーム

ブラウザプラットフォームを使用すると、ブラウザ用のCordovaアプリケーションを作成できます。これは、ブラウザでもCordovaのプラグインを使用できることを意味します。

iOSまたはAndroidプラットフォームをインストールするのと同じ方法でインストールできます。

 cordova platform add browser

iOSまたはAndroidとまったく同じように、使用する前にアプリケーションをコンパイルする必要があります。

 cordova run browser

このコマンドはアプリをコンパイルし、デフォルトのブラウザを開きます。

クロスプラットフォームプラグイン

ネットワーク、カメラ、Facebookなどの多くのプラグインは、iOS、Android、ブラウザプラットフォームを同時にサポートします。すべて同じAPIを使用します。

ngCordova APIを使用して、デバイスがすべてのプラットフォーム（iOS、Android、ブラウザー、デスクトップ）でオンラインかオフラインかを知る方法があることを説明するには、次のようにします。

 // listen for Online event $rootScope.$on('$cordovaNetwork:online', (event, connectionType) => { this.isOnline = true; }); // listen for Offline event $rootScope.$on('$cordovaNetwork:offline', (event, connectionType) => { this.isOnline = false; });

これを念頭に置いて、単一のコードベースでどこでも実行できる製品を作成することを想像できます。

よくある間違い＃7：大規模アプリケーション向けのスターターキットアーキテクチャに従う

ionic start myappコマンドを使用すると、次のフォルダー構造でスタータープロジェクトが作成されます。

 www/ js/ app.js controllers/ aaa.js bbb.js ccc.js services/ xxx.js yyy.js zzz.js templates/ aaa.html bbb.html ccc.html

これはFolder-by-Type構造と呼ばれ、JavaScript、CSS、およびHTMLファイルがタイプごとにグループ化されます。初心者には簡単に思えるかもしれませんが、この種のアーキテクチャはすぐに手に負えなくなります。それは単にスケーリングしません。

タイプごとのフォルダ構造を使用しない理由は次のとおりです。

フォルダ内のファイルの数が膨大になる可能性があります
特定の機能のために変更する必要のあるすべてのファイルを見つけるのは難しい場合があります
機能に取り組むと、多くのフォルダが開かれます
スケーリングがうまくいかない場合、アプリが大きくなるほど、作業が難しくなります。

JavaScript、CSS、およびHTMLファイルが機能またはAngularJSモジュールごとにグループ化されているFolders-by-Feature構造を使用することをお勧めします。

 myNewFeature/ index.js (AngularJS module) config.js service.js controller.js index.html style.scss

Folders-by-Feature構造を使用する理由：

フォルダ内のファイルの数は少数に制限されています
特定の機能のために変更する必要があるすべてのファイルを見つけるのは簡単です-それらは同じフォルダーにあります
機能に独立して取り組むことができます
モジュールが何を表しているかを知るのは簡単です-フォルダ名で十分です
新しい機能を簡単に作成できます。既存の機能をコピーして貼り付けるだけです。
優れた拡張性により、チームの作業を困難にすることなく、必要な数の新機能を追加できます。

このアーキテクチャは、Angular2/Ionic2アプリケーションのデフォルトであるFolders-by-Component構造に近いことに注意してください。

よくある間違い＃8：イベントを`onscroll`にバインドし、 `requestAnimationFrame`を忘れる

この単一の落とし穴は通常、初心者の間違いですが、おそらくパフォーマンスに最悪の影響を与える可能性があります。このことを考慮：

 <ion-content on-scroll="getScrollPosition()"> // … </ion-content>

 $scope.getScrollPosition = function () { // heavy processing, like manipulating DOM // or anything that triggers a $digest() // will be called every ~80ms, // and will impact UX }

Ionicはこれらのアクションにスロットルを提供しますが、それでも非常に遅い場合があります。基本的に、ダイジェストループをトリガーするものはすべて延期する必要があり、スクロールの効果でもある重いペイントと一緒にトリガーしないでください。

開発者がスクロールイベント、特にアニメーションにバインドすることで達成しようとしている目標の多くは、別の方法を使用して達成することもできます。 requestAnimationFrameを見よ。

 var myElement = document.getElementById('content'); var elemOffsetFromParent = myElement.offsetTop; function onCapturedFrame() { if (window.scrollY >= elemOffsetFromParent) { customTweenFunction(myElement, options); } window.requestAnimationFrame(onCapturedFrame); } onCapturedFrame();

上記のコードは非常に単純な例であり、ユーザーが要素の上部を超えてスクロールしたかどうかを確認します。この例を使用する場合は、ブラウザー間の互換性のためにベンダー固有の代替手段を追加することを忘れないでください。基本的に、ブラウザに応じて、60 FPSまたは画面のリフレッシュレートで、最適な速度で実行されます。しかし、それは最適化されており、高性能アニメーションフレームワークはその単純な方法を利用しています。

また、HTMLノードのサイズと位置に関する情報を提供するelement.getBoundingClientRect()を調べることもできます。

よくある間違い＃9：イオンアプリケーションの手動プロトタイピング

Ionicには特定のデザインがあり、ほとんど視覚言語です。特にプロトタイプや初期段階の製品では、利用可能なコンポーネントとスタイルを利用することで、多くの時間と費用を節約できます。それらは実際にはかなり最小限であり、優れた美的感覚を持っています。

基本的な機能を備えたワイヤーフレームとモックアップの提示は、業界標準になっています。写真を見るのと、モバイルデバイスで動的コンポーネントを備えた実際のアプリを見るのは、2つのまったく異なるお茶です。多くのデザイナーやUX開発者は、AxureやBalsamiqなどのツールを使用しており、最小限の機能でワイヤーフレームをすばやく作成できます。

現在、Ionicの作成者は、Ionic開発者専用に作成された同様のツールをリリースしました。それはIonicCreatorと呼ばれています。ドラッグアンドドロップのWebインターフェイスを備えており、コアIonicが提供するほぼすべてのものをサポートします。それの素晴らしいところは、プロトタイプをいくつかの形式にエクスポートし、標準で動作するIonicコードを使用して、アプリケーションをビルドして共有できることです。このツールは独自仕様ですが、オプションの多くは無料で使用できます。

結論

Ionicは、誰も想像できなかった方法でハイブリッドアプリケーション業界に革命をもたらしました。ただし、時間の経過とともに、ベストプラクティスとツールは進化していませんでした。結果として、開発者が犯す可能性のある潜在的なミスの数が増加しました。

エキスパートのIonic開発者は、ワールドクラスのアプリケーションを複数のプラットフォームに同時に配信する明確な方法を持っています。その方法は、利用可能なツールを活用し、パフォーマンスを最優先事項として維持し、ベストプラクティスに従うことです。

この投稿は、素晴らしいIonicコミュニティ、Michal Mikolajczyk、Mike Hartington（Ionic Coreチーム）、Katie Ginder-Vogel（Ionicのマーケティングおよびコミュニケーションマネージャー）の創造性がなければ実現できなかったでしょう。どうもありがとうございました。