Sencha Inc. | HTML5 Apps

Blog

Using the New App Watch Command in Sencha Cmd 4

December 12, 2013 | Don Griffin

Perhaps the biggest new feature introduced in Sencha Cmd 4 is the “sencha app watch” command. This command greatly streamlines the continuous process of making small changes and seeing them run seconds later. In this article, we will cover the basic operation of the app watch command and how you can customize its behavior.

Before App Watch

In previous releases of Sencha Cmd, the commands performed a single task and exited on 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.

With the introduction of Ext JS 4.2 and theme packages, compass watch no longer understood the structure of themes making “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.

Introducing App Watch

With all of the flexibility provided by Sencha Cmd packages and theme packages, something much smarter than “compass watch” was needed. 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 mixture as their themes do. In Sencha Cmd, this repeating structure (JavaScript, Sass, resources) is encapsulated in a “package”.

The build process takes these pieces from the framework, the selected theme (and its base themes) and any other required packages and 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 of this 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 get things ready to be watched, 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.

App Watch

The first steps are like a normal “sencha app build” but after the build completes, app watch takes over and prints “waiting for changes…”.

App Watch

As soon as a change is saved to “app.js”, app watch kicks in with “triggering build…”.

App Watch

The difference is that this “build” is fully primed and takes only a few seconds. Once completed, you will see the “waiting for changes…” message and the cycle continues.

Peeking Inside App Watch

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 look at “.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.

There are 2 responses. Add yours.

kiran

1 year ago

very nice….....

Tom Coulton

12 months ago

Merry Christmas! We’ve translated this blog article into Japanese here: http://www.xenophy.com/sencha-blog/9822

Also, this is the Sencha Japan User Group: http://www.meetup.com/Japan-Sencha-User-Group/

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.