Autres possibilités non "visibles" dans cet exemple
Une fois n'est pas coutume, je vous invite à aller lire la documentation et les exemples de jQuery Mobile. Les exemples sont très simples, et les possibilités sont très nombreuses :
- des transitions diverses et variées,
- les types de listes sont très nombreux, notamment avec des options de tri natifs particulièrement pratiques et simples à implémenter,
- les différents thèmes par défaut sont présents,
- toutes les options possibles pour les boutons,
- nouveauté de la version 1.2.0, des pop-up améliorées font leur apparition,
- etc.
Il est assez aisé de trouver son bonheur dans cette documentation. Comme cela a été dit plus haut, l'idée de ce tutoriel est d'étudier un exemple simple, pas de faire un copier/coller bête et méchant de la documentation.
Considération sur les performances
Il est indispensable d'activer la mise en cache et la compression GZIP/DEFLATE sur des sites créés avec jQuery Mobile. Pour donner un ordre d'idée, les scripts de la page d'accueil de l'exemple pèsent 318 Ko non-compressés, et 94 Ko compressés. Le gain est plus qu'appréciable !
Après essai sur WebPageTest, le first view est à 2.6 secondes, et le repeat view lui est à 1.78 secondes. Cela reste très correct. Ajoutez à cela qu'une mise en cache judicieuse permet de ramener les requêtes au strict minimum.
Du côté des petits plus, l'exemple utilise un cache manifest pour stocker les éléments en local afin d'accélerer encore le rendu des pages sur les mobiles. Voici le contenu du fichier cache.manifest :
CACHE MANIFEST
# 2012-10-03:v3
CACHE:
/favicon.ico
/apple-touch-icon.png
/js_css/jquery.js
/js_css/jquery.mobile.min.js
/js_css/js_custom_kiwi.js
/js_css/jquery.mobile.min.css
/js_css/images/ajax-loader.png
/js_css/images/ajax-loader.gif
/js_css/images/icons-18-black.png
/js_css/images/icons-18-white.png
/js_css/images/icons-36-black.png
/js_css/images/icons-36-white.png
/img/logo2012.png
/offline.html
FALLBACK:
/ /offline.html
NETWORK:
*
Pensez à bien ajouter la ligne :
AddType text/cache-manifest .manifest
dans votre fichier .htaccess pour que le cache manifest fonctionne correctement en étant délivré avec le bon type MIME au navigateur (en-têtes HTTP).
Conclusion
Après avoir essayé jQuery Mobile, vous retrouvez toute l'essence de jQuery : Write Less, Do More (écrivez moins, faites plus : la devise de jQuery). Il permet de pouvoir rapidement produire sans avoir besoin d'énormément de connaissances de base. Le tour de force de jQuery Mobile est de permettre de simplifier grandement certains aspects d'un univers qui peut être diaboliquement retors : le Web mobile.
jQuery Mobile colle parfaitement à l'idée que je me fais d'un framework : un apprentissage plutôt aisé et une grande simplification du développement et de l'intégration. Pour un investissement en temps assez raisonnable, vous avez des résultats palpables. Comme tout framework, il peut y avoir des difficultés si l'on cherche à sortir du cadre, mais en même temps, si l'on choisit un framework, c'est bien pour éviter de réinventer la roue ! :)