introduction

Ionique existe depuis deux ans maintenant. C'est un excellent ensemble d'outils pour développer des applications hybrides basées sur AngularJS . Ionic est extrêmement populaire en ce moment, avec plus d'un million d'applications construites et une communauté croissante de milliers de développeurs .

Depuis la première version d'Ionic, le temps a passé et les technologies Web et les meilleures pratiques ont évolué de plusieurs manières. Par conséquent, il est difficile de déterminer le chemin à suivre lors du démarrage d'un nouveau projet. Dans ces conditions, les développeurs peuvent commettre des erreurs potentiellement impactant la qualité de leurs applications ou la productivité de leur équipe.

En lisant les erreurs courantes suivantes, vous aurez les clés pour éviter les problèmes fondamentaux et créer des applications performantes et évolutives avec Ionic.

Erreur courante n ° 1: Oublier d'activer le défilement natif

Défilement natif permet à Ionic d'écouter les événements de défilement sur les vues Web prises en charge. Cela fait Tirer pour rafraîchir , Réorganisation de la liste et DEFILEMENT infini possible sans le défilement JavaScript, qui a été créé à une époque où les navigateurs manquaient d'événements de défilement appropriés.

Le défilement natif est activé par défaut sur Android depuis Ionic 1.2 (décembre 2015). C'est une énorme amélioration des performances et de l'expérience utilisateur, car elle garantit un défilement fluide en raison d'événements asynchrones.

Malheureusement, en raison du manque d'événements appropriés sur iOS, le défilement natif n'est pas encore activé pour cette plate-forme.

Si vous utilisez une version antérieure à 1.2, vous pouvez activer le défilement natif pour Android en utilisant $ionicConfigProvider:

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

Vous pouvez également activer ou désactiver le défilement natif sur n'importe quelle page en utilisant overflow-scroll directive sur n'importe quel ion-content:

ionic platform add ios

Veuillez noter que malheureusement collection-répétition , qui permet à votre application d'afficher d'énormes listes d'éléments, ne peut pas être couvert par le défilement natif.

Erreur courante n ° 2: ne pas utiliser la CLI Ionic pour installer des plates-formes et des plugins

CLI ionique ajoute des fonctionnalités à la CLI Cordova . La persistance des plates-formes et des plugins est une fonctionnalité intéressante ajoutée par Ionic CLI.

Le problème avec Cordova CLI est que les plates-formes et les plugins que vous installez ne sont installés que sur votre machine. Lorsque vous travaillez en équipe, pour éviter les bogues, vous souhaitez partager le même environnement, les mêmes plates-formes et les mêmes plugins. Avec Cordova CLI, il est plus difficile de synchroniser le projet entre les machines des développeurs. Oui, vous pouvez valider les dossiers de plates-formes et de plugins, mais ce n'est pas recommandé.

Lors de l'utilisation de Ionic CLI pour installer des plates-formes ionic plugin add camera et plugins package.json, les cordovaPlatforms le fichier est correctement édité.

Les plates-formes et les plugins sont stockés dans cordovaPlugins et 'cordovaPlugins': [ ' [email protected] ', ' [email protected] ', ' [email protected] ' ], 'cordovaPlatforms': [ 'android', 'ios' ] Propriétés:

ionic state restore

Il est désormais facile pour les autres développeurs de se synchroniser lors de l'extraction d'un nouveau code, simplement en exécutant $watch si nécessaire (ajout, suppression ou mise à jour de version).

Erreur courante n ° 3: penser que la performance sort de la boîte

Ionic est basé sur AngularJS, et les performances de l'appareil sont souvent remises en question. Je voudrais vous rassurer sur ce point: avec un peu de fond AngularJS, vous pouvez créer des applications de classe mondiale avec Ionic.

L'exemple parfait est Application Sworkit qui est construit avec Ionic, a une base d'utilisateurs de 9M +, 7M + de téléchargements et une moyenne de 4,5 étoiles sur Google Play.

Si vous souhaitez tirer le meilleur parti d'AngularJS, voici quelques points à apprendre avant de démarrer votre projet.

$ regarder

Les observateurs sont habitués à écouter les changements de portée dans AngularJS. Il existe essentiellement quatre types de $watch (normal): $watch (deep), $watchCollection, $watchGroup et $watch.

Chacun d'entre eux est différent et choisir le bon peut faire une énorme différence en termes de performances.

$ watch (normal)

En utilisant la normale $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }); vérifiera uniquement les propriétés d'objets ou les éléments de tableau existants. Les modifications superficielles, comme l'ajout d'une propriété Object ou le transfert d'un nouvel élément dans un tableau, ne seront pas prises en charge.

$watch

$ watch (profond)

Le profond $watch prend en charge les changements superficiels et les changements profonds, comme les propriétés des objets imbriqués. Avec ceci $watch vous êtes sûr de ne manquer aucune modification. Cependant, en utilisant deep $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }, true); a des implications sur les performances. Je conseillerais de l'utiliser avec prudence.

$watchCollection

$ watchCollection

$watch peut être considérée entre la normale $watch et le profond $scope.$watchCollection('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }); . Il fonctionne également en comparant les références d'objet, mais avec l'avantage de surveiller également les propriétés de votre objet en ajoutant une propriété Object ou en poussant un nouvel élément dans un tableau.

capteur de vitesse et direction du vent arduino

$watchGroup

$ watchGroup

Introduit dans AngularJS 1.3, $watchGroup permet de regarder plusieurs expressions à la fois.

Alors que $watch peut ne pas améliorer les performances de votre application par rapport à la normale $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. } }); , il a l'avantage d'être plus synthétique lors de l'observation de plusieurs expressions d'étendue.

track by

Suivre par

Le ng-repeat est utilisé pour éviter les manipulations inutiles du DOM lors de l'utilisation de ng-repeat. En effet, si le cycle de condensé constate qu'au moins un élément de votre collection a changé, track by rendra à nouveau tous les éléments. La manipulation DOM a toujours des effets sur les performances de l'application, donc moins vous en avez, mieux c'est.

Pour éviter de restituer la collection complète et ne mettre à jour que les éléments à mettre à jour, utilisez avec un identifiant unique.

track by

Évitez simplement d'utiliser collection-repeat sur ::.

Liaison unique

Liaison unique, ou :: a été introduit dans Angular 1.3 et a un impact réel sur les performances de votre application.

Fondamentalement, en utilisant une liaison unique $watchers sur une expression la supprimera de

{{::user.firstName}}

liste lorsqu'elle est remplie. Cela signifie que l'expression ne pourra pas être mise à jour même si les données changent.

::

Notre conseil est de parcourir toutes les vues de votre application et de réfléchir à ce qui pourrait ou non être mis à jour, et d'utiliser la liaison unique collection-repeat en conséquence. Ce sera un énorme soulagement pour le cycle de digestion.

Veuillez noter que malheureusement, la liaison ponctuelle ne peut pas être utilisée dans un View Cache, car la liste des éléments affichés à l'écran change sur le défilement.

Si vous souhaitez en savoir plus sur les trucs et astuces de performance AngularJS et Ionic, je vous recommande de lire le Aide-mémoire sur les performances Ultimate AngularJS et Ionic .

Erreur commune n ° 4: avoir des confusions avec le // Globally $ionicConfigProvider.views.maxCache(5); // Per platforms $ionicConfigProvider.platform.android.views.maxCache(5); $ionicConfigProvider.platform.ios.views.maxCache(5); Logique

Les applications à page unique ne mettent pas les pages en cache par défaut. Vous l'avez probablement expérimenté avec les applications AngularJS, où le défilement ou les entrées utilisateur ne sont pas enregistrés lorsque vous naviguez entre les pages.

Avec Ionic, dix pages sont mises en cache par défaut, et cela peut être modifié globalement ou par plateforme.

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

Il s'agit d'une fonctionnalité intéressante, mais il est parfois difficile pour les débutants de comprendre comment gérer les pages mises en cache.

société c vs société s vs société de personnes

Le problème est que lorsque l'utilisateur retourne à une page mise en cache, le contrôleur n'est pas ré-instancié à nouveau, ce qui est différent des applications AngularJS, et tout est comme si vous n'aviez jamais quitté cette page.

Dans ces conditions, comment mettre à jour les données de la page?

Présentation des événements du cycle de vie du contrôleur

Par rapport à AngularJS, Ionic propose de nombreux événements du cycle de vie:

$ionicView.loaded

Ces événements sont nécessaires si vous souhaitez contrôler le cache de vue.

$viewContentLoaded L'événement, par exemple, est déclenché la première fois qu'une vue est chargée. Cet événement ne sera plus déclenché tant que cette vue est mise en cache, même si l'utilisateur y revient. C'est généralement l'événement que vous utiliseriez pour lancer des variables de la même manière que vous le faites avec $ionicView.enter événement dans AngularJS.

Si vous souhaitez récupérer des données à chaque fois que vous entrez dans une vue, mise en cache ou non, vous pouvez utiliser le ionic plugin add cordova-plugin-crosswalk-webview un événement.

En utilisant le bon événement au bon moment, vous pouvez améliorer la convivialité de l'application.

En ce qui concerne les performances, l'utilisation de la vue du cache n'a d'incidence que sur la taille du DOM. Lorsqu'une page est mise en cache, tous ses observateurs sont déconnectés et la page n'est donc que quelques éléments DOM supplémentaires se trouvant sur votre page en attente d'être réutilisés.

La taille du DOM est importante pour avoir une excellente expérience utilisateur, mais la mise en cache jusqu'à dix pages semble fonctionner correctement (bien sûr, en fonction de ce que vous chargez dans vos pages).

Erreur courante n ° 5: ne pas connaître Crosswalk pour Android

Chaque version d'Android exécute une WebView différente (un navigateur qui exécute votre application). Les performances sont différentes d'un appareil à l'autre et peuvent être très mauvaises sur les anciens appareils Android. Pour obtenir la même expérience de fluidité et de réactivité sur tous les appareils Android, vous pouvez installer Passage clouté . Il intègre essentiellement le dernier navigateur Chromium dans votre application et ajoute environ 20 Mo par APK, à la fois ARM et X86.

Crosswalk peut être installé simplement en utilisant Ionic CLI ou Cordova CLI:

ionic platform add ios android

Erreur commune n ° 6: essayer d'exécuter des plugins Cordova dans le navigateur

La majorité des développeurs utilisant Ionic voudront que leur application s'exécute sur iOS et Android. Après avoir ajouté les plates-formes ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts et certains plugins adb devices, une erreur rooky est de penser que vous pouvez les tester dans le navigateur. Eh bien, vous pouvez, mais seulement après avoir installé la plate-forme de navigateur appropriée. Gardez à l'esprit que cela ne fonctionne pas avec tous les plugins.

Les plugins de Cordova sont destinés à interagir avec l'API native de l'appareil via JavaScript. Le plugin de contact ou le plugin d'orientation de l'appareil ne fonctionnera donc que sur un appareil.

Cependant, vous pouvez facilement tester votre code sur un appareil et le déboguer à distance via votre ordinateur.

Débogage à distance sur Android

Branchez votre appareil et assurez-vous qu'il est correctement détecté par votre ordinateur en exécutant ionic run android (Le SDK Android est requis).

Créez votre application et installez-la sur votre appareil en exécutant chrome://inspect/#devices. Une fois votre application lancée sur l'appareil, ouvrez la console via les outils de développement Chrome (sur votre ordinateur) ionic run ios --device et inspectez votre appareil.

Débogage à distance sur iOS

Branchez votre appareil et assurez-vous qu'il est correctement détecté par votre ordinateur. Créez votre application et installez-la sur votre appareil en exécutant Develop > Your iPhone > Your app.

Une fois votre application lancée sur l'appareil, ouvrez les outils de développement Safari (sur votre ordinateur) en cliquant sur cordova platform add browser :

Exécutez les plugins Cordova dans le navigateur

L'exécution des plugins Cordova dans le navigateur est une fonctionnalité avancée que vous devez connaître. Depuis Ionic 1.2, le navigateur est officiellement pris en charge, il ouvre donc l'ère des applications multiplateformes bien au-delà des plateformes iOS et Android.

Avec la plateforme Cordova Browser, Électron et uniquement les technologies Web (JavaScript, HTML et CSS), nous pouvons désormais créer des applications Ionic pour le navigateur et le bureau (Windows, Linux et OSX).

Un kit de démarrage est disponible sur Github .

Plateforme de navigateur Cordova

Avec la plate-forme Browser, vous pouvez créer des applications Cordova pour le navigateur. Cela signifie que vous pouvez également utiliser les plugins de Cordova sur le navigateur.

Il peut être installé de la même manière que vous installez les plates-formes iOS ou Android:

cordova run browser

Votre application doit être compilée avant utilisation exactement comme avec iOS ou 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; });

Cette commande compilera votre application et ouvrira votre navigateur par défaut.

Plugins multiplateformes

Beaucoup de plugins tels que le réseau, l'appareil photo et Facebook prennent en charge iOS, Android et la plate-forme de navigateur en même temps - le tout avec la même API.

Pour illustrer qu'il existe un moyen de savoir si votre appareil est en ligne ou hors ligne sur toutes les plateformes (iOS, Android, navigateur et bureau) en utilisant par Cordova FEU:

ionic start myapp

Dans cet esprit, vous pouvez maintenant imaginer créer des produits qui peuvent fonctionner n'importe où avec une seule base de code.

Erreur commune n ° 7: suivre l'architecture du kit de démarrage pour les applications à grande échelle

Lors de l'utilisation de 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 commande, un projet de démarrage est créé avec la structure de dossiers suivante:

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

C'est ce qu'on appelle une structure dossier par type, dans laquelle les fichiers JavaScript, CSS et HTML sont regroupés par types. Comme cela peut sembler facile pour les débutants, ce type d'architecture devient rapidement incontrôlable. Il ne s'adapte tout simplement pas.

Voici quelques raisons de ne pas utiliser la structure Dossier par type:

• Le nombre de fichiers dans vos dossiers peut devenir énorme
• Trouver tous les fichiers que vous devez modifier pour une fonctionnalité spécifique peut être délicat
• Travailler sur une fonctionnalité conduira à de nombreux dossiers ouverts
• Ne s'adapte pas bien, plus l'application grandit, plus il est difficile de travailler dessus

Je recommande plutôt d'utiliser une structure Dossiers par fonctionnalité, où les fichiers JavaScript, CSS et HTML sont regroupés par fonctionnalité ou module AngularJS:

onscroll

Raisons d'utiliser la structure Dossiers par fonction:

• Le nombre de fichiers dans vos dossiers est limité à quelques
• Trouver tous les fichiers que vous devez modifier pour une fonctionnalité spécifique est facile - ils se trouvent dans le même dossier
• Vous pouvez travailler indépendamment sur une fonctionnalité
• Savoir ce que représente le module est facile - le nom du dossier est suffisant
• Facile à créer une nouvelle fonctionnalité, il suffit de copier / coller une fonctionnalité existante
• S'adapte bien, vous pouvez ajouter autant de nouvelles fonctionnalités que vous le souhaitez sans que votre équipe ait du mal à travailler sur

Veuillez noter que cette architecture est proche de la structure Dossiers par Composant qui est désormais la structure par défaut dans les applications Angular2 / Ionic2.

Erreur commune n ° 8: lier des événements à requestAnimationFrame et oublier // …

Ce seul piège est généralement l’erreur du débutant, mais il peut avoir le pire impact sur les performances. Considère ceci:

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

Même si Ionic fournit une limitation pour ces actions, cela peut être très lent. Fondamentalement, tout ce qui déclenche une boucle de condensé doit être différé et non déclenché avec une peinture lourde, qui est également l'effet du défilement.

De nombreux objectifs que les développeurs ont essayé d'atteindre en se liant à des événements de défilement, et en particulier des animations, peuvent également être atteints en utilisant une méthode différente. Voici var myElement = document.getElementById('content'); var elemOffsetFromParent = myElement.offsetTop; function onCapturedFrame() { if (window.scrollY >= elemOffsetFromParent) { customTweenFunction(myElement, options); } window.requestAnimationFrame(onCapturedFrame); } onCapturedFrame(); .

element.getBoundingClientRect()

Le code ci-dessus est un exemple très simple, vérifiant si l'utilisateur a fait défiler le haut de l'élément. N'oubliez pas d'ajouter des alternatives spécifiques au fournisseur pour la compatibilité entre navigateurs si vous avez l'intention d'utiliser l'exemple. Il fonctionnera essentiellement à une vitesse optimale, en fonction du navigateur, à 60 FPS ou au taux de rafraîchissement de l'écran. Mais il est optimisé et les frameworks d'animation haute performance utilisent cette méthode simple.

Vous pouvez également consulter

|_+_|

, qui fournit des informations sur la taille et la position d'un nœud HTML.

Erreur commune n ° 9: Prototyper manuellement des applications ioniques

Ionic a un design spécifique, presque un langage visuel. Surtout avec les prototypes et les produits à un stade précoce, beaucoup de temps et de dépenses peuvent être économisés en utilisant les composants et les styles disponibles. Ils sont en fait plutôt minimes et ont une bonne esthétique.

La présentation de wireframes et de maquettes avec des fonctionnalités de base est devenue une norme de l'industrie. Pour voir une image et pour voir une application réelle avec des composants dynamiques sur un appareil mobile, il y a deux tasses de thé très différentes. De nombreux concepteurs, ainsi que des développeurs UX, utilisent des outils tels que Axure ou Balsamiq , qui permettent de réaliser rapidement des wireframes avec une fonctionnalité minimale.

Désormais, les créateurs d'Ionic ont publié un outil similaire conçu exclusivement pour les développeurs Ionic. On l'appelle Créateur ionique . Il dispose d'une interface Web glisser-déposer et prend en charge à peu près tout ce que propose Core Ionic. Ce qui est génial, c'est qu'il permet d'exporter le prototype dans plusieurs formats, avec du code ionique standard de travail, et même de créer l'application et partager il. L'outil est propriétaire, mais la plupart des options sont gratuites.

qu'est-ce que les tests unitaires dans le logiciel

Conclusion

Ionic a révolutionné l'industrie des applications hybrides d'une manière que personne n'aurait pu imaginer. Cependant, au fil du temps, les meilleures pratiques et les outils ont manqué d'évolution. En conséquence, le nombre d'erreurs potentielles que les développeurs peuvent commettre a augmenté.

Les développeurs experts Ionic ont un moyen clair de fournir des applications de classe mondiale à plusieurs plates-formes simultanément. La solution consiste à tirer parti des outils disponibles, à maintenir la performance au premier rang des priorités et à suivre les meilleures pratiques.

Cet article n'aurait pas été possible sans la créativité de l'incroyable communauté Ionic, Michał Mikołajczyk , Mike Hartington (Équipe Ionic Core) et Katie Ginder-Vogel (Responsable marketing et communication, Ionic). Merci beaucoup à tous.