What is Google Web Toolkit?

Google Web Toolkit (GWT) is an open source Java development framework that lets you escape the matrix of technologies that make writing AJAX applications so difficult and error prone. With GWT, you can develop and debug AJAX applications in the Java language using the Java development tools of your choice. When you deploy your application to production, the GWT compiler translates your Java application to browser-compliant JavaScript and HTML.

Here's the GWT development cycle:

  1. Use your favorite Java IDE to write and debug an application in the Java language, using as many (or as few) GWT libraries as you find useful.
  2. Use GWT's Java-to-JavaScript compiler to distill your application into a set of JavaScript and HTML files that you can serve with any web server.
  3. Confirm that your application works in each browser that you want to support, which usually takes no additional work.

Google Web Toolkit Features

  • Dynamic, reusable UI components
    Create a Widget by compositing other Widgets. Lay out Widgets automatically in Panels. Send your Widget to other developers in a JAR file.
  • Really simple RPC
    To communicate from your web application to your web server, you just need to define serializable Java classes for your request and response. In production, GWT automatically serializes the request and deserializes the response from the server. GWT's RPC mechanism can even handle polymorphic class hierarchies, and you can throw exceptions across the wire.
  • Browser history management
    No, AJAX applications don't need to break the browser's back button. GWT lets you make your site more usable by easily adding state to the browser's back button history.For more details check History Class from the GWT API library.
  • Real debugging
    In production, your code is compiled to JavaScript, but at development time it runs in the Java virtual machine. That means when your code performs an action like handling a mouse event, you get full-featured Java debugging, with exceptions and the advanced debugging features of IDEs like Eclipse.
  • Browser compatible
    Your GWT applications automatically support IE, Firefox, Mozilla, Safari, and Opera with no browser detection or special-casing within your code in most cases.
  • JUnit integration
    GWT's direct integration with JUnit lets you unit test both in a debugger and in a browser...and you can even unit test asynchronous RPCs.
  • Internationalization
    Easily create efficient internationalized applications and libraries.
  • Interoperability and fine-grained control
    If GWT's class library doesn't meet your needs, you can mix handwritten JavaScript in your Java source code using our JavaScript Native Interface (JSNI).
  • Google API Library: Google Gears support
    We are in the process of building support for using Google APIs in GWT applications. Initially, we are providing support for Google Gears, the recently-launched developer product that extends the browser to allow developers to make web-based applications function even while offline. If you would like to download this library please visit the open source project. We are planning to add support for other Google APIs; if you'd like to help, please check out Making GWT Better.
  • Completely Open Source
    All of the code for GWT is available under the Apache 2.0 license. If you are interested in contributing, please visit Making GWT Better.

For a step-by-step installation and usage guide, please see the Getting Started Guide.

Why Translate Java Code to JavaScript?

Java technologies offer a productive development plaform, and with GWT, they can instantly become the basis of your AJAX development platform as well. Here are some of the benefits of developing with GWT:

  • You can use all of your favorite Java development tools (Eclipse, IntelliJ, JProfiler, JUnit) for AJAX development.
  • Static type checking in the Java language boosts productivity while reducing errors.
  • Common JavaScript errors (typos, type mismatches) are easily caught at compile time rather than by users at runtime.
  • Code prompting/completion is widely available.
  • Automated Java refactoring is pretty snazzy these days.
  • Java-based OO designs are easier to communicate and understand, thus making your AJAX code base more comprehensible with less documentation.

Using Google Web Toolkit

You can use GWT's set of UI components (called Widgets) to construct the UI elements that make up your AJAX application. Like traditional UI frameworks, Widgets are combined in Panels that determine the layout of the widgets contained within them. This is a complete GWT application that displays a button with a click handler:

public class Hello implements EntryPoint {
public void onModuleLoad() {
Button b = new Button("Click me", new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Hello, AJAX");

GWT supports a variety of built-in Widgets that are useful for AJAX applications, including hierachical trees, tab bars, menu bars, and modal dialog boxes. GWT also has built-in support for remote procedure calls and other more sophisticated web application features. See the complete list of features for more information.

Debugging and Deploying GWT Applications

GWT applications can be run in two modes:

  • Hosted mode - In hosted mode, your application is run as Java bytecode within the Java Virtual Machine (JVM). You will typically spend most of your development time in hosted mode because running in the JVM means you can take advantage of Java's debugging facilities and remain within an IDE like Eclipse.
  • Web mode - In web mode, your application is run as pure JavaScript and HTML, compiled from your original Java source code with the GWT Java-to-JavaScript compiler. When you deploy your GWT applications to production, you deploy this JavaScript and HTML to your web servers, so end users will only see the web mode version of your application.

To support hosted mode, GWT ships with a special web browser with hooks into the JVM. See the GWT architecture diagram below for more information.

For a step-by-step installation and usage guide, please see the Getting Started Guide.

Google Web Toolkit Architecture

GWT has four major components: a Java-to-JavaScript compiler, a "hosted" web browser, and two Java class libraries:

Google Web Toolkit (GWT) architecture

The components, from bottom to top, are:

  • GWT Java-to-JavaScript Compiler
    The GWT Java-to-JavaScript compiler translates the Java programming language to the JavaScript programming language. You use the GWT compiler to run your GWT applications in web mode.
  • GWT Hosted Web Browser
    The GWT Hosted Web Browser lets you run and execute your GWT applications in hosted mode, where your code runs as Java in the Java Virtual Machine without compiling to JavaScript. To accomplish this, the GWT browser embeds a special browser control (an Internet Explorer control on Windows or a Gecko/Mozilla control on Linux) with hooks into the JVM.
  • JRE emulation library
    GWT contains JavaScript implementations of the most widely used classes in the Java standard class library, including most of the java.lang package classes and a subset of the java.util package classes. The rest of the Java standard library isn't supported natively within GWT. For example, packages like java.io don't apply to web applications since they access the network and local file system.
  • GWT Web UI class library
    The GWT web UI class library is a set of custom interfaces and classes that let your create web browser "widgets," like buttons, text boxes, images, and text. This is the core user interface library used to create GWT applications.

For a step-by-step installation and usage guide, please see the Getting Started Guide.

If you're curious about the underlying source code, please feel free to check it out. The source code for all of GWT is available under the Apache 2.0 license.

How Well Does It Work?

We're biased, but we think it works pretty darn well. The primary metrics we use to evaluate GWT's effectiveness relative to traditional AJAX development are:

  • Compiler-generated JavaScript size
    GWT produces smaller JavaScript downloads for the end user than hand-written AJAX applications. In contrast to the reuse approach of traditional JavaScript libraries, the GWT compiler analyzes your source code to include only the code you actually need, and none of what you don't.
  • End-user performance
    GWT applications are typically faster than their hand-written JavaScript equivalents, and often require far fewer HTTP round-trips. The GWT compiler avoids adding any wrappers around any functionality that is implemented natively in the browser.
  • Development time
    With so little time spent debugging problems in individual web browsers, you can spend much more of your time on application functionality. Development time efficiency is our favorite part of GWT.

Try it out for yourself, and let us know what you think.