Jquery Mobile – PhoneGap – Retours d’expérience et bonnes pratiques.

De Lionel Dangelo dans Technique

11 juin 2013

Lors du développement d’une application mobile, nous sommes souvent confrontés au choix “application native” ou “site web mobile”.

Dans cet article, nous allons présenter l’approche que nous avons eu pour le développement d’une application mobile qui mixe à la fois un framework html mobile classique avec l’utilisation de JQuery Mobile ainsi que des fonctionnalités natives grâce à PhoneGap. Nous verrons ensuite les bonnes pratiques que nous avons pu faire ressortir ainsi que les limites rencontrées.

Notre application

Le projet a pour but d’inventorier divers biens (matériel informatique,etc) via un appareil mobile.
Cette dernière contient divers formulaires ainsi que des listes pouvant afficher plusieurs centaines d’éléments. L’application devait remplir plusieurs prérequis :

- Être multiplateforme mobile (Android, iOS, Windows Phone)
- Avoir une version de l’application packagée avec des fonctionnalités natives (utilisation de l’API caméra pour scanner des codes barre)
- Nous ne devions pas re-coder spécifiquement pour chaque plateforme l’application.

 

Le choix de JQuery Mobile

jQueryMobile est un framework qui permet, à partir de pages HTML/CSS/JS, d’obtenir des écrans ainsi que des composants graphiques adaptés au rendu smartphone ou tablette. Basé sur jQuery, il est conçu pour fonctionner sur un grand nombre de navigateurs et de plateformes différentes (http://jquerymobile.com/gbs/) avec plusieurs niveaux de compatibilité.

JQueryMobile gère, part défaut, de façon particulière la gestion de l’affichage des pages. En effet, le framework est basé sur un design de “Single Page Application”, dans lequel une page principale s’occupe de charger toutes les autres en AJAX et de les charger dans le DOM de la page principale. Il déclenche des animations CSS3 afin de proposer une transition adaptée. La gestion du cache et du DOM peut donc être déroutante par rapport aux habitudes classiques de programmation web.

 

Retours d’experience

 

Les points forts de JQuery Mobile sont :

- Le développement utilise des standards HTML5/CSS3
- Basé sur JQuery, donc facile à prendre en main
- Les composants graphiques offerts par le framework sont nombreux
- Plusieurs thèmes graphiques disponibles
- Grande compatibilité des navigateurs et plateformes

Les points faibles :

- L’expérience utilisateur est plus pauvre par rapport à ce qu’on peut obtenir avec une application native
- Les performances sont très aléatoires suivant la performance des appareils cibles.
- Gestion du cache, du DOM et du chargement des pages déroutante
- Debbugage web pas toujours évident, surtout en multi plateforme
- Des différences selon les navigateurs

 

Les bonnes pratiques

 

Nous avons pu faire ressortir plusieurs bonnes pratiques que nous vous faisons partager :

 

Gestion des imports

  • Rajouter no-scale dans la meta viewport.

<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no" />

Cela permet de « fixer » la taille de la fenêtre et de ne pas pouvoir zoomer sur l’écran, comme sur une application native.

  • Vouloir fixer le header en haut de la page comme les applications natives semble alléchant mais la solution data-position=”fixed” entraine des comportements aléatoires selont les navigateurs, à éviter pour l’instant. (http://jquerymobile.com/test/docs/toolbars/bars-fixed.html)
  • L’implémentation du bouton back se fait facilement de la façon suivante :

<a data-icon="arrow-l" data-rel="back" data-direction="reverse" href="#" data-theme="a">Retour</a>

 

Composants

  •  Utiliser des data-role button pour tous les boutons afin d’améliorer l’expérience utilisateur. En effet, les boutons prendront un forme graphique avec un changement de couleur au clic de l’utilisateur.
  • Pour les messages d’erreur, privilégier les “alert js” natifs (plus rapides à afficher), sauf si une personnalisation est nécessaire.
  • Si vous devez mettre en place des listes, utilisez le conteneur “listview” du framework. Pour les items de la liste, rester dans le standard jQueryMobile.

 

Cache

  • Utiliser data-cache-dom=”true” sur les pages non dynamiques. Cela permet d’améliorer grandement la rapidité de navigation car le framework gardera le contenu des pages dans son cache. En revanche, utiliser cette option avec des contenus dynamiques peut mener à des résultats inattendus (valeurs des formulaires toujours identiques alors qu’elles devraient être à jour, etc..)

Autres

  • Remplacer tous les “live” par des “bind” . En effet, la gestion du cache de JQueryMobile fait que l’utilisation des « live » crée des empilements d’évenements.
  • Utiliser les événements “tap” au lieu de “click” permet d’améliorer la réactivité de l’application suite à un clic de l’utilisateur. En effet, l’évenement “tap” est mieux adapté aux événements type “toucher” sur mobile.
  • Les transitions jQuery Mobile ne sont pas compatibles avec tous les navigateurs.
  • Les ID des éléments du dom doivent être uniques même entre des pages différentes, du fait que JQuery Mobile gère le DOM dans une seule et même page.
  •  Les input text de type=”number” ne sont pas compatibles avec tous les navigateurs, à éviter.

 

PhoneGap

 

PhoneGap est un framework qui permet d’encapsuler un site HTML/CSS/JS dans une application native iOS, Android ou Windows Phone. Cette dernière n’est alors qu’une coquille vide basée sur le browser du système dans le but d’afficher de simple pages web.

 PhoneGap utilise des composants navigateurs (WebView) disponibles sur chaque OS mobile et permet d’accéder à des éléments natifs du téléphone. Ces passerelles sont accessibles via le langage Javascript. Il devient ainsi possible depuis son application HTML/CSS/JS de piloter les éléments physiques du téléphone : caméra, fichiers, accelerometre, gps,…

 

Retour d’expérience

Les points forts de PhoneGap sont :

- Bonne intégration avec jQueryMobile
- Permet rapidement d’obtenir une application déployable sur chaque OS.
- Une liste exhaustive de plugins disponibles

 

Les points faibles :

- N’améliore pas les performances d’un site HTML/JS, la réactivité sera la même que sur le navigateur de l’appareil
- Il faut bien veiller à ce que les librairies JS pour accéder aux couches natives fonctionnent encore lors de la sortie de nouvelles versions d’OS
- Il faut rester conscient que si l’on développe des plugins spécifiques PhoneGap il faudra effectuer ce développement sur chaque plateforme cible (pour la partie native ET la partie Javascript).

 

Conclusion

Après cette expérience, on peut avec certitude dire que pour une petite application mobile multiplateforme utilisant JQuery Mobile et PhoneGap, le temps gagné de développement est loin d’être négligeable. En effet, l’ensemble de ces frameworks permet rapidement d’avoir des résultats plus que satisfaisants, notamment grâce à leur facilité de prise en main et l’ensemble des composants  mis à disposition.

En revanche, l’ approche “un seul et unique code pour l’ensemble des plateformes”  limite le support des fonctionnalités au plus petit dénominateur commun. L’expérience utilisateur peut donc être réduite par rapport à une application native. Cela se fait encore plus ressentir sur des appareils moins puissants, qui peinent à afficher les pages.

Pour finir, l’utilisation de JQueryMobile et PhoneGap a été concluante sur notre projet.

4 Réponses pour Jquery Mobile – PhoneGap – Retours d’expérience et bonnes pratiques.

Avatar

Martin

juin 17th, 2013 à 15 h 34 min

Bonjour,
Merci pour cet article. Cependant, j’essaye de commencé à développer avec Phonegap et Jquery mobile et je ne sais pas ou dois je ajouter les fichier de Jquery mobile.
Pouvez vous m’indiquer quoi faire ?

Merci d’avance,
Martin

Avatar

Lionel Dangelo

juillet 5th, 2013 à 13 h 56 min

Bonjour,

une fois le projet Android créé en suivant les directives d’un projet Android PhoneGap, vous devez créer, si ce n’est pas déjà fait, un répertoire “assets\www”. C’est dans ce répertoire que vous pourrez déposer votre contenu web (html+js).

Votre main activity devrait ressembler à cela :

public class MainActivity extends DroidGap {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl(“file:///android_asset/www/index.html”);
}
}

Avatar

aymen

octobre 26th, 2013 à 16 h 59 min

Un très bon article . je vous félicite monsieur c vraiment du temps gagner loin d’ètre négigable

Avatar

Solehl

novembre 9th, 2014 à 16 h 53 min

Oui merci, clair et précis !

Commentaire

4 × = vingt quatre

iMDEO recrute !

REJOIGNEZ-NOUS

A la recherche de nouveaux talents (développeurs web et mobile, chefs de projet,...)

Voir les annonces