Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
November 25, 2013

Preparing for Sencha Touch Production Deployment

Web and Mobile Development

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

Development Version

Production Build Initial Load

Production Build Initial Load

Production Build Subsequent 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

Unoptimized Function

Optimized Code

Optimized Function

Optimized Function

YUI Compressor Results

funnel

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
Posted in Web and Mobile Development
Share this

Stan Bershadskiy

Stan Bershadskiy specializes in all things JavaScript with vast knowledge in Sencha frameworks. Recently, he has directed his focus towards React Native and has co-authored The React Native Cookbook. Stan is located in New York City and can be found presenting at conferences around the country. During his time with Modus Create, Stan filled the role of Architect.
Follow

Related Posts

  • Sencha Touch 2.0
    Sencha Touch 2 Touch Events Re-firing

    While generally we try to avoid native browser alert() and confirm() we sometimes have no…

  • Sencha Touch 2.0
    Sencha Touch 2 Touch Events Re-firing

    While generally we try to avoid native browser alert() and confirm() we sometimes have no…

Subscribe to the Modus Newsletter

Receive the latest insights from our team each month.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

Scroll To Top
This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Save & Accept