Sencha Cmd: Native and Web Packaging

Note: Please upgrade to Bancha 2.4 for this improved integration.

Introduction

Sencha Cmd is a cross-platform command line tool that provides many automated tasks around the full life-cycle. The JavaScript compiler is framework-aware and knows the semantics of Sencha frameworks to produce minimal footprint builds from your source.

Sencha Touch or Ext JS applications consist of a lot of files, Bancha has many files, and those contain lots of debug statements. To create a shippable version of an app, Sencha developers can leverage Sencha Cmd to build packaged versions, it will remove the debug statements and pack all code into one JavaScript file. 

Sencha Cmd is able to convert a Sencha Touch application into a first-class, mobile application that has access to device functionality and can be distributed in App Stores.

To use any of these features Bancha needs to play nicely with Sencha Cmd. This post will describe how Bancha can be used with Sencha Cmd. You can find an introduction into Sencha Cmd in the Sencha Docs

Integrating with Bancha

The Sencha Cmd compiler is a JavaScript-to-JavaScript, framework-aware optimizer. It is designed to "understand" your high-level Ext JS and Sencha Touch code and produce the smallest, most efficient code possible to support these high-level abstractions.

For this to work, Sencha Cmd needs to be aware of Bancha. To do so simply follow these two steps:

Configure sencha.cfg

When you have created an app (sencha generate app <appName> <path>), a folder .sencha will be available inside your project. Augmenting these configurations will allow Sencha Cmd to understand Bancha.

In your project open /.sencha/app/sencha.cfg and replace your app.classpath definition with the following


# Bancha configuration bancha.api.url=http://my-local-host.com/bancha-api-packaged.js bancha.folder=${app.dir}/../../Plugin/Bancha app.classpath=${app.dir}/app.js,${app.dir}/app,${bancha.folder}/webroot/js

Please make sure to replace http://my-local-host.com with your local path to your CakePHP application.

Include the Bancha build logic

This part is straight forward, simply add the following lines into your /.sencha/workspace/plugin.xml inside the project tag:

<!-- Add Support for Bancha -->
<import file="${app.dir}/${bancha.folder.relative}/_sencha/build.xml"/>
<target name="-before-app-build" depends="-bancha-before-app-build"></target>
<target name="-before-app-refresh" depends="-bancha-before-app-build"></target>
<target name="-after-app-build" depends="-bancha-after-app-build"></target>
<target name="-after-app-refresh" depends="-bancha-after-app-build"></target>

Debugging Production Builds

Debugging production builds can be pretty tricky, especially because content will not be reloaded when you reload the page in the browser. The packaged version uses the app cache, so if you want to reload all the data you need to remove all app cache entries.

In Chrome you need to first delete the manifest file:

  • Open the url chrome://appcache-internals/ and remove the App Cache entry.
  • Click on the menu Menu > Tools > Clear Browser Cache.
  • In the new window select both "Clear Cookies and other Website and Plug-in Data" and "Clear Cache" and click "Delete browser cache"

Now when you reload the page all data is retrieved again from the files.

The Result

After adding a few lines to Sencha Cmd files, you are able to package Bancha apps. Calling sencha app build production from within your app directory will generate a packaged version of your app, including Bancha’s Remote API and utility methods.

Comments

Add a comment