Boostez les performances de votre application Ionic


La performance est l’une des préoccupations majeures des développeurs d’applications mobiles hybrides. Ionic a déjà montré qu’il est possible de l’assurer, avec ses apps rapides et fluides. Cependant, il y a quelques règles d’optimisations à respecter afin d’éviter tous les lags de navigation et garantir des transitions smooth. Nous allons les décortiquer dans ce post.

Use the Native Scroll

L’utilisation du scroll natif du système mobile, à la place du scroll JavaScript, donne une meilleure fluidité dans la navigation et un gain de performance considérable. Par défaut, Ionic se base sur le Scroll JavaScript, mais il offre la possibilité de le surcharger par le scroll natif de l’OS cible.

Pour l’activer il faut placer l’attribue suivant dans le tag :

overflow-scroll="true"

Ionic Small LogoOu via le code suivant :

$ionicConfigProvider.scrolling.jsScrolling(false);

Si vous utilisez la directive collection-repeat, il est préférable de la remplacer avec la directive ng-repeat. Je l’ai déjà testée et j’ai remarqué de meilleures performances en la combinant avec le scroll natif.

Use the magic CrossWalk tool

Crosswalk logo

CrossWalk est un outil magique qui permet de remédier aux problèmes d’intégration d’une application mobile hybride dans une WebView basée sur un Chromium ou un webkit Geko. Il corrige les erreurs d’incompatibilités et de performances en embarquant dans votre application un moteur Chromium pour Android et un WkWebView pour iOS.

Ces derniers permettent d’améliorer grandement la fluidité de navigation dans votre application et d’augmenter le support des dernières fonctionnalités JS et CSS (à vous alors la puissance des flexbox !).

Bien que Ionic ne recommande d’utiliser Crosswalk que pour le support des anciennes versions d’Android (4.0 – 4.3), j’ai remarqué une énorme amélioration de performances pour les nouvelles versions d’Android 4.3+. Et cela surtout dans les animations CSS.

Pour ajouter CrossWalk à votre application, il faut utiliser la commande suivante :

ionic browser add crosswalk

Crosswalk augmente considérablement la taille de l’application. Pour surmonter ce souci, vous pouvez utiliser crosswalk-lite. L’utilisation de cette version épurée permet de réduire de moitié la taille de votre application par rapport à la version complète de CrossWalk. Attention tout de même, ça implique quelques inconvénients : CrossWallk-lite est incompatible avec iOS et quelques fonctionnalités avancées comme le WebRTC sont absentes.

Use the famous GPU Hack

Il s’agit d’un petit hack à implémenter. Quand on utilise les animations CSS, on a deux possibilités pour améliorer leurs fluidités:

-webkit-transform: translateZ(0)

ou

-webkit-transform: translate3d(0,0,0);

Ces directives forcent le navigateur à utiliser le GPU à la place du CPU pour traiter les animations CSS. Ceci améliore le rendu et la fluidité des transitions dans votre application.

Javascript and css

Use the basic Ionic lifecycle events

Vous avez certainement eu quelques problèmes de fluidité dans les transitions d’une page à l’autre dans votre application Ionic, causé par l’attente de chargement d’une information spécifique via un service tiers. On peut résoudre ce problème avec une manipulation correcte du Ionic lifecycle event.

Par exemple, si on a besoin de charger quelques informations du service ‘library’, il vaut mieux faire l’appel dans le ‘beforeEnter’ event :

$scope.$on('$ionicView beforeEnter', function() {
	library.loadbookDetails();
});

Cet évènement est déclenché quand vous êtes sur le point d’entrer dans la vue (page), et ceci ne cause aucun lag dans le traitement de l’animation ou dans la transition entre les pages. Pour avoir plus de détails sur la liste des évènements, veuillez consulter cette page.

Use the Angular TemplateCache

Ionic a son propre système de Cache Templating. Il garde les templates en cache uniquement après l’affichage d’une vue (View). Ça veut dire avoir toujours un temps de latence, et ce, avant chaque affichage d’une nouvelle vue, provoqué par le temps de chargement du template associé.

Pour améliorer ce fonctionnement, j’utilise Angular TemplateCache qui permet de garder tous les templates en cache au moment du démarrage de l’application : magie, plus de lag et terminé les latences pénibles.

Pour activer ce système de cache, il faut d’abord installer le plugin ‘gulp-angular-templatecache’ par la commande suivante :

npm install gulp-angular-templatecache --save-dev

Ensuite, générer le cache via votre système de build (par exemple Gulp) :

gulp.task('templates', function(){
   return gulp.src(paths.templates)
  		 .pipe(angularTemplateCache())
  		 .pipe(concat('templates.js'))
  		 .pipe(gulp.dest('./www/lib/'));
});

Puis, charger les templates dans votre index.html

<scrip src="lib/templates.js"></script>

Ensuite il faut créer un nouveau module pour les templates :

angular.module('templates', []);

La dernière étape est de s’assurer que ces templates sont chargés comme dépendances dans votre application Ionic :

angular.module('StarerApp',  ['ionic', 'templates']);

Conclusion

Ionic est un excellent framework permettant de faciliter le développement des applications mobiles hybrides. Cependant, comme tous les frameworks web, les problèmes de performances peuvent être présents surtout dans un environnement limité comme les WebViews mobiles. Il faut donc garder en tête les bonnes pratiques listées dans cet article.

Vous aimerez aussi...