Ionic et performances

Performances de Ionic et AngularJS sur mobile

D’une manière générale, les applications mobiles multiplateformes souffrent d’une mauvaise réputation comparée à leurs cousines natives. Dans le cas des technologies dites webview, on leur reproche leur manque de fluidité, leur éloignement en termes de design et d’ergonomie des standards natifs, leur pauvreté visuelle et de mauvaises performances générales.

Concernant le design et l’ergonomie, des frameworks comme Ionic ont justement comme but premier de permettre aux développeurs de créer facilement des applications qui suivent toutes les contraintes et les tendances du look and feel sur smartphone. Cette mauvaise réputation tient en fait plus du nombre important d’applications peu travaillées qui ont été publiées au tout début de l’histoire de Cordova.

Concernant les performances et la fluidité, il est vrai qu’au début d’Android, l’affichage des webviews souffrait de latences comparées à celles affichées par iOS. Volonté de Google pour mettre à mal le phénomène webview et forcer les développeurs à utiliser les SDK natifs ou véritable contrainte technique ? En tous les cas, Google a revu sa copie et a largement refondu le moteur d’affichage des webviews...

Conseils pratiques pour optimiser les performances

1. Généralités

Les conseils suivants peuvent s’appliquer pour tout projet web utilisant du JavaScript. Que ce soit dans le but de proposer quelques fonctionnalités dynamiques ou pour créer une application one page.

a. Appels asynchrones et promesses

L’exemple de la section précédente démontre qu’un seul thread est disponible pour effectuer tous les traitements dans la webview. Le fait est qu’il existe de très nombreux cas où une opération peut prendre plusieurs secondes pour s’exécuter. C’est typiquement le cas des appels à un serveur HTTP ou de l’exécution d’une requête dans la base de données embarquée. Dans ce cas, il ne s’agit pas de s’acharner à réduire la durée de traitement de ces méthodes mais plutôt de mettre en place des mécanismes asynchrones.

Par exemple, tout appel à un service qui va lui-même appeler une ressource externe (dont le temps d’exécution ne peut donc être déterminé avec certitude) doit être effectué grâce à un appel asynchrone et le retour traité avec une promesse. Ainsi :


this.resultat = MonSvc.monTraitement();

Devient :


var self = this; 
MonSvc.monTraitement() 
       .then(function(response) { 
                 self.resultat = response; 
});

C’est particulièrement vrai dans le cas d’une boucle. Plutôt que d’appeler plusieurs fois une méthode au sein d’une boucle, il est préférable de créer un tableau de promesses et d’attendre la résolution asynchrone de chacune d’entre elles avant de continuer le traitement. Cette technique a le mérite de ne pas bloquer le navigateur pendant la résolution des différentes itérations. Ainsi :


var result = []; 
for (var i = 0; i < 100; i++) {  
       result.push(MonSvc.monTraitement(i)); 
} 
return result;