Using the New App Watch Command in Sencha Cmd 4

What’s Sencha Cmd 4‘s biggest new feature introduced to date? It’s the “Sencha app watch” command!

This command focuses on streamlining small changes. That is, it enables these changes to continuously process, running automatically just seconds later.

In this article, we will cover the basic operation of the app watch command and how you can customize its behavior.

What Was It Like Before App Watch?

In previous releases of Sencha Cmd, a command could perform only a single task, which exited upon completion. Everyday tasks boiled down to three common commands that you needed to run depending on the nature of your changes:

• sencha app refresh — Was run whenever classes were added, removed, or renamed. This updated the “bootstrap” file used by Ext.Loader.
• sencha ant sass — This command rebuilt the CSS files from the Sass source code. This was run when any *.scss files changed. With Ext JS 4.1, you could have alternatively used “compass watch” to update your Sass by detecting changes to the file system.
• sencha app build — Performed all of the build steps (such as the “sass” step above) but also did things like copying resources to the “build/resources” folder. If you made changes to resources and/or Sass or more, a full build was often the best choice. Options like “skip.slice=1” or “skip.sass=1” were often used if these steps of the build were not needed.

To recall its history, “compass watch” used to be the significant command that preceded Sencha app watch. But with the introduction of Ext JS 4.2 and theme packages, compass watch no longer recognized the structure of the themes as efficiently. In turn, it made “Sencha ant sass” the only option for building Sass. The “sass” build step, however, was a forced, full rebuild and was many times slower than compass watch.

What Happened Upon Introducing App Watch?

Something much smarter than compass watch was needed. All the flexibility provided by Sencha Cmd packages and theme packages would go awry without a similar command that successfully complements this series of progress.

Even if compass watch could work, it only addressed part of the workflow. The ideal process would manage all of these ad hoc steps and ensure that whatever was needed to make your app loadable was done as quickly as possible.

Anatomy of an App

To see how this works, it helps to break down applications into their basic parts:

• JavaScript,
• Styles (Sass), and
• “Resources” (things like images).

Sencha frameworks (Ext JS and Sencha Touch) contain the same combination as their themes do.

In Sencha Cmd, this repeating structure (JavaScript, Sass, resources) is encapsulated in a “package”.

The build process takes these components from the framework, the selected theme (and its base themes), and any other required packages; it then combines them with the application sources to produce the compiled application.

Sencha Cmd leverages the information from this process to enable “development mode” loading of your application. In other words, one of the by-products of a build is that it gets the data needed to support loading your app directly from its sources.

Watching the File System

To efficiently maintain all such information, we leverage Java 7’s ability to monitor the file system for changes. Based on this functionality, app watch monitors the following things:

• Application source code (the “app” folder).
• Application Sass code (the “sass” folder).
• Application resources (the “resources” folder).
• Theme package source, Sass and resources (“src”, “sass” and “resources”).
• The source, Sass and resources folder for the theme’s base themes.
• The source, Sass and resources of all packages required by the application (in “app.json”).
• The source, Sass and resources of all packages required by other packages (in “package.json”) including theme packages.

To prepare things for monitoring, app watch starts by performing many of the same steps as a normal build. During the build phase, all of the above locations are noted; then app watch pauses (instead of terminating) and watches the file system for changes.

When the contents of any of these folders are changed, app watch detects the change and executes a special set of build steps. Once these steps are done, app watch again pauses and waits for more file system changes. The turnaround time for most changes is about 5 seconds (perhaps less) depending on your machine.

Not Watching

While the content of your application and all of its required packages are being watched, the configuration of these things is not currently being monitored. If you change an app.json or package.json file or one of the various sencha.cfg files, you will need to stop (CTRL+C) and restart app watch.

App Watch in Action

To see how this looks in operation, I generated an application using Ext JS 4.2.2 and immediately ran “sencha app watch” on it.

Most of the mechanics of app watch are implemented in the generated build script. This means that you can customize these steps. While the exact steps taken are slightly different for Ext JS applications versus Sencha Touch applications, the general structure is the same. To see the details, you can check “.sencha/app/watch-impl.xml”, which is imported by the master build script “build.xml”. To learn more about the build script in general, consult the Sencha Cmd docs.