Preparing for Sencha Touch Production Deployment

After your long, laborious, and hopefully entertaining adventure developing the next greatest Sencha Touch mobile app, the time has come to release it to the world. Whether you’re releasing your app to the general public or a targeted audience, your needs are different than they were during development phases. Sencha Touch enables you to rapidly build a rich mobile application. However, when it is time to release it, there needs to be considerations taken in regards to overall performance. Sencha Cmd (pronounced “command”) is a free tool that supports the lifecycle of your application, from development to production.

Leveraging efficient production builds contributed to the success of our clients’ when deploying their apps to the public sphere. In our product development engagements, Modus Create engineers closely adhere to best practices and maintain a high standard of quality.

Benefits of a Production Sencha Touch Build

1. Faster Application Load Time

• When creating a production build, Sencha Cmd traverses your application tree and only includes framework classes that are needed (and their dependencies). This allows for a much smaller footprint resulting in a faster initial load time.
• Production builds leverage the YUI Compressor to minify and obfuscate your combined Library & Application source code. For more on the YUI Compressor as well as some related readings about code minification and obfuscation, see here: YUI Compressor

Here is an example of how much smaller the application become after a production build (a starter Sencha Touch 2.3 app was used):

Development Version

Production Build Initial Load

Production Build Subsequent Load

2. Built-in Offline support

• Sencha Cmd production builds are offline capable. Upon first application load, all necessary source files are loaded into LocalStorage to be read for all subsequent loads.
• A Cache Manifest file is generated automatically that can be configured and is used to store version checksums.
• When there is an application change released, the local cache gets patched with the delta updates. This ensures that the user will always be using the latest version of the application.

3. Identify common mistakes in your code

• All code is processed by JSLint with all warnings presented to the console.
• Broken code and misuse of reserved keywords will abort the build process and present the user with a detailed error message.

Preparing Your App for Production

Here are a few basic steps to take and things to consider when you’re about to release your Sencha Touch App:

1. Ensure your testing and production builds are fully functional.

• When you are developing your Sencha Touch app you are leveraging Sencha’s dynamic dependency loader (Ext.Loader). The Loader loads class dependencies both Asynchronously and Synchronously. Often times you may forget to explicitly require a dependency class and the Loader will bring it in for you. For testing and production builds, this will not happen and you run into an exception.
• Another important thing to consider is your initial application load. In development, your application classes and their dependencies are loaded dynamically on an as-needed basis. In testing and production your app.js file is processed in a sequential fashion. Therefore you may expect some reference to exist that is not available yet. A common issue is referencing the application object inside the Class’s definition.

2. Code with minification in mind.

• When deploying a mobile app, you always to keep in mind those with slower mobile broadband connections. Of course when you have 30Mbps bandwidth at home, you’re not going to care about a few lousy kilobytes. On a 3G connection though, it’s an entirely different story. There a few things you can do to improve code minification:
  • Assign frequently used keywords to a variable. (e.g. var me = this;) More about this convention on Mitchell Simoens’ blog.
  • Refactor and reuse functions where possible.
  • Refactor String literals that are reused.

Here is an example of these principals in action:

Unoptimized Code

Unoptimized Function

Optimized Code

Optimized Function

YUI Compressor Results

3. Prepare web server redirection.

• Often times when deploying a mobile web app we want to make sure we make the app is reachable to the designated users. This means that if we designed the app for Phones and not Tablets, we may not want tablet users to see the mobile app and redirect them to the desktop version. Here are a few resources that help with user agent parsing and redirection:
  • Apache Mobile Filter
  • NGinx Mobile Redirection
  • Multi-language User Agent Parser Implementation

Conclusion

Hopefully this post helps you with grasping the importance of a Sencha Cmd production build and gives you some tips on how to make your production build smaller, load faster, and less error-prone. We recommend that you follow these tips when you’re beginning to think about releasing your app to production. Recently Modus Create CTO Jay Garcia and Art Kay from Sencha hosted a webinar on Best Practices for Enterprise JavaScript Applications that will help you make your code even better. Feel free to leave a comment with your own experiences and suggestions about Sencha Touch production deployments!

A Note on Ext JS: Sencha Cmd is also used for Ext JS production builds. Many of these concepts can be applied to preparing your Ext JS apps for production. Some things are not applicable such as offline cache and User Agent redirection.

Related Reading

• Sencha Cmd Not Working in OS X 10.9 Mavericks
• Sencha Cmd Packages