I have lost many days, weeks, possibly even months to JavaScript. The recent rise of JavaScript frameworks – and their increasing stability – has helped. The Google Web Toolkit (GWT) [1] looks like the next evolutionary stage in JavaScript development: Instead of writing in JavaScript, you can write in Java.

GWT is an environment for building optimized JavaScript applications that are cross-browser compatible. With GWT, you build JavaScript applications by coding in Java and compiling the code to highly optimized JavaScript, HTML, and CSS. As much as you might like working on intricate little cross-browser JavaScript bugs, there comes a point when enough is enough. GTW came along just before I reached my breaking point.

Looking Closer

GWT provides a library of layouts, form elements, and other components for building web apps. Instead of adding JavaScript/AJAX on top of raw HTML and CSS, you can use higher level Java components that GWT compiles to browser-safe JavaScript that probably won't need debugging.

However, you don't have to give up programming in JavaScript completely. JavaScript still has its place, and in this article, you'll see how to expose parts of your GWT-build-app to JavaScript, thereby creating a proper API.

Some benefits of GWT are:

• Browser compatibility – If you use higher-level GWT components, you won't spend as much time debugging;
• Performance – You get optimized JavaScript code and optimized download times.
• Expose API to JavaScript – You can migrate section-by-section to GWT, using the existing JavaScript API;
• Debugging and development – You work in a stronger language than JavaScript – with better debugging tools.

At 3ev, we have built a front-end-based CMS that sits on top of the HTML/CSS of any web page and allows in-place editing. This stuff is pretty cool but hell to debug. The app was first built on custom JS, then migrated to Prototype, and more recently MooTools, with Ext JS providing some Window/Form elements. Eventually, we started migrating parts of the CMS to GWT. This situation is quite common: You have a large and growing JavaScript application that takes time to test and debug; GWT looks like an attractive solution, but how can you plug it into the problem areas? In this article, I show you how to use GWT to build and integrate JavaScript components with existing apps and web pages.

Getting Started

To start, download an appropriate version of GWT for your OS [2]. This download contains a set of examples, the Java-to-JavaScript compiler, and tools for creating new applications and running tests. Next, untar the downloaded file and find applicationCreator:

tar xzf gwt-mac-1.5.2.tar.gz
 cd gwt-mac-1.5.2
 ./ applicationCreator --help

The applicationCreator tool creates a new GWT project for building JavaScript applications. ProjectCreator, in the same directory, is used to create GWT projects for editing in Eclipse, but I'm going to stay editor-agnostic here.

To start, create a simple project:

./applicationCreator -out ~/MyGwtProject com.mycompany.client.MyApp

The application creator has now created the following files in ~/MyGwtProject:

MyApp-compile
MyApp-shell
src/com/mycompany/
        client/MyApp.java
        MyApp.gwt.xml
               public/
               MyApp.css
               MyApp.html

This small number of files is nice because it means what you see is what you're working on rather than folders and folders of stuff to wade through.

Now, open up client/myapp.java, which contains the Java class that GWT will compile into working JavaScript code. This article sticks to one class, but you can refactor your code out into other classes as you would on any other project. To start up the GWT shell, type the following:

./MyApp-shell

This puts you in hosted mode (Figure 1), which suddenly makes GWT about a billion time more amazing than all the clever stuff I described earlier. Hosted mode is a browser dedicated to your development environment that will re-compile the Java code to JavaScript each time you refresh. When you make a change in the Java file and refresh the GWT shell, you'll see the results straight away, thus obviating the need to compile the Java every time. Keep the GWT shell (i.e., the hosted mode browser) open during the next step.

Figure 1: Entering GWT hosted mode.

The application that GWT created is quick and simple, and it shows off some standard components of web pages: buttons, images, boxes, and dialog boxes. Next, open up MyApp.java and change

dialogBox.setText("Welcome to GWT!");

to:

dialogBox.setText("Welcome to GWT - isn't it amazing?!");

Now refresh your GWT shell, click the button, and see the Java compiled to JavaScript straight away. Of course, hosted mode is only useful during development, so you can use compile to compile the application to a set of JS, HTML, CSS, and image files (Listing 1). The app is then compiled to a new directory, www/com.mycompany.MyApp/, which contains the files shown in Listing 2.

01 548CDF11D6FE9011F3447CA200D7FB7F.cache.png
02 9DA92932034707C17CFF15F95086D53F.cache.png
03 A84A8EF7341E8139F58DC5FC2AD52F22.cache.html
04 MyApp.css
05 MyApp.html
06 clear.cache.gif
07 com.mycompany.MyApp.nocache.js
08 gwt/
history.html
hosted.html

If you open up MyApp.html with a browser. This application is now completely self-contained; you can move the www/com.mycompany.MyApp directory to another location – for example, inside an existing web app:

mv www/com.mycompany.MyApp /path/to/my_old_application/

The process of working with GWT should start to make sense: Rather than compiling Java to JS every time you finish a feature or bug fix, you instead work in hosted mode until it's 90% complete and then compile to JavaScript.

Inside the Java

The Java class implements EntryPoint/onModuleLoad, which GWT triggers on each page load, so you can think of it as the onload in HTML pages or dom ready in libraries such as MooTools. A very small example shows this; edit MyApp.java so the class contains only the lines shown in Listing 3.

Intuitively, Window.alert() is calling the JavaScript alert function. If you fire up hosted mode using MyApp-shell, you'll see that not much happens, but you're starting to see how the JavaScript user experience fits around the Java code.