Tuesday, December 8th, 2009

Speed Tracer: Google announces new tools and more thanks to the GWT team

Category: Google, GWT

Here is Speed Tracer, the new tool to aid us Web developers in our quest for great applications:

Ben and I are at Google Campfire One with a Who’s Who from the Web developer space. When I first met the GWT team they were talking about revolutionary new Web tools that they wanted to create, and I have a feeling that they will be talking about what they have come up with.

David Glazer (Engineering Director) and Andrew Bowers (GWT PM) are kicking off the build up with the obligatory ra-ra for HTML5 and the great new browsers we have to build “modern Web applications”.

Next, Andrew gets into the world of development and deployment of Web apps and the productivity and performance improvements.

First up, productivity. Andrew is discussing AdWords which uses GWT in places. AdWords uses a UiBinder a declarative approach to building GUIs:

  1. <ui :UiBinder ... ugly xml ns ...>
  2.   <ui :style/>
  3.   <g :HTMLPanel>
  4.      ... insert HTML or widgets ...
  5.       <div ....>
  6.        <g :Button ui:field="closeWidget">Close</g>
  7.       </div>
  8.   </g>
  9. </ui>


  1. @UiHandler("closeWidget")
  2. void onClick(ClickEvent e) {
  3.   hide();
  4. }

After the demo he talks about the Developer Plugin and support for multiple browsers.

Matt Mastracci, founder of Dotspots, is now “by the fire” ready to talk to us about how they use GWT. First up he shows a GWT application that compiles down and uses it as a Firefox add-on. They have also used the same code that they incorporate in a Chrome Extension and other areas. GWT 2.0 contains a new “developer mode” and Matt shows it in action as he hits Eclipse from the browser to quickly iterate. No need to recompile…. (since GWT is a compiler). Of course, using JS itself allows you to make a change and reload :)

Bruce Johnson, co-creator of GWT, is now “fired up” to talk about the deployment stage. How does the GWT compiler do its job? It can Prune dead code, Devirtualize, Inline, Eval, and Obfuscate.

Developer guided code splitting is next up which cuts down the initial download and only grabs what it needs.

Someone from MediaBeacon shows a rich app (which looks exactly like how I envision a GWT app ;) as a demo of code splitting…. going from 1.5MB to 100k in 16 lines of code.

Now Kelly Norton (awesome guy) is up on stage with a “Web Workers” ice hockey jersey. He has the new tool, Speed Tracer! It monitors apps in real time, shows hidden browser events, and gives advice through hints.

Kelly has fired up Google Calendar to show a demo. I love the “Sluggishness” activity bar showing work in real time. The graph view is nice, and seeing the events is fantastic. E.g. script eval, script parse, paints, parse HTML, DOM layout, CSS style calculation. You can see it!

Speed Tracer itself is a Web application deployed as a Chrome Extension. One nice feature is that you can export a trace and send it over to someone via email and they can manipulate and play with the view on that data. It is a GWT app itself, and it looks not-like you think of a GWT app. Very nice indeed.

That’s a wrap, thanks for the new tool Kelly, Bruce, Andrew and team!

Posted by Dion Almaer at 9:08 pm

3.6 rating from 36 votes


Comments feed TrackBack URI

Anyone know how we can run Speed tracer under mac?

Comment by V1 — December 9, 2009

Nice to see some GWT love on this site. If only more people would understand that GWT is not about rejecting/replacing JS, rather about exposing web-app-development to a broader range of people who simply cant work productively with JS.

Comment by BonoboBoner — December 9, 2009

I run this SpeedTracer on Mac – it’s not that hard.
You must download latest Chromium build, next go to the catalog where you put it and issue a command:
Chromium.app/Contents/MacOS/Chromium –enable-extension-timeline-api

Next go to the installation page of SpeedTracer and install extension.

Comment by JarekSyg — December 9, 2009

It’s a very fancy tool. Only problem is that it’s a tool to find performance bottlenecks on the fastest browser. We need something like this on IE, not on chrome.

Comment by Joeri — December 9, 2009

but the “characteristics” of your app are the same, whether they are executed in 10 or 100 ms.

Comment by BonoboBoner — December 9, 2009

I can’t get it working on Win XP. I switched to the dev channel, downloaded and installed the extension, but no luck. I have the latest version of Chrome, and launch it with the correct arguments.

Any ideas?

Comment by sos — December 9, 2009

Check out http://ajax.dynatrace.com/pages/ for IE 6-8

Comment by frio80 — December 9, 2009

@bonoboboner: not in my experience. IE has completely different performance characteristics than Chrome. It’s quite easy to have performance issues in IE that are not apparent in Chrome.

@frio80: I’ve already tried that but ran into a number of bugs preventing me from using it effectively. Can’t exactly remember what was wrong though. Maybe I’ll give it another try.

Comment by Joeri — December 9, 2009

Speed Tracer is the most important performance tool since YSlow. YSlow shows you what you need to know to improve the load time experience. Speed Tracer shows you what you need to know to improve run time performance. Optimizing in a black box is really hard. Now we can walk in the sun. This should be standard equipment in all browsers.

Comment by crock — December 9, 2009

@Joeri: are you talking about a tool like this one ?

Comment by checkca — December 10, 2009


Comment by Aphrodisiac — January 15, 2010

Leave a comment

You must be logged in to post a comment.