Avec l’expansion du marché du mobile de ces dernières années, les entreprises comprennent de plus en plus le besoin de mettre leur contenu à disposition d’utilisateurs en situation de mobilité (sur smartphone ou tablette). Pour cela, il existe deux techniques : mettre son contenu à disposition dans une application native, ou le rendre accessible depuis une page Web (ou une webapp).

Pour connaître la différence entre les deux, je vous renvoie à l’excellent article de Geoffrey sur le sujet. Dans cet article, c’est à la seconde solution que nous allons nous intéresser : le contenu accessible depuis une page Web.

Le but est de vous présenter un Framework avec lequel je travaille beaucoup : jQuery Mobile. Je n’entrerai pas dans les détails techniques très poussés du code pour cette fois, la documentation officielle très détaillée et simple d’utilisation, ainsi que les tutoriels que vous trouverez sur le net seront là pour ça. Mon but est plus de vous permettre de cerner les possibilités du Framework, ses avantages et ses limites, pour que vous puissiez décider, en toute connaissance de cause, de l’utiliser dans vos projets futurs ou non.

jQuery Mobile, qu’est ce que c’est ?

Créer une “application Web” ne requiert d’autres connaissances que celles qu’ont déjà la plupart des webdesigners : HTML, CSS, JavaScript (et le langage de votre choix côté serveur pour générer tout ça).

JQuery Mobile est un Framework complémentaire à la librairie jQuery, qui permet de créer facilement des applications Web cross-plateforme qui auront un look and feel mobile. Pour ceux qui utilisent jQuery UI, jQuery Mobile est donc la version cousine, pour les applications mobiles.

Attention, qui dit Framework, dit fichiers supplémentaires à charger. Dans le cas de jQuery Mobile, vous devrez intégrer à vos pages les librairies jQuery et jQuery Mobile.

Un Framework orienté mobile, concrètement, ça fait quoi ?

Les plus équipés d’entre vous qui auront la curiosité d’aller visiter la documentation, qui sert également de démo, depuis différents terminaux pourront noter la différence de mise en page du site sur desktop, tablette ou smartphone. Vous pouvez également redimensionner votre navigateur pour vous en rendre compte.

JQuery Mobile utilise des techniques de responsive webdesign pour faire en sorte que votre application mobile s’adapte toute seule à la taille du navigateur. Cela permet donc de développer une application pour smartphones et tablettes, sans avoir à changer le code et à refaire le travail deux fois.

jQuery Mobile

Orienté mobile, ça veut également dire dans le cas de jQuery Mobile que l’interface utilisateur est pensée pour un utilisateur en situation de mobilité : Les zones cliquables sont très grandes, le contenu est présenté en une colonne pour les utilisateurs de smartphones, etc. Le look and feel général de jQuery Mobile a été fait de telle sorte que l’application Web ressemble et mime certains des comportements natifs.

Orienté mobile, ça veut enfin dire que les évènements « mobiles » tels que le touch, le swipe, taphold, et le changement d’orientation sont pris en compte dans le Framework. Là où jQuery permettait de lier des évènements de souris à des fonctions, jQuery Mobile permet de faire la même chose, mais pour des évènements mobiles. Le Framework se charge également de faire la conversion entre ces évènements, ce qui permet de créer un site qui fonctionne aussi bien sur écran classique que sur écran touch, avec la même ligne de jQuery.

Un Framework pour développer sur différentes plates-formes

JQuery Mobile est compatible multiplateforme : iOs, Android, Windows Mobile, BlackBerry, mais également navigateurs desktop et Phonegap. Puisqu’une application jQuery Mobile est en fait une application HTML5, il est possible de la lancer dans n’importe quel navigateur de n’importe quel appareil qui supporte le balisage HTML5.

Notons que le HTML5 est obligatoire, beaucoup d’éléments du framework passant par l’attribut data-* . Plus besoin de développer une application native par plate-forme. Vous pouvez jeter un coup d’œil à la liste de compatibilité pour voir tous les appareils pouvant supporter.

Certains pourraient cependant voir ici une des limites du Framework. Chaque plate-forme ayant son propre look and feel, une application iOS native sera, en théorie, différente d’une application Android ou Windows Mobile. Utiliser jQuery Mobile uniformise les apparences sur toutes les platesformes (vers une tendance assez iOS d’ailleurs), et l’éloigne du natif auquel les utilisateurs sont habitués.

Un exemple concret est l’utilisation du bouton de retour en arrière dans les toolbars : Si ce bouton a une utilité sur les smartphones iOS, un bouton physique (ou implémenté dans l’OS pour les téléphones récents) est toujours présent, rendant ce bouton inutile. A noter qu’il peut néanmoins s’avérer indispensable pour une application iPhone embarquée dans Phonegap par exemple, puisqu’en embarquant l’application, on prive l’utilisateur du bouton de retour intégré dans le navigateur iOS.

Le bouton retour de la toolbar

jQuery Mobile, c’est facile !

Je devrais dire très simple d’utilisation, puisque de base, jQuery Mobile ne requiert que des connaissances en HTML et CSS. Oui, même pas besoin de JavaScript.

Le Framework utilise un système basé sur l’attribut HTML5 data- qui sera automatiquement récupéré et transformé par jQuery Mobile. Une div ayant l’attribut data-role=“page“ sera reconnu comme une page, un lien avec data-role=“button“ sera reconnu comme un bouton et aura automatiquement le look and feel d’un bouton, data-role=title pour les titres, etc. Il suffit de se référer à la documentation pour créer des mises en page plus ou moins complexes, à partir d’un HTML très simple. Voilà à quoi ressemble typiquement un morceau de page jQuery Mobile :

Exemple de code

Un design personnalisable

Le design de jQuery Mobile est personnalisable via une simple feuille de style. De base, 5 styles sont proposés, et il est possible d’en créer d’autres. Depuis quelques versions le Framework a introduit une feuille de style « structure » et une feuille de style « theme », ce qui permet de faire des modifications de CSS sans devoir créer une surcharge de la feuille de style de base. Comme pour jQuery UI, un thème roller permet de créer son propre thème très facilement.

Pour voir les possibilités en matière de graphisme, vous pouvez faire une tour sur le site JQM Gallery qui répertorie quelques sites / apps créées avec jQuery Mobile où jeter un coup d’oeil à ce tutoriel (en anglais).

jQuery Mobile Gallery

Attention cependant : comme tout Framework comportant son propre CSS, il peut devenir très vite lourd en termes de poids de “sur-coucher” les thèmes jQuery. Pour créer un thème très spécifique, il vaut mieux soit partir d’une feuille de style vierge et ne styler que les éléments dont vous avez vraiment besoin, soit faire le ménage et supprimer ce qui ne sert à rien. La feuille de style de base propose par exemple plusieurs transitions CSS3 entre les pages. En général on ne se sert que d’une seule. On peut donc imaginer supprimer les transitions inutiles, etc.

Des modules personnalisables

jQuery Mobile est, depuis quelques temps déjà, proposé dans sa version “decoupled” qui permettait encore une fois de gagner en performance en n’utilisant que les modules dont on a besoin. Depuis sa dernière version, un builder est proposé en version beta. Il permet de choisir les éléments et modules que l’on souhaite, et faire son “custom build” (comme Modernizr par exemple). Plutôt pratique sur du petit projet si on veut vraiment optimiser les performances.

Les limites de jQuery Mobile

C’est là que ça devient moins drôle. Je vous ai montré combien jQuery Mobile était sympa, je vais maintenant quelque peu noircir le tableau.

Dans le web, la seule vraie réponse est “ça dépend” ! Il en va de même pour la question “Vais-je utiliser jQuery Mobile sur mon projet ?”.

JQuery Mobile est tout sauf une solution miracle : il ne s’agit pas d’un script plug and play qui va magiquement transformer votre site en un site optimisé mobile. Il n’est donc PAS conseillé de l’utiliser si vous avez juste besoin d’optimiser l’affichage mobile de votre site. Pour ça, une optimisation responsive à base de media queries bien choisis (entre autres) suffit largement.

Son look and feel de base laisse peu de place au branding de la marque de votre client, et tous les sites se ressemblent, à moins de faire un très gros travail sur le CSS qui vous prendra beaucoup de temps. Il n’est donc pas forcément conseillé de l’utiliser pour des sites vitrine que vous voulez optimiser “rapidement”, mais plus pour des sites “applicatif”.

Le poids de la librairie est également un paramètre non négligeable : 24KB pour le script minifié, 7KB pour la feuille de style de base minifiée elle aussi. Sans oublier qu’il faut inclure la librairie jQuery ! Autant de ressources à télécharger pour un utilisateur en situation de mobilité dont la bande passante peut être assez limitée. Encore une fois ici, la version decoupled et les feuilles de styles personnalisées peuvent vous aider, mais ça demande du temps.

Enfin, notons également que pour le moment, malgré les progrès des APIs HTML5 et JavaScript, tout ce qui est faisable sur une application native ne l’est pas forcément dans un navigateur. Par exemple, si l’application a besoin d’un scanner de Barcode, du gyroscope ou de l’appareil photo, ce n’est pour le moment pas possible (certaines librairies et API commencent tout de même à s’y intéresser). Une solution alternative sera d’utiliser Phonegap, qui permet des passerelles entre fonctionnalités natives et jQuery.

Quelques questions

Je vais finir cet article par des questions, certaines que j’ai pu me poser moi-même, et d’autres qui m’ont été posées par des confrères Webdesigners et développeurs.

Quel environnement de développement faut-il pour créer une application jQuery Mobile ?
La navigation jQuery Mobile utilisant l’Ajax, il faudra un serveur capable de le supporter. En environnement de développement, même si l’on crée des pages HTML, il faut donc les lancer depuis un serveur local ou distant (Wampp, Xampp, EasyPHP, etc.) pour que la navigation fonctionne. Pour les outils, un éditeur de codes HTML, CSS et JavaScript classique suffit.

Est-ce que les applications web créées avec jQuery Mobile ne fonctionnent que sur smartphones ?
Non, comme on peut le voir sur le site de démonstration, les applications Web fonctionnent également sur PC, mais gardent un look and feel prévu pour smartphone. Cependant, certains évènements comme le changement d’orientation ou le swipe ne seront pas disponibles.

Mon client veut une application « sur le store ». Peut-on utiliser jQuery Mobile dans une application native ?
Il est tout à fait possible d’utiliser jQuery Mobile dans une application native. Une des solutions possibles est de construire l’application avec le Framework jQuery Mobile, puis de l’encapsuler dans une application native en utilisant Phonegap. Attention cependant à Apple qui a tendance à parfois refuser les application “natives” qui ne sont que des coquilles d’un site embarqué.

Une autre solution consiste à utiliser les « Webviews » natives d’Android et iOS, et d’y « afficher » l’application comme s’il s’agissait d’un navigateur. Dans ce cas les fichiers HTML, CSS, JavaScript, images, etc. peuvent soit être stockés sur l’appareil (et donc téléchargés au moment de l’installation de l’application), soit être en ligne (nécessite une connexion).

Est-il possible d’adapter le design en fonction du système de l’appareil pour donner une apparence plus « native » ?
Le seul moyen est une détection du User agent, avec tous les risques d’erreurs que l’on connaît. Dans le cas d’une application native utilisant une Webview, c’est un peu plus simple puisque le développeur peut définir un User Agent que l’application va envoyer au serveur (oui, on peut tricher ^^). On pourra alors changer le HTML, ajouter une classe .iOS au body pour pouvoir changer de style en fonction, etc.

Où placer les scripts qui ne vont servir que sur une page ?
Les pages d’un site jQueryMobile sont chargées en ajax. Uniquement les scripts et ressources contenues dans le header de la première page seront donc chargés. Cela implique que tout script placé dans le header d’une page non première ne sera pas chargé. Pour ne charger un script que sur une seule page, il ne faut pas le placer dans le header, mais après la balise data-role=page_de_celle-ci.

Conclusion

J’espère que cet article vous a permis de découvrir ce Framework et vous a donné une vision plus claire de ce qui est faisable ou non. Gardez bien à l’esprit que pour son utilisation, chaque projet étant différent, cela va dépendre du contexte, du projet, du client, etc. The right tool, for the right job.

Et vous, avez-vous déjà testé jQuery Mobile ? N’hésitez pas à faire vos retour d’expériences.

Pour aller plus loin

• La documentation officielle de jQuery Mobile
• JQuery Mobile best practises
• Mon tutoriel pour créer une application de choix de restaurant
• Codiqa, pour créer des prototypes rapides avec jQuery Mobile
• 50 jQuery Mobile Development Tips