Packaging Bancha Apps with Sencha Cmd

by Roland Schütz (comments: 0)

Introduction

Sencha Touch or Ext JS applications consist of a lot of files and debug statements. To create a shippable version of an app, Sencha developers can leverage Sencha Cmd to build packaged versions. 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 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. Sadly the Sencha documentation is a bit fragmented on this subject. A in-depth tutorial of how to build your first app using Sencha Cmd will follow soon.

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 the by Bancha build model definitions and the Remote API to be able to pack it.

Using the Remote API (Bancha internals)

Bancha uses Ext.Direct internaly to expose server-side methods. The Ext.Direct spec does not support asynchronous loading of the API, in contrast to the Sencha Class Loader.

To enable the Sencha's Ext.Loader to automatically load the Bancha API asynchronous during development, Bancha simply includes the Remote API as a singleton class. This is a new feature of Bancha 2 and the Remote API class is now available at /bancha-api-class.js.

Bancha’s Initializer will require the Remote API and when everything is loaded, Bancha models and remote procedure calls will be initialized and ready to use.

In production we want to include the class in the compressed JavaScript version. Since the Remote API is dynamically build we need to first create a static version of the Remote API. This will be achieved by adding a –before-build to create a current snapshot with Sencha Cmd.

Using the Bancha models (Bancha internals)

How Bancha loads models in the development version is explained in our previous blog posts Building a customer class loader for Sencha.

In production, Sencha Cmd will parse the local JavaScript files to search for Ext.define definitions. For Sencha Cmd to be able to parse Bancha model definition we need to add them to our Remote API.

In Bancha 2 all logic from Bancha.createModel(modelName) has been refactored into Bancha.data.Model. This provides us the ability to make very simple Bancha model definitions, which will be understood by Sencha Cmd.

Here is an example of this simple definition, all logic can be found in Bancha.data.Model:

Ext.define('Bancha.model.TireClass', {
    extend: 'Bancha.data.Model'
});

This leads to our final Bancha JavaScript file: /bancha-api-packaged/models/all.js

Configuring Sencha Cmd

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.

Sencha Cmd needs to include the Bancha classes. Therefore we add ,${app.dir}/../../Plugin/Bancha/webroot/js to the app.classpath configuration in /.sencha/app/sencha.cfg (you might need to change this path).

We also need to configure from where the Bancha Remote API should be loaded. To do this we add a bancha.api.url configuration.

Your final configuration should look like this:


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

Retrieving a local Remote API

This part is pretty straight forward, we simply extend –before-app-build and –after-app-build task in /.sencha/app/plugin.xml:

<target name="-before-app-build">
    <!-- Copy the Bancha Remote API for packaging with Sencha CMD -->
    <get src="${bancha.api.url}" dest="${app.dir}/app/REMOTE_API.js"/>
</target>
<target name="-after-app-build">
    <!-- Remove the file again -->
    <delete file="${app.dir}/app/REMOTE_API.js"/>
</target>

App versus Workspace

If you are building multiple applications with shared code, you might want to add the Bancha configurations to ${workspace.dir}/.sencha/workspace/sencha.cfg instead. In this case the configurations will be applied for each application in the workspace. You can find more information about workspaces in the Sencha Docs.

Conclusion

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 model definitions.

Go back

Comments

Add a comment

Subscribe

Sign up for exclusive Bancha news!