Les applications hybrides sur mobile sont réputées lentes, pourtant avec quelques astuces et bonnes pratiques, il est possible de rendre ces applications réactives et performantes.

Une application hybride sur mobile est une application native créée à partir des technologies Web. De ce fait, une application hybride tire parti des avantages des deux mondes Web et Natif.  Une application hybride est installée depuis un store applicatif (App Store, Google Play, Windows Market place, Blackberry App World, etc.) et peut accéder aux fonctionnalités natives d’un smartphone mais implémentée en utilisant les technologies Web HTML5, CSS et Javascript.

L’avantage principal de l’approche hybride est que le développement se fait une seule fois, respectant le principe “WORA” (acronyme de Write Once Run Anywhere). Cependant, l’approche hybride a ses inconvénients qu’il faut prendre en considération avant de l’adopter notamment sur le volet performance. Dans cet article, nous vous proposons des astuces et des bonnes pratiques à suivre pour remédier aux soucis de lenteur des applications hybrides sur mobile et pour booster leurs performances.

#1  – Ne jamais générer la page à afficher sur le serveur

Le serveur doit seulement fournir les données à votre application, à charge à cette dernière de mettre à jour l’interface utilisateur.

La meilleure façon de faire cela est :

  • Afficher la page vide avec une image de chargement !
  • Récupérer les informations à afficher depuis le serveur
  • Ajouter, supprimer ou modifier aux DOM (Document Object Model)

#2 – Une bonne approche à adopter : “Single Page Application”

Comme son nom l’indique, une SPA est une application qui a une seule page contenant toute la couche de présentation requise par l’application.

Une SPA dispose de plusieurs avantages qui améliorent les performances d’une application hybride, elle permet notamment :

  • De minimiser l’utilisation excessive de la bande passante
  • De proposer une navigation rapide et fluide
  • De permettre la récupération de données à la demande de l’utilisateur

AngularJS est le Framework le plus répandu sur le marché des frameworks JavaScript FrontEnd, il permet de créer aisément des applications mono-page. Dans sa prochaine Version, AngularJS doit se focaliser sur les points suivants :

  • “Mobile First” : s’attaquer aux soucis de temps de chargement, de performance et d’autres challenges de l’environnement mobile.
  • “Simplicity” : permettre aux développeurs de focaliser tous leurs efforts sur le développement de la logique business.

#3 – Utiliser le cache de données

L’utilisation des mécanismes du cache peut considérablement améliorer l’expérience utilisateur. En effet, la mise en cache des données permet de minimiser l’utilisation excessive de la bande passante.

Un système de cache peut être mis en place comme suit :

  • Cacher les fichiers et les données statiques de l’application sur les différents supports de stockage : AppCache, LocalStorage, Base de données et fichiers.
  • Cacher les données dynamiques avec une date d’expiration.

#4 – Minimiser les animations Javascript

Les animations CSS surpassent celles de Javascript/Jquery en terme de performance en déléguant la logique de l’animation au navigateur lui-même. Pour information,  les animations Javascript agissent sur le DOM, ce qui rend le rendu visuel plus lent.

Les animations CSS n’utilisent pas le GPU(Graphics Process Unit) par défaut , il faut donc le forcer en utilisant les règles CSS adéquates pour ce besoin.

Exemple :

  Ne pas utiliser   Mais utiliser
.cube {
-webkit-transform: translate3d(250px,250px,250px)
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5, 0.5, 0.5);
}
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/* Other transform properties here */
}

L’idée est de forcer le navigateur à utiliser le “hardware acceleration” pour que l’animation soit plus fluide.

#5 – Eviter les 300ms ajoutées sur l’événement de clic

Ceci est l’un des points de performance les plus marquants qui font la différence entre une application Hybride et une autre native. En effet, la source de ce problème est qu’après chaque clic sur le mobile, le navigateur attend 300ms pour décider qu’il s’agit bien d’un simple clic, et que l’utilisateur ne souhaite pas effectuer un double clic par la suite. Ce processus est comme suit :

Simple clic :

  • touchstart
  • touchend
  • Temps d’attente de 300ms
  • click

Double clic :

  • touchstart
  • touchend
  • Temps d’attente < de 300ms
  • touchstart
  • touchend
  • double click

FastClick est une librairie permettant de lancer l’événement de clic juste après celui de touchend afin de gagner en performance du clic. Il est donc fortement conseillé d’utiliser FastClick au niveau des objets qui ne nécessitent pas un double clic (liens, boutons, images, etc.).

#6 – Optimiser les images

L’utilisation de plusieurs images sur une page web est cruciale pour la performance. En effet, chaque image que vous ajoutez sur votre page à sa propre requête HTTP. Cela engendre plus de charge au niveau du serveur et plus de temps de réponse au niveau du client. La solution pour ce problème, est l’utilisation des Sprites CSS.

Une Sprite est un fichier large contenant plusieurs images pour votre application.

application-hybride-pictos

Exemple d’une Sprite CSS.

Exemple : L’utilisation de l’image ci-dessus pour vos icônes d’une application permet de réduire le nombre de requêtes HTTP de 140 à une seule. Dans votre fichier CSS, vous allez avoir une seule image que vous devez positionner selon vos besoins à l’aide de background-position.

Pour plus d’information sur ce sujet visitez ce lien.

Il est à noter aussi qu’il est préférable de penser à optimiser la taille et la résolution des images utilisées pour qu’elles aient le minimum de poids possible.

#7 – Utiliser JSON

L’utilisation de JSON permet d’avoir une communication plus légère que l’utilisation d’un autre format de données.  Avoir le couple JSON et SPA permet ainsi d’améliorer la performance du fait que:

  • L’UI est générée côté client (Rapide)
  • Le format JSON est léger, en plus il est facile à manipuler par Javascript

Il faut juste préciser que votre JSON doit être simple et bien structuré.

#8- Minifier vos fichiers JS et CSS

Minifier ses scripts JavaScript et les fichiers CSS permet de supprimer les octets inutiles de vos fichiers et aussi de rendre votre code plus difficile à comprendre, car la minification permet de renommer les variables et les paramètres des fonctions.

L’intérêt principal de la minification est de regrouper tous les scripts Javascript dans un seul fichier et les fichiers CSS dans un autre avec une taille minimale. Cela permet de minimiser les appels HTTP et de réduire le temps de chargement, ce qui contribue à l’amélioration des performances !

#9 – Respecter l’architecture du code HTML/CSS de jQuery Mobile

Si vous lisez la documentation de jQuery Mobile, vous allez vous rendre compte que chaque div dispose d’un attribut “data-role”. Essayez de respecter cette architecture.

De la même manière, la feuille de style générée par défaut avec jQM est trop chargée mais indispensable pour garder une cohérence dans l’aspect global de l’application : nous vous conseillons de “nettoyer” un peu la feuille de style jQM, et ensuite de rajouter la vôtre.

#10 – Utiliser des outils de développement et de débogage

Facebook et LinkedIn ont abandonné l’approche hybride à cause du manque des bons outils de débogage. Ces outils présentent un élément primordial dans le cycle de développement. Aujourd’hui, Chrome Devs tools, les outils de développement web de Apple et l’inspecteur de BlackBerry sont disponibles pour déboguer vos applications respectivement sur les trois plateformes:

  • Android
  • Blackberry
  • iOS

Pour Windows phone vous pouvez utiliser WEINRE .

Ces inspecteurs permettent non seulement de déboguer, mais aussi de profiler l’activité de vos scripts, d’auditer puis d’améliorer les performances de vos applications.

#11 – Tester votre application directement sur votre device !

On peut dire que les émulateurs ne sont pas le support le plus adapté pour évaluer la performance d’une application hybride, car ils ont souvent un temps de réponse très lent. Il est fortement conseillé de tester et d’évaluer la performance de vos applications sur un terminal mobile afin d’avoir un résultat plus fiable.

EN RÉSUMÉ

Une application mobile hybride n’est pas forcément simple à mettre en place et peut facilement être confrontée au problème de performance. Il faut juste garder en tête que même en codant avec des langages web, les limitations de performance et les spécificité des devices mobiles nous obligent à respecter certaines bonnes pratiques pour que les applications hybrides soient plus fluides.

“Et c’est possible, chez NEOXIA, nous l’avons fait !”