Earlier tonight, we wrapped up a very exciting Campfire One at which we announced that GWT 2.0 is now officially available. In addition to major improvements in the GWT SDK and the Google Plugin for Eclipse, GWT 2.0 includes a brand new performance analysis tool for Chrome called Speed Tracer.
Introducing Speed Tracer
We hinted at it a few weeks ago, and now it's available: Speed Tracer is a powerful new performance analysis tool for Chrome that gives you unprecedented insight into the inner workings of any web application — not just those created with GWT. Want to know why your web app feels sluggish? Speed Tracer can help you find the answer.
It's fun to see Speed Tracer in action, so here's a quick introductory video...
As an aside, Speed Tracer has a pretty snazzy user interface, eh? It was built with GWT.
Faster development, faster apps
Here's another quick overview video that highlights some of the cool new features in GWT 2.0...
Now let's talk in more detail about what's new in the GWT SDK and the Google Plugin for Eclipse...
Fast edit/refresh with new development mode and draft compiles
- GWT 2.0 greatly improves the edit/refresh cycle by introducing a new method of debugging called development mode that allows you to debug your project with the browser of your choice — yes, your browser, not one dictated by GWT. Development mode relies on a new browser plugin, called the GWT Developer Plugin, that makes it possible for your Java project to create a debugging bridge to any browser into which it is installed. Technical details aside, this new way of debugging really just feels right.
- By moving your debugging experience directly into the browser, development mode makes it possible to use each browser's own unique development tools in combination with Java debugging. That's right, you can now debug your Java source code in Firefox while simultaneously using great tools like Firebug to view DOM structures and experiment with CSS. Ditto for Safari and Inspector, and so on for other browsers.
- The new Google Plugin for Eclipse includes streamlined support for launching and controlling development mode, including a new view that embeds development mode logging messages directly as an Eclipse view. It's also possible to launch development mode manually, which utilizes a Swing-based user interface and can work completely outside the context of Eclipse, including in IDEs other than Eclipse.
- Development mode also supports multi-browser debugging, meaning that you can connect to more than one type of browser from a single debugging session. This dovetails especially well with the ability to leave a development mode session running for an extended period of time, allowing you to simply refresh the browser to see the results of changes to your Java source. It's a great way to quickly ensure that your project works properly across all the major browsers without needing to restart the Java debugger.
- And, finally, development mode works across a network. Why is that cool? Because you can easily test browsers on operating systems different than the one on which you're developing. For example, suppose you are developing in an IDE on Linux. You can, in a single debugging session, connect across the network to see your app running — and debug it — in Internet Explorer on Windows as well as Safari on OS X. Or Chrome on Windows. Or Firefox on OS X. The point is that you can develop using whichever platform you prefer while still debugging on each of the browser/OS combinations that your users may have.
Declarative UI with UiBinder
GWT 2.0 introduces a powerfully productive new way to construct user interface code called UiBinder. UiBinder makes it easy to separate the visual aspects of the UI from its associated application logic. To construct your UI, simply mix HTML and widget elements declaratively in a UiBinder XML template — a
.ui.xmlfile. You can then place application logic in an associated
- UiBinder makes it much easier to involve web designers more directly into the development workflow. For example, developers can copy/paste from HTML mocks provided by a web designer. We've also seen that some web designers like to edit UiBinder XML templates directly and use development mode's fast edit/refresh cycle as they experiment with the UI design. It's a lot more fun to design using interactive widgets rather than passive HTML mocks.
- It isn't as if there's a canned set of widgets that can be used with UiBinder, by the way. Incorporating your own custom widgets into a UiBinder template is exactly the same as using any of the built-in widgets.
UiBinder also helps prevent subtle bugs, such typos in IDs, from making it into production by validating all cross-references between the
.javafiles at compile-time.
- The Google Plugin for Eclipse now provides UiBinder-aware wizards, code completion, red squigglies, and refactoring to help you use UiBinder effectively.
Pixel-perfect visuals with layout panels
- Getting the exact look and feel you want in your UI is something that has traditionally been tricky with HTML and CSS. Prior to GWT 2.0, even GWT's widgets were not able to fully abstract away some of the layout headaches that can occur. However, GWT 2.0 introduces layout panels that actually do make it possible to reliably create the layout you want. The Mail sample application in the GWT SDK has been updated to show you how this works.
- As you'd expect, layout panels work especially well with UiBinder. With only a few lines of XML, you can create really sophisticated layouts, including animated transitions, splitters, and more.
- A key new feature in GWT 2.0 is developer-guided code splitting. It's easiest to explain with an analogy: when you're watching a movie online, you definitely don't want to download the whole thing before it starts playing, right? You want the movie to start instantly, and the rest should download incrementally. The same is true for web applications. Starting a web apps shouldn't feel like you're installing something; it should just start instantly when you click on a hyperlink. Code splitting is a very high-leverage tool to help you achieve exactly that.
It may sound complicated, but code splitting is actually easy. Just find a spot in your project where you'd like to chop out some code and use the magic new
<script>files by hand, the GWT compiler does the hard work of ensuring that all necessary dependencies are downloaded in the correct order automatically. For an example, see the Showcase sample application included in the GWT SDK, which has been updated to demonstrate code splitting.
Optimized resources with ClientBundle
- You heard that right, CSS. CssResource is a powerful new framework for managing styles. It supports a new extended CSS syntax for defining sprites, named constants, scopes, conditional selectors, and more. It also aggressively optimizes your CSS by stripping comments and whitespace and by obfuscating class names.
- ClientBundle is also extensible. You can create your own resource types and hook into the ClientBundle framework to keep resource interfaces coherent and succinct while bundling any sort of resource you can find a use for.
GWT 2.0 is the culmination of many months of collaborative development, and on behalf of the the entire GWT team, we'd like to thank the WebKit team, with whom we've worked closely to add the low-level instrumentation necessary to make Speed Tracer possible.
And, as always, a huge thanks goes out to the GWT developer community, many of whom have bravely followed the tip of the GWT trunk in svn, trying out new in-progress features and helping find bugs — and even submitting patches to fix them.
Believe it or not, we've still only scratched the surface of what's new. As always, GWT is open source and free to use. We hope you'll give GWT 2.0 a spin.
Happy coding! See you online.