As a member of the Sencha Professional Services team, I am often tasked with helping our customers start new projects based on the Ext JS and Sencha Touch frameworks.
More often than not, Sencha Cmd is the foundation of these projects — and while Sencha has documentation explaining its robust features, I find that it’s crucial to explain how Sencha Cmd fits into an application development workflow.
Before we dive into the workflow itself, let’s step back and explore what Sencha Cmd is and why it is so valuable for enterprise software development.
What is Sencha Cmd?
Sencha Cmd is a command-line suite of tools for building your Sencha applications. Although it has been a part of the Sencha toolbox for a few years, Cmd has recently matured into the cornerstone of Sencha application development.
From scaffolding a new project to minifying and deploying your application to production, Sencha Cmd provides a full set of lifecycle management features to complement your Sencha project. With a rich command line syntax and Ant integration, Cmd is perfect whether you want to integrate it into your enterprise build environment or use it by itself.
Why should enterprises use Sencha Cmd?
Beyond the obvious benefits of lifecycle management tools, apps built using Sencha Cmd have a standardized architecture. This means that apps are easy to maintain and upgrade — but it also means that all Sencha developers build apps the same way.
By standardizing the tools and the application architecture, enterprises can expect all Sencha applications to integrate with their internal systems consistently. Development and deployment can now happen more quickly, and developers require less training and knowledge transfer.
Let’s take a look at the typical workflows that Sencha developers use to build their desktop and mobile applications.
Sencha Cmd: Architectural Workflow
When first starting a Sencha application, you will likely need the following commands:
- sencha generate workspace
- sencha generate app
- sencha cordova/phonegap init
- sencha upgrade and sencha app upgrade
sencha generate workspace
The first step in building any Sencha application is to create a workspace. The Sencha workspace is an environment in which multiple applications, libraries and frameworks (e.g. Touch and Ext JS) live side-by-side with their shared resources — helping Sencha Cmd understand the pages, frameworks, and the shared code used by the various parts of your application. This also enables Sencha Cmd to automate many common tasks.
To create a Sencha workspace:
sencha generate workspace ~/path/to/workspace
This command is normally only needed once, as the first step in the application development workflow.
sencha generate app
Once we have our workspace we should use Sencha Cmd to scaffold the initial application architecture. This will create an Ext JS or Touch application with default settings and all required dependencies:
sencha -sdk ~/path/to/extjs_or_touch_sdk generate app MyAppName ~/path/to/workspace/app
If you run this command from within an Ext JS or Touch SDK folder, you can drop the -sdk flag:
sencha generate app MyAppName ~/path/to/workspace/app
This command is also generally used once, at the very beginning of a project. However you might use this command more often if you create multiple apps inside the same workspace.
sencha cordova/phonegap init
Many of our customers who build mobile apps with Sencha Touch will also want to package their HTML5 application using Cordova or PhoneGap. Luckily, Sencha Cmd makes this really easy.
- Create a config.xml file which contains important metadata for your application (see the API docs linked above for an example and more resources).
- Run the following:
sencha cordova init [appId]
sencha phonegap init [appId]
…where appId is the fully-qualified app ID from your platform’s developer portal (e.g. com.sencha.myapp).
Sencha Cmd will then automatically scaffold the relevant application pieces through its hooks with the Cordova and PhoneGap CLIs. Later in your development workflow, simply run sencha app build native and Sencha Cmd will automatically copy your bundled application resources into the configured projects for iOS, Android or other platforms.
This command is only needed once, at the point when you first integrate a Sencha Touch application with Cordova or PhoneGap.
Every so often you’ll need to upgrade your application to either (1) a newer version of Sencha Cmd, or (2) a newer version of the Ext JS or Touch SDK. Using the latest versions of the Sencha tools makes good sense, so you always have the latest bug fixes and performance improvements.
To upgrade Sencha Cmd to the latest version, we can use the sencha upgrade command:
Your terminal will automatically check for a newer version of Sencha Cmd and install it.
To upgrade an application to a newer version of Ext JS or Sencha Touch we need the sencha app upgrade command. Simply download the newest framework SDK and then run the following:
sencha app upgrade ~/path/to/new/SDK
However it’s possible that you may have customized a few important pieces of the Sencha application architecture, and you may not want the upgrade process to touch these bits. Luckily, Sencha Cmd has a few optional flags:
- -noa (or –noappjs): Disable upgrade of app.js
- -nob (or –nobackup): Disable backup of application before upgrade
- -nof (or –noframework): Upgrade only the Sencha Cmd scaffolding and not the SDK
Sencha Cmd: Day-to-Day Development Workflow
In the day-to-day development of a Sencha app, developers often need to view their applications in the browser, edit code and test their apps in various environments. Therefore, most developers will use the