Bonjour à tous,
Après avoir fait un tuto sur comment customiser l'interface user d'une applicatiohttp://www.blogger.com/img/blank.gifn sencha grâce au SASS, je vous propose d'optimiser la librairies sencha en fonction de vos besoins.
I. INTRODUCTION
Alors pourquoi optimiser la librairie sencha ? Le fichier sencha-touch.js a un poids de 366 ko, minifié. C'est un très gros fichier que doit parser le navigateur, puis executer. Même si les navigateur sont de plus en plus important en terme de performance, cela n'est pas suffit pour traiter aussi rapidement un fichier de tel grandeur. De plus , ce gros fichier prends de la bande passante lors du téléchargement et ralenti le chargement de l'application, surtout lorsque l'utilisateur utilise la 3G.
Nous sommes dans la situation comparable aux années 80, lorsque les ordinateurs avait une capacité de mémoire limité obligeant les developpeur avec gérer de manière optimal la ram de l'ordinateur.
Si vous avez une petite application, alors vous pouvez gagner jusqu'à 20-25% du poids total du fichier sencha.
INSTALLATION
Dans le repertoire de votre librairie sencha, vous verrez le fichier sencha-touch.jsb3.
Copier ce fichier dans le même repertoire et renommer le [MON_APPLICATION].jsb3
A la fin de votre fichier, vers la ligne 278, vous verrez le code suivant:
"builds": [
{
"name": "Sencha Touch",
"target": "sencha-touch.js",
"debug": true,
Vous modifier le target en mettant "target": "[MON_APPLICATION].js",
Vous pouvez aussi modifier l'attribut name . ^^
Attention !
Faites attention à ce que Java run time soit installer car, jsbuilder utilisera une application ".jar".
Vous etes prêt maintenant pour votre première compilation de la librarie sencha !
MA PREMIERE COMPILATION DE LA LIBRAIRIE SENCHA
Ouvrez un shell windows en faisant "Executer >> cmd"
Positionner vous dans votre librarie Sencha puis dans le repertoire JSBuilder.
Ensuite, taper la commande:
JSBuilder.bat -d [REPERTOIRE DE SORTIE] -p [PATH_DU_FICHIER .jsb3]
si votre application se trouve dans c://sencha,
et que le resultat de votre compilation sera dans le repertoire racine,
alors vous aurez:
JSBuilder.bat -d c:/sencha -p c:/sencha/[MON8APPLICATION].jsb3
Dans votre console, vous devriez avoir :
Loading the Sencha Touch Project
Loaded 13 Packages
Loaded 1 Builds
* Parse sencha-touch-debug.js with options:
- minVersion: 1.1
- debug: true
* Compress and obfuscate sencha-touch-debug.js...
Copy resources...
Done building!
Vérifier bien que vos deux fichiers [MON_APPLICATION].js et [MON_APPLICATION]-debug.js soit présent dans le repertoire de sortie !
OPTIMISATION
Maintenant, ouvrez le fichier [MON_APPLICATION].jsb3 et trouvez les lignes de types:
{"path": "[PATH]", "name": "[FILE_NAME].js"},
supprimer un par un ces lignes, et compiler à chaque fois, puis tester votre application de manière à ce qu'il n y a pas de bug.
Répeter l'opération jusqu'à ce que vous arrivez à la fin du fichier.
CONCLUSION
Vous savez maintenant optimiser une application sencha que ce soit le css ou le fichier javascript. Vous avez fait un geste pour l'environnement, en économisant les ko superflus ! Et surtout votre application sera plus fluide.
Si vous optimisez aussi les images(3 ko par image), alors votre application sera vraiment concu pour les mobiles !
