Preparing Sencha Touch Apps for Production

During development, I, or perhaps most if not everyone will point the Sencha Touch SDK in the Sencha Touch folder, and the index.html usually looks like this (I don’t usually debug CSS):
[cc lang=”html4strict” escaped=”true”]
<html lang=”en”>
<head>
<title>Movie Mango</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<script type=”text/javascript” src=”../sencha-touch-2/sencha-touch-debug.js”></script>
<script type=”text/javascript” src=”app.js”></script>
<link rel=”stylesheet” type=”text/css” href=”../sencha-touch-2/resources/css/mango.css” />
</head>
<body>
</body>
</html>[/cc]

In this setup, I pointing the Sencha Touch js file in the Sencha Touch SDK folder and also the CSS file I created for my own theming there. If I wanted to deploy this app on server, I can’t just copy the sencha-touch-debug.js out or sencha-touch-all.js out and update my index.html to point to that, it should be minified and optimized. Those brilliant guys in Sencha provided us with the neat little tool Sencha SDK Tools, that help us compile every classes that we need and, yes, basically everything that we need (by just going through our code, brilliant!) and put them all in one single minified JavaScript file, and that is what we need for deployment.

After installed the Sencha SDK Tools, we need to us the command prompt/terminal and navigate into the project folder. Let’s say now my folder structure looks like this:

MovieMango
|------ app.js
|------ index.html
+------ app
        +------------ controller
        +------------ view
        +------------ store
        +------------ model

First, we need to run this command in the root folder of the app:

sencha create jsb -a index.html -p app.jsb3

It then create a app.jsb3 file, edit it using text editor, scroll all the way down (of course, update those project name, license, misc info first) and locate this:
[cc lang=”javascript” escaped=”true”]
{
“name”: “Application – Production”,
“target”: “app-all.js”,
“compress”: true,
“files”: [
{
“path”: “”,
“name”: “all-classes.js”
},
{
“path”: “”,
“name”: “app.js”
}
]
}[/cc]

Add another file there, pointing to the sencha-touch-debug.js, now it looks like this:
[cc lang=”javascript” escaped=”true”]
“files”: [
{
“path”: “../sencha-touch-2/”,
“name”: “sencha-touch-debug.js”
},
{
“path”: “”,
“name”: “all-classes.js”
},
{
“path”: “”,
“name”: “app.js”
}
][/cc]
Save the file and head back to the terminal and run this command: (There is a dot at the end)

sencha build -p app.jsb3 -d .

This will generate all-classes.js, app-all.js, all we need to do is update the index.html to use the app-all.js, and don’t forget to copy the CSS file over here, I’m using Sass and Compass, so the CSS file I have already minified.

Previously I didn’t include the sencha-touch-debug.js file in the app.jsb3 file, end up it shows white screen when I run it on my actual iOS device, adding that solved the problem.

 

3 thoughts on “Preparing Sencha Touch Apps for Production

  1. Pingback: Amedar
  2. Firstly, thanks for your nice article. However, I have a question: Why should we include 3 files: sencha-touch-debug.js, all-classes.js and app.js. What do they mean?
    Can you please explain more detail. Thanks so much.

    1. The output file all-classes.js and app-all.js is the output of Sencha Touch framework with our code, app-all.js is the minified version of all-classes.js. I’m not sure why the generated jsb3 file include all-classes.js and app.js in the files section though. It’s been a while since I work with Sencha, I might be wrong.

      Anyway, you should check out Sencha Cmd, it support new Sencha releases and have better documentation.

Comments are closed.