Compilation

At this point, your initial implementation of StockWatcher is complete. So far, you've been running StockWatcher in development mode. In development mode you can see the effect of your code changes immediately and use your IDE's debugging tools. After you compile StockWatcher, you can run and test it in production mode. When an application runs in production mode, it exists as pure JavaScript but does not require any browser plugins or the Java Virtual Machine (JVM).

In this section, you'll:

  1. Compile the Java source code.
  2. Test StockWatcher in production mode.
  3. Deploy StockWatcher to a web server.

You'll also learn about deferred binding, GWT's mechanism for serving just the code required depending on browser or, optionally, other factors such as locale.

Compiling Java to JavaScript

To compile the Java source code to JavaScript, you'll use the GWT compiler.

Compiling the StockWatcher application (using Eclipse)

  1. In the Package Explorer view, select the StockWatcher project.
  2. In the toolbar, click the GWT Compile Project button icon.
  3. Confirm the compiler options and click the Compile button.

In the Eclipse console you will see the output of the GWT compiler, for example,

Compiling module com.google.gwt.sample.stockwatcher.StockWatcher
   Compiling 6 permutations
      Compiling permutation 0...
      Compiling permutation 1...
      Compiling permutation 2...
      Compiling permutation 3...
      Compiling permutation 4...
      Compiling permutation 5...
   Compile of permutations succeeded
Linking into war/stockwatcher.
   Link succeeded
   Compilation succeeded -- 30.504s

Compiling the StockWatcher application (without using Eclipse)

You can compile the StockWatcher application directly from the command line:

  1. Change to the StockWatcher directory.
  2. Execute: ant build

If you run the GWT compiler from the command line, you can specify the style of the JavaScript, the level of logging detail, and override other default behaviors by modifying the StockWatcher/build.xml file.

Testing in Production Mode

After the application is compiled, you can run it in production mode by opening StockWatcher.html in a new browser window. StockWatcher looks and behaves just as it did in development mode. The real difference is hidden under the covers. When you interact with StockWatcher now, it's executing JavaScript code in the browser, not Java bytecode in the JVM.

Tip: If you launched the development mode server, you can run your application in production mode (after compiling it) by removing the gwt.codesvr parameter from the URL before loading the application.

Deploying the Application to a Web Server

At this point, you could deploy StockWatcher to a public web server simply by uploading the files in the output directory. This initial version does not need to communicate with the server in any way; therefore, it does not require anything special on the part of the web server. Any server that can serve up static web pages will do just fine.

Compiler Output

Take a look at the files generated by the GWT compiler. In the output directory StockWatcher/war/stockwatcher, you see a set of files similar to this:

1FCB598BF80A779999FF8774CEE9E224.cache.js
3880B6B217AFC67D6029EEBC02BDA651.cache.js
91F9F6B3066965A37C6ABEB2C3F0DE8C.cache.js
clear.cache.gif
compilation-mappings.txt
F22DFAA06F25138FB07D27BA32BBE3F1.cache.js
F90AE9A800297A50E40A5072EB33B368.cache.js
gwt
stockwatcher.devmode.js
stockwatcher.nocache.js

In addition to the static resources in StockWatcher/war (such as the HTML host page, style sheet, and images directory), notice the other file names contain GUIDs. These files contain the various JavaScript implementations of StockWatcher. GWT generates multiple implementations of your application, a unique permutation for each supported web browser.

Optimizing Runtime with Deferred Binding

At runtime, GWT uses a mechanism called deferred binding to load the correct permutation for the end user's browser. Deferred binding serves just the code the user needs and no more. What are the benefits of deferred binding? Because each permutation is tailored to work around the bugs and idiosyncrasies of its intended web browser, using deferred binding is

  • Faster for the user. Your application download contains no unnecessary bytes. The application doesn't need to sniff for browsers or provide multiple branches for each browser.
  • Faster for you. GWT does the work of generating the correct JavaScript for each browser so that you don't have to spend so much time dealing with differences between browsers.

In addition to browser detection, deferred binding can also generate customized versions of your application for any number of other variables. One very common example is internationalization. With deferred binding, GWT generates a separate implementation of the application for each language, so for example, an English speaker doesn't have to download the French text (and vice versa).

You can try this for yourself in the tutorial Internationalizing a GWT Application.

What's Next?

At this point you've tested StockWatcher both in development mode and in production mode. By now you should have a pretty good idea of how to develop a GWT application, which has only client-side functionality, from start to finish.

To build upon the initial implementation of StockWatcher and learn additional features of GWT, select from the following tutorials: