Sencha Touch - Builds

Today's demand for a web application is to develop a fast application with less development efforts. Sencha Touch helps in doing so with ease as it provide a number of build libraries to choose from, based on the development or production code along with the facility to create a custom build.

Sencha Touch build libraries loads the classes dynamically. Dynamic loading stands for the classes that gets loaded when required and only those classes will be included which are required in the application. This makes the application run faster as the number of files to be loaded reduces, simultaneously decreasing the time to load.

Sencha Touch 2.x provides the following five build libraries.

Sr.No. Builds & Usage
1

sencha-touchdebug.js

This build is used while developing the application locally. It is a nonminified version with all the comments and debug logs for easy debugging while development.
2

senchatouch.js

This file is used for production purpose. It is the minified version when we have a custom build.
3

sencha-touchall.js

This file is used for production purpose. It is the minified version when we do not have a custom build.
4

sencha-touchall-debug.js

This file is used for debugging in production. It is not minified and has all the comments and debug logs.
5

sencha-touchall-compat.js

This build is used to migrate the version 1.x to version 2.x. It gives a warning wherever version 1.x code is not compatible and needs code modification.

With the above mentioned builds, Sencha Touch provides a facility to create custom builds.

Advantages of Having a Custom Build

Custom build does not load 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 a custom build. To create a custom build in Sencha CMD, go to the directory where the app file resides and type one of the following commands to create a build.

Sr.No. Command & Usage
1

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.
2

sencha app build -run native

Builds and automatically packages the application, and launches the appropriate simulator.
3

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.

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.

Following 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>
Advertisements