Minify all JavaScript Files in the Sencha App - sencha-touch

I have a Sencha Application which contains Models, Controllers, Views etc. I need to minify all models, views, controllers, app Javascript file into a single JavaScript file. Any recommendation of tools on a Mac.

Sencha Cmd has an inbuilt function for this. Open up your command prompt, change into the root directory of your project and run:
sencha app build production
And it will generate a minified version of your app in YourApp/build/production/YourApp.

The answer is indeed sencha app build production
For a step by step here is an excellent blog post from Sencha
http://www.sencha.com/blog/getting-started-with-sencha-touch-2-build-a-weather-utility-app-part-1/
Its a three part blog post, you'll have fun following it, and in the third part it does make a build for production.
Here is a demo of how fast loads when is production build.
http://prosp-anonym111.rhcloud.com/simulador/build/production/reestructura/index.html
best regards

Related

How to reduce the size of Sencha Touch Application?

I am building a Sencha Touch application. Even the most basic application is of size 27 MB. Now I want to commit the code online. The touch folder inside the application is of 20 MB which is way too much.
So how can I compress my application and reduce the size of my application?
use sencha cmd to minify to one js file.
from the application's root in the terminal or command prompt, run "sencha app build production" or "sencha app build testing" dependent on if you want the source code minified also.
Make sure you have sencha cmd installed first.
Also make sure each of your classes is requiring only the source components you need. What you're doing right now is deploying every single line of sencha touch, whereas in reality, if you're not using the carousel component, for instance, you don't need this in your deployed app.
Requiring in the classes you need only, and then building the app file in this way, will give you a nice compact single js file that is many many times smaller.
At first, what do you want is not clear. Why you want to compress the application?
If you want to run it on device, you can minify it using sencha cmd. From within your application folder run this command
sencha app build production
and you can see your app size(build version) will reduce drastically. Further you can make apk and/or ipa with this build version only.

Sencha Cmd 4: minify the javascript code of ExtJS and Sencha Touch

I have developed two applications using ExtJS and Sencha Touch. I would like to minify the JavaScript code and create a single js file for all classes used in the applications (separately, I am trying to minify the code and not to build. My task doesn't depend on ExtJS or Sencha Touch).
I used sencha cmd verions 4 to do. It am facing some issues with both ExtJS and Sencha Touch application.
In ExtJS, It is not taking all the classes for minifying and creating a single js file. It is taking the classes which are mentioned in required method. If I want to minify the all the javascript classes, I will have to include all the classes in require method in app.js. This is not fair.
I used the following command. It is not giving any error
sencha -sdk <path-to-sdk> compile --classpath=<classpath> page -in index.html -out build/index.html -yui
In Sencha Touch, It is targetting for mobile environment (eg: Andriod, iPhone, windows, etc.). I am trying to compile and minify and not to package application.
Please let me know how to do.
This is working as intended. Sencha build process looks for dependencies (via require) and loads them accordingly, getting you the smallest build necessary. Good practice is to always set your requires.
To get around this, if you really want to just include all classes, you can add standalone requires to the top of the app. Since Ext.Loader can accept wildcards, you can just do Ext.require('App.model.*') and it will load all the individual model files, for example.

How do I speed up load times for Sencha Touch

I am currently developing a Sencha Touch application using Cloud 9 IDE. I created the app on my local machine and later imported the project to Cloud 9. Everything works fine but an annoyance that happens is the load times for my page are greater than a minute. I think it has to do with all the files that are being individually loaded.
What is the best way to speed up the sdk load times? I am unsure how to use the sdk tools and do not know if you can even install them into Cloud 9. Would it be better to abandon the sdk tools and load Sencha manually?
Key is to minify & aggregate all the JS & CSS so that less number of bytes are transferred in less number of http calls. Sencha Cmd has the feature to do all this and create a packaged build to load fast, here is what you have to do from your app directory:
sencha app build package
This will create .>build>package folder with minified version of your app.
For more details read http://docs.sencha.com/touch/2-1/#!/guide/command and look at this http://vimeo.com/55148644 for illustration

using sencha touch with rails 3.1

I created an example app on how to use Sencha Touch,Rails 3.1, Devise and Mongodb.
I put the Sencha Touch files in public folder, but i would like to know if there is a way to put it in the assets folder, doing it the rails way.
My issue is that everything gets compiled into one big javascript file, and i don't really want the code that is used for the non login part of the app always available.
you can see the source code for the app here: link
Thanks
move your javascript files to app/assets/javascripts/views/...view.js then they will be compiled for each individual view.

problem running sencha codes in eclipseEE

How to run sencha touch codes in phonegap framework using ECLIPSE IDE?
We are facing problems as where to paste the codes and where to post the sencha libs..also we cant figure out how to run the code on the android emulator?do we need to run with a web server?
currently we have pasted the sencha code in assets folder(www subdirectory) and the sencha libraries in libs directory.But wen we run it in the emulator, it just displays the HTML part and not the sencha UI??!!!
plz reply soon.
Obviously you need to make sure that the HTML has included the correct links to the lib and app resources, in the head of the document.
See http://www.sencha.com/learn/Tutorial:Sencha_Touch_Hello_World for an example of how to set up the Sencha Touch directories and outer HTML.