Niveau : Confirmé

jQuery Mobile par l'exemple : performances et conclusion

Tutoriel par (Développeur/Intégrateur web, France voisine de Genève)
Créé le (20202 lectures)
Tags : jquery mobile

Sommaire


Performances et conclusion

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 :

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 ! :)