Today's demand for a web application is to develope the fast application with less development efforts.
Sencha touch helps in doing so with the ease as it provide number of build libraries to choose based on development or production code along with the facility to create custom build.
Secha touch build libraries loads the classes dynamically, Dynamic loading stands for the classes gets loaded when required and only those classes will be included which are rquired in the application. Which makes the application faster as the number of files to be loaded reduces so the time to load decreases simultaneously.
Sencha touch 2.x provides five build libraries as:
With the above mentioned builds sencha touch provides facility to create custom builds.
Advantages of having custom build:
Custom build does not loads all the touch files it loads only those files which we are using in the application, which makes the application faster and easily maintainable.
Sencha CMD is used to create custom build. To create a custom build in sencha CMD go to the directory where our app file resides and type one of the following commands to create a build.
Once the build is successful it will generate all-classes.js file which we need to include in our index.html to make it production ready.
Below code shows the changes to be done for production ready code.
Index.html before building application
Sencha touch helps in doing so with the ease as it provide number of build libraries to choose based on development or production code along with the facility to create custom build.
Secha touch build libraries loads the classes dynamically, Dynamic loading stands for the classes gets loaded when required and only those classes will be included which are rquired in the application. Which makes the application faster as the number of files to be loaded reduces so the time to load decreases simultaneously.
Sencha touch 2.x provides five build libraries as:
| Builds | Usage |
|---|---|
| sencha-touch-debug.js | This build is used while developing the application locally. It is non minified version with all the comments and debug logs for easy debugging while development. |
| sencha-touch.js | This file is used for production purpose it is the minified version when we have custom build. |
| sencha-touch-all.js | This file is used for production purpose it is the minified version when we do not have custom build. |
| sencha-touch-all-debug.js | This file is used for debugging in production. It is not not minified and has all the comments and debug logs. |
| sencha-touch-all-compat.js | This build is used to migrate the version 1.x to version 2.x. It gives warning where ever the version 1.x code is not compatible and need code modification. |
Advantages of having custom build:
Custom build does not loads all the touch files it loads only those files which we are using in the application, which makes the application faster and easily maintainable.
Sencha CMD is used to create custom build. To create a custom build in sencha CMD go to the directory where our app file resides and type one of the following commands to create a build.
| Command | Usage |
|---|---|
| sencha app build native | Builds the app and prepares a file called packager.temp.json that you can use to package an application--the packager.temp.json is the same as packager.json, but contains additional paths. |
| sencha app build -run native | Builds and automatically packages the application, and launches the appropriate simulator |
| sencha app build package | Builds the app with packaging support, but does not configure a packager JSON file. This is useful for projects that manually maintain multiple packager.json files |
Below code shows the changes to be done for production ready code.
Index.html before building application
<!DOCTYPE html> <html> <head> <link href="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-debug.js"></script> <script type="text/javascript" src="app.js"> </script> </head> <body> </body> </html>Index.html after building the application
<!DOCTYPE html> <html> <head> <link href="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch.js"></script> <script type="text/javascript" src="app.js"> </script> <script type="text/javascript" src="app-classes.js"> </script> </head> <body> </body> </html>
No comments:
Post a Comment