Cordova - Bonnes pratiques

Cordova est utilisé pour créer des applications mobiles hybrides, vous devez donc en tenir compte avant de le choisir pour votre projet. Vous trouverez ci-dessous les meilleures pratiques pour le développement d'applications Cordova.

Applications à page unique

C'est la conception recommandée pour toutes les applications Cordova. SPA utilise un routeur côté client et une navigation chargée sur la page unique (généralementindex.html). Le routage est géré via AJAX. Si vous avez suivi nos tutoriels, vous avez probablement remarqué que presque tous les plugins Cordova doivent attendre que l'appareil soit prêt avant de pouvoir être utilisé. La conception du SPA améliorera la vitesse de chargement et les performances globales.

Événements tactiles

Depuis Cordova est utilisé pour le monde mobile, il est naturel d'utiliser touchstart et touchend événements au lieu de clickévénements. Les événements de clic ont un retard de 300 ms, de sorte que les clics ne semblent pas natifs. D'autre part, les événements tactiles ne sont pas pris en charge sur toutes les plates-formes. Vous devez en tenir compte avant de décider quoi utiliser.

Animations

Vous devez toujours utiliser le matériel accéléré CSS Transitions au lieu des animations JavaScript, car elles fonctionneront mieux sur les appareils mobiles.

Espace de rangement

Utilisez autant que possible la mise en cache de stockage. Les connexions au réseau mobile sont généralement mauvaises, vous devez donc minimiser les appels réseau dans votre application. Vous devez également gérer l'état hors ligne de l'application, car il y aura des moments où les appareils de l'utilisateur seront hors ligne.

Défilement

La plupart du temps, la première partie lente de votre application sera des listes déroulantes. Il existe plusieurs façons d'améliorer les performances de défilement de l'application. Notre recommandation est d'utiliser le défilement natif. Lorsqu'il y a beaucoup d'éléments dans la liste, vous devez les charger partiellement. Utilisez des chargeurs si nécessaire.

Images

Les images peuvent également ralentir l'application mobile. Vous devez utiliser des sprites d'image CSS chaque fois que possible. Essayez d'adapter parfaitement les images au lieu de les mettre à l'échelle.

Styles CSS

Vous devez éviter les ombres et les dégradés, car ils ralentissent le temps de rendu de la page.

Simplification

Le DOM du navigateur est lent, vous devriez donc essayer de minimiser la manipulation du DOM et le nombre d'éléments DOM.

Essai

Assurez-vous de tester votre application sur autant d'appareils et de versions de système d'exploitation que possible. Si l'application fonctionne parfaitement sur un appareil, cela ne signifie pas nécessairement qu'elle fonctionnera sur un autre appareil ou plate-forme.