Building Web User Interfaces with Google Web Toolkit

URL: http://code.google.com/webtoolkit

The Google Web Toolkit (GWT) provides API's to use widgets on web pages. The GWT focuses on creating creating very fast widgets that are cross-browser compatible. The GWT takes a different approach in using widgets than traditional Ajax approaches. For starters, many Ajax widgets require a developer to write a lot of JavaScript and work closely with a browser DOM model. When creating/using GWT widgets, you code in straight Java and use GWT packages. When the regular Java class is compiled, an Ajax widget is created along with necessary JavaScript files. Multiple JavaScript files are created for specific browsers (IE, Firefox, Safari, Opera, etc). Therefore, a developer can follow a traditional build model rather than "tinkering" in JavaScript.

The GWT widgets are created with web usability in mind. Although a widget can generate "cool" components to interact with, keeping a standard and intiuitive design is key. Subtle differences between GWT and other Ajax libraries are web usability (must still be intuitive), and bookmarking still works while maintaining cross-browser compatibility. The joke was made that "we don't want to teach our parents to use the web, again."

Characteristic of GWT Widgets:
- Focus on basics
- Prefer native UI elements
- Support keyboard-only use
- Honor font size
- Keep user in control of the browser
- Emphasize speed, especially at start-up
- Ideal: feels like a traditional web app, just better

Working with JavaScript and the DOM can get very confusing when factoring different browsers and versions. By using the GWT, this compatibility can be left to Google engineering. The GWT even has a test browser (or tool) that you can run a widget straight from Java. GWT widgets can support localization/internationalization and cascading style sheets.

Benefits of the GWT Java packages:
- Any Java IDE
- JUnit test
- Rapid edit/test/debug/refactor cycle
- Re-use jars
- Design patterns
- Javadoc tool
- Compile-time errors

http://pupous.co.uk/log/2007-03-07 - Graph showing how a very popular browser and 2nd popular browser handles objects in terms of objects versus time.

Fast is Better Than Slow
- Speed is a critical component of usability
- Building AJAX apps = tinkering with code
- But are we ensuring the apps are great for users?
- Performance metrics are a nice start
- GWT 1.4 includes benchmarking subsystem

Javascript is generated at compile time. When you compile a Java class that creates a widget, ONLY the javascript necessary to run that widget is generated. Therefore, a html page that uses the widget will have the smallest download rather than downloading an entire Ajax library. The JavaScript is also optimized for the specific browser. If the widget is modified and recompiled, a new JavaScript file will be created to force a new download.

To explain, compiling a widget may generate the below three JavaScript files. However, when an IE browser uses the widget, only the first Javascript file will be downloaded.
- 1D04AEl321DTDE.html.js (IE)
- 9898DKDU373KJD.html.js (Firefox)
- 4DRWSDD32DW231.html.js (Safari)

The GWT is currently at version 1.4. From GWT version 1.0.20 to 1.4, the Javascript size in bytes has been reduced by at least 20%. The widgets are also at least 65% faster.

In summary, using the GWT allows a developer to follow good development practices as opposed to "fighting" with JavaScript and the DOM object model. My thoughts...using GWT may work well with a MVC model but doesn't seem relevant with JSF.