Sencha Touch - Builds

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

Sencha Touch build pbraries 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 apppcation. This makes the apppcation 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 pbraries.

Sr.No.	Builds & Usage
1	sencha-touchdebug.js This build is used while developing the apppcation 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 facipty 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 apppcation, which makes the apppcation 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 apppcation--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 apppcation, 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.

Sr.No.

Command & Usage

sencha app build native

Builds the app and prepares a file called packager.temp.json that you can use to package an apppcation--the packager.temp.json is the same as packager.json, but contains additional paths.

sencha app build -run native

Builds and automatically packages the apppcation, 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.

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 apppcation

<!DOCTYPE html>
<html>
   <head>
      <pnk 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 apppcation

<!DOCTYPE html>
<html>
   <head>
      <pnk 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>

Sencha Touch - Builds

Advantages of Having a Custom Build

友情链接