Les 9 erreurs les plus courantes commises par les développeurs ioniques

introduction

Ionic 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 créées 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é à bien des égards. Par conséquent, il est difficile de déterminer quel chemin suivre lors du démarrage d'un nouveau projet. Dans ces conditions, les développeurs peuvent commettre des erreurs impactant potentiellement 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 #1 : Oublier d'activer le défilement natif

Le défilement natif permet à Ionic d'écouter les événements de défilement sur les vues Web prises en charge. Cela rend possible Pull to Refresh , List Reordering et Infinite Scroll 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). Il s'agit d'une amélioration considérable 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 à l'aide de la directive overflow-scroll sur n'importe quel ion-content :

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

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

Erreur courante #2 : Ne pas utiliser la CLI Ionic pour installer des plateformes et des plugins

Ionic CLI ajoute des fonctionnalités à la Cordova CLI. 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 sont installés sur votre machine uniquement. 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 des plates-formes et des plugins, mais ce n'est pas recommandé.

Lorsque vous utilisez Ionic CLI pour installer des plates-formes ionic platform add ios et plugins ionic plugin add camera , le fichier package.json est modifié de manière appropriée.

Les plates-formes et les plug-ins sont stockés dans les propriétés cordovaPlatforms et cordovaPlugins :

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

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

Erreur courante n° 3 : la performance de la pensée sort des sentiers battus

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

L'exemple parfait est l'application Sworkit qui est construite avec Ionic, a une base d'utilisateurs de plus de 9 millions, plus de 7 millions 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 éléments à connaître 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 : $watch (normal) , $watch (deep) , $watchCollection et $watchGroup .

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

$regarder (normal)

L'utilisation de $watch normal ne vérifiera que les propriétés d'objet existantes ou les éléments de tableau. Les modifications superficielles, telles que l'ajout d'une propriété Object ou l'envoi d'un nouvel élément dans un tableau, ne seront pas prises en compte.

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

$regarder (profond)

La profonde $watch prend en charge les changements superficiels et les changements profonds, comme les propriétés des objets imbriqués. Avec cette $watch vous êtes sûr de ne rater aucune modification. Cependant, l'utilisation de deep $watch a des implications sur les performances. Je conseillerais de l'utiliser avec prudence.

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

$watchCollection

$watchCollection peut être considéré entre le $watch normal et le profond $watch . Cela 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.

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

$watchGroup

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

Bien que $watchGroup pas les performances de votre application par rapport au $watch normal, il a l'avantage d'être plus synthétique lors de la surveillance de plusieurs expressions de portée.

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

Suivre par

La track by est utilisée pour éviter les manipulations inutiles du DOM lors de l'utilisation ng-repeat . En effet, si le cycle de résumé constate qu'au moins un élément de votre collection a changé, ng-repeat restituera tous les éléments. La manipulation du 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 qui doivent être mis à jour, utilisez track by avec un identifiant unique.

 <!-- 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>

Évitez simplement d'utiliser track by sur collection-repeat .

Reliure unique

La liaison unique, ou :: a été introduite dans Angular 1.3, et elle a un impact réel sur les performances de votre application.

Fondamentalement, l'utilisation d'une liaison unique :: sur une expression la supprimera de la liste $watchers lorsqu'elle sera remplie. Cela signifie que l'expression ne pourra pas être mise à jour même si les données changent.

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

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

Veuillez noter que malheureusement, la liaison unique ne peut pas être utilisée dans une collection-repeat , 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 sur les performances d'AngularJS et d'Ionic, je vous recommande de lire la feuille de triche sur les performances d'Ultimate AngularJS et d'Ionic.

Erreur courante n° 4 : avoir des confusions avec la logique de View Cache

Les applications à page unique ne mettent pas les pages en cache par défaut. Vous en avez probablement fait l'expérience en utilisant des applications AngularJS, où le défilement ou les entrées de l'utilisateur ne sont pas enregistrées 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.

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

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

Le problème est que lorsque l'utilisateur revient sur une page mise en cache, le contrôleur n'est pas ré-instancié, 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 de cycle de vie :

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

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

L'événement $ionicView.loaded , 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 initier des variables de la même manière que vous le feriez avec l'événement $viewContentLoaded 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 l'événement $ionicView.enter .

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

Concernant les performances, l'utilisation de la vue cache n'impacte que 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 bien fonctionner (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 avec fluidité et réactivité sur tous les appareils Android, vous pouvez installer Crosswalk. 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 plugin add cordova-plugin-crosswalk-webview

Erreur courante 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 plateformes ionic platform add ios android et quelques plugins ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts , une erreur de rookie est de penser qu'on peut les tester dans le navigateur. Eh bien, vous pourriez, 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 adb devices (le SDK Android est requis).

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

Une fois votre application lancée sur l'appareil, ouvrez les outils de développement Safari (sur votre ordinateur) en cliquant sur Develop > Your iPhone > Your app :

Exécutez les plugins Cordova dans le navigateur

L'exécution des plug-ins 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 plate-forme Cordova Browser, Electron 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.

Plate-forme de navigateur Cordova

Avec la plate-forme du navigateur, 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 platform add browser

Votre application doit être compilée avant utilisation exactement comme avec iOS ou Android :

 cordova run browser

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

Plugins multiplateformes

De nombreux plugins tels que Network, Camera et Facebook prennent en charge iOS, Android et la plate-forme du navigateur en même temps - tous avec la même API.

Pour illustrer qu'il existe un moyen de savoir si votre appareil est en ligne ou hors ligne sur chaque plate-forme (iOS, Android, navigateur et bureau) à l'aide de l'API ngCordova :

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

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

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

Lors de l'utilisation de la commande ionic start myapp , un projet de démarrage est créé avec la structure de dossiers suivante :

 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

C'est ce qu'on appelle une structure de dossier par type, où 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 n'est tout simplement pas à l'échelle.

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 :

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

Raisons d'utiliser la structure Dossiers par fonctionnalité :

• Le nombre de fichiers dans vos dossiers est limité à quelques
• Il est facile de trouver tous les fichiers que vous devez modifier pour une fonctionnalité spécifique - ils se trouvent dans le même dossier
• Vous pouvez travailler indépendamment sur une fonctionnalité
• Savoir ce que le module représente est facile - le nom du dossier suffit
• 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 compliquer le travail de votre équipe

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

Erreur courante n° 8 : lier des événements à onscroll et oublier requestAnimationFrame

Ce seul écueil est généralement une erreur de débutant, mais il peut avoir le pire impact sur les performances. Considère ceci:

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

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

De nombreux objectifs que les développeurs ont essayé d'atteindre en se liant aux événements de défilement, et en particulier aux animations, peuvent également être atteints en utilisant une méthode différente. Voici requestAnimationFrame .

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

Le code ci-dessus est un exemple très simple, vérifiant si l'utilisateur a défilé au-delà du 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, selon le navigateur, à 60 FPS ou au taux de rafraîchissement de l'écran. Mais il est optimisé et les frameworks d'animation hautes performances utilisent cette méthode simple.

Vous pouvez également consulter element.getBoundingClientRect() , qui fournit des informations sur la taille et la position d'un nœud HTML.

Erreur courante 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. Voir une image et voir une application réelle avec des composants dynamiques sur un appareil mobile sont deux tasses de thé très différentes. De nombreux designers, mais aussi des développeurs UX, utilisent des outils comme Axure ou Balsamiq, qui permettent de réaliser rapidement des wireframes avec un minimum de fonctionnalités.

Maintenant, les créateurs d'Ionic ont publié un outil similaire conçu exclusivement pour les développeurs Ionic. C'est ce qu'on appelle le créateur ionique. Il dispose d'une interface Web par glisser-déposer et prend en charge presque tout ce que fournit le noyau Ionic. Ce qui est génial, c'est qu'il permet d'exporter le prototype dans plusieurs formats, avec du code ionique standard, et même de créer l'application et de la partager. L'outil est propriétaire, mais de nombreuses options sont gratuites.

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 d'Ionic disposent d'un moyen clair de fournir simultanément des applications de classe mondiale sur plusieurs plates-formes. La solution consiste à tirer parti des outils disponibles, à faire de la performance une priorité absolue et à suivre les meilleures pratiques.

Ce poste n'aurait pas été possible sans la créativité de l'incroyable communauté Ionic, Michal Mikolajczyk, Mike Hartington (Ionic Core team) et Katie Ginder-Vogel (Marketing & Communications Manager, Ionic). Merci beaucoup à tous.