モバイル

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

前書き

イオン 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);

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

ionic platform add ios

残念ながらご注意くださいコレクション-繰り返し、アプリケーションでアイテムの膨大なリストを表示できるようにするため、ネイティブスクロールではカバーできません。

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

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

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

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

プラットフォームとプラグインはcordovaPluginsに保存されますおよび'cordovaPlugins': [ ' [email protected] ', ' [email protected] ', ' [email protected] ' ], 'cordovaPlatforms': [ 'android', 'ios' ] プロパティ：

ionic state restore

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

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

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

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

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

$ watch

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

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

$ watch（通常）

通常の$scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }); を使用する既存のオブジェクトプロパティまたは配列アイテムのみをチェックします。 Objectプロパティの追加や、新しいアイテムの配列へのプッシュなどの浅い変更は処理されません。

$watch

$ watch（深い）

深い$watchネストされたオブジェクトのプロパティのように、浅い変更と深い変更を処理します。これで$watch変更を見逃すことはありません。ただし、深い$scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }, true); を使用するパフォーマンスに影響があります。注意して使用することをお勧めします。

$watchCollection

$ watchCollection

$watch通常の$watchの中間と見なすことができますそして深い$scope.$watchCollection('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }); 。オブジェクト参照の比較も機能しますが、Objectプロパティを追加したり、新しいアイテムを配列にプッシュしたりすることで、オブジェクトのプロパティを浅く監視できるという利点もあります。

デザイン要素は何ですか

$watchGroup

$ watchGroup

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

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

track by

collection-repeatの使用は避けてください::に。

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

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

基本的に、ワンタイムバインディングを使用する$watchers式上でそれを

{{::user.firstName}}

から削除します入力時にリストします。これは、データが変更されても式を更新できないことを意味します。

::

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

残念ながら、View Cacheでは、画面に表示されるアイテムのリストがスクロール上で変化するため、1回限りのバインドは使用できません。

AngularJSとIonicのパフォーマンスのヒントとコツについてもっと知りたい場合は、究極のAngularJSとIonicパフォーマンスのチートシート。

よくある間違い＃4：`// Globally $ionicConfigProvider.views.maxCache(5); // Per platforms $ionicConfigProvider.platform.android.views.maxCache(5); $ionicConfigProvider.platform.ios.views.maxCache(5);` と混同する論理

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

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

$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(){});

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

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

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

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

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

$ionicView.loaded

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

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

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

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

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

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

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

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

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

ionic platform add ios android

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

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

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

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

Androidでのリモートデバッグ

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

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

画像：Chrome開発ツール

美容業界の価値はいくらですか

iOSでのリモートデバッグ

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

アプリがデバイスで起動したら、cordova platform add browser をクリックして（コンピューターで）Safari開発ツールを開きます。

画像：Safari開発ツール

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

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

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

スターターキットはで入手可能です Github 。

Cordova Browser Platform

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

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

cordova run browser

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; });

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

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

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

お使いのデバイスがすべてのプラットフォーム（iOS、Android、ブラウザー、デスクトップ）でオンラインかオフラインかを知る方法があることを説明するには、コルドバ火：

ionic start myapp

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

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

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 を使用する場合コマンドを実行すると、スタータープロジェクトが次のフォルダー構造で作成されます。

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

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

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

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

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

onscroll

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

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

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

イオンパラパラマンガアニメーション

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

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

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

requestAnimationFrame

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

開発者がスクロールイベント、特にアニメーションにバインドすることで達成しようとしている目標の多くは、別の方法を使用して達成することもできます。見よvar myElement = document.getElementById('content'); var elemOffsetFromParent = myElement.offsetTop; function onCapturedFrame() { if (window.scrollY >= elemOffsetFromParent) { customTweenFunction(myElement, options); } window.requestAnimationFrame(onCapturedFrame); } onCapturedFrame(); 。

element.getBoundingClientRect()

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

HTMLノードのサイズと位置に関する情報を提供する

|_+_|

を調べることもできます。

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

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

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

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

いつCFOを雇うか

画像：Ionic Creator

結論

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

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

この投稿は、驚くべきIonicコミュニティの創造性がなければ実現できなかったでしょう。 MichałMikołajczyk 、マイク・ハーティントン（Ionic Coreチーム）と KatieGinder-Vogel （マーケティング＆コミュニケーションマネージャー、Ionic）。どうもありがとうございました。