Behind the Sencha Command Utility and the Build Process

The Sencha command utility is a cross-platform command line tool that helps make it easier than ever to develop applications with Sencha Touch 2. The tool consists of many useful automated tasks around the full lifecycle of your applications, from generating a fresh new project to deploying an app for production.

This article will help you understand the Sencha command utility as it’s used for your Sencha Touch 2 application’s build process.

This article is written with the assumption that you are already familiar with [Sencha Touch 2 SDK](https://www.sencha.com/products/touch/download/), [SDK Tools](https://www.sencha.com/products/sdk-tools/download/) and [basic operations using the Sencha command utility](http://docs.sencha.com/touch/2-0/#!/guide/command). If you aren’t familiar with these topics yet, head to the [Getting Started Guide](http://docs.sencha.com/touch/2-0/#!/guide/getting_started) and learn how to quickly setup your development environment and generate a working Sencha Touch 2 application.

### How It Works

The Sencha command utility is a pure JavaScript application running within the Node.js runtime. The source code is located inside the `command` directory of the Sencha Touch 2 SDK. This application requires that Node.js and other tools exist on your system, such as PhantomJS, Open-vcdiff, Closure Compiler, YUICompressor, etc. These binaries are included in the SDK Tools installer, so you don’t have to worry about downloading them yourself.

After the SDK Tools is installed, from a command line or Terminal, `sencha` command simply delegates to the following:

/path/to/sdk_tools/bin/node /path/to/sdk/command/sencha.js [arguments…]

with `/path/to/sdk_tools` being where the SDK Tools were installed, and `/path/to/sdk/command` being the path to a Sencha command utility directory. It is that simple.

### Application Structure

The Sencha command utility helps you create a fresh new application with a one-line command:

sencha app create MyApp /path/to/myapp

Two of the most important parts from the output are the `sdk` directory and the `app.json` file.

#### The ‘sdk’ directory

This directory is a copy of the SDK from which the application was generated. This way all your application source code is self-contained which makes it easy to archive, share and version-control. Also, to upgrade or downgrade an existing application, you simply replace the `sdk` directory.

However, if for some reason you need to change the name of this directory or store it in a different location outside of the application, simply edit its path in the `.senchasdk` file. This special file gives the Sencha command utility a hint on where to look for the SDK within the current working directory.

#### The ‘app.json’ file

Getting a Sencha Touch 2 application up and running can be as simple as creating an HTML document and including a bunch of JavaScript / CSS files in the right order. However, when it comes to deployment, things can get complex quickly, and there is a lot of work involved in optimizing your application in a production environment. Usually pre-production optimization boils down to:

* Minimizing network payload size
* Minimizing the number of HTTP requests
* Providing instant UI feedback when the application is loaded for the first time
* Caching non-frequently changed resources on the client, when possible
* Minimizing network transfer when updating between different versions

In other words, that means:

* Figuring out a minimal list of dependencies your application needs instead of including the whole library
* Concatenating separate JavaScript/CSS assets into single bundles and minifying them
* Using asynchronous loading mechanism
* Storing all JavaScript/CSS assets locally on first load and evaluating them on subsequent access without any network connection required
* Generating deltas between all versions of your application and automatically instructing the client to download and then patch their local copies

In order to automate all of that for you in just one single command (`sencha app build`), the Sencha command utility needs to know everything about your application’s structure, for example:

* Where the required JavaScript/CSS files are, and in what order to include them
* What update mechanism to use for each of these assets
* What files and directories to copy along when doing the build
* Where to generate the builds

All of this information is contained inside a JSON-formatted configuration file named `app.json`. Two of the most important configuration items to be highlighted here are “`js`” and “`css`”.

With the new application structure, JavaScript and CSS assets should never be physically linked inside the HTML document (for example, manually added as `