GWT Blog: Introducing Google Web Toolkit 2.0, now with Speed Tracer

Web Toolkit Blog

The official source of information about GWT.

Introducing Google Web Toolkit 2.0, now with Speed Tracer

Tuesday, December 08, 2009

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.

If you do need to compile to JavaScript often — though hopefully development mode will dramatically reduce your need to do so — you can use the GWT compiler's new -draftCompile flag, which speeds up compiles by skipping optimizations. To be clear, you definitely shouldn't deploy JavaScript compiled that way, but it can be a time saver during non-production continuous builds.

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.xml file. You can then place application logic in an associated .java file.

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 .ui.xml and .java files 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.

Layout panels create a predictable constraint-based layout system on top of standard CSS. Because it works with CSS, rather than in spite of it, layout panels continue to work predictably in the presence of custom CSS styles that you might need to include. And because CSS-based layout is handled natively inside the browser's rendering engine, no JavaScript needs to run during layout. As a result, layout is fast and fluid — you can especially notice the speed when resizing the browser window.

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.

Compiler improvements

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 GWT.runAsync() method to create a split point. By continuing to add split points wherever it makes sense, you can easily and safely slice and dice your application to ensure that the initial download includes only the bare minimum of code necessary to start. The compiler automatically arranges for additional code fragments to be downloaded later. And, unlike manually splitting JavaScript across <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.

In addition to code splitting, there are also fundamental improvements to the compiler's ability to produce JavaScript. With each new release of GWT, we add compiler optimizations to make compiled JavaScript smaller and faster. That's a big benefit if you have existing GWT projects, because you can simply upgrade, recompile, and — poof — your applications start and run more quickly. Indeed, GWT 2.0 includes some high-impact new optimizations, and we have already seen size reductions in compressed JavaScript ranging from 3% up to over 20%.

Optimized resources with ClientBundle

ClientBundle extends and generalizes the resource-bundling pattern that began with ImageBundle in GWT 1.4. With a simple interface declaration, you can at compile-time optimize and embed resources directly into your compiled JavaScript. For example, by bundling images, you can avoid costly HTTP round-trips. ClientBundle supports bundling a wide variety of resource types, including images, text, and even CSS.

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.

Special Thanks 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. Get Started 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. Download Google Web Toolkit 2.0 Happy coding! See you online.

Labels: English , Web Toolkit Blog

Labels

accessibility 1
crash 1
dev mode 2
English 172
googlenew 1
gwt 1
IE 1
internet explorer 1
Web Toolkit Blog 172

Archive

2016
- Oct

2014
- Dec
- Nov
- Sep
- May
- Jan

2013
- Nov
- Oct
- Jul
- Mar
- Feb

2012
- Dec
- Oct
- Sep
- Jul
- Jun
- Jan

2011
- Nov
- Sep
- Aug
- Jul
- Jun
- May
- Apr
- Mar
- Feb
- Jan

2010
- Dec
- Oct
- Sep
- Aug
- Jul
- Jun
- May
- Apr
- Mar
- Feb
- Jan

2009
- Dec
- Nov
- Oct
- Sep
- Aug
- Jul
- Jun
- May
- Apr
- Mar
- Feb
- Jan

2008
- Dec
- Nov
- Oct
- Sep
- Aug
- Jul
- Jun
- May
- Apr
- Feb
- Jan

2007
- Dec
- Nov
- Oct
- Sep
- Aug
- Jul
- Jun
- May
- Apr
- Mar
- Feb
- Jan

2006
- Dec
- Nov
- Oct
- Sep
- Aug
- Jul
- Jun
- May

Feed

Google
Privacy
Terms