The way we do that is, the GWT compiler takes your Java source code and cross-compiles it
into highly optimized JavaScript that downloads quickly, it runs quickly in all the popular
Web browsers that your users are likely to use.
But, of course, you know, you have seen that before.
It works great. No problem.
The question is, where do you get that Java source code in the first place?
For a really huge Java app, sometimes a lot of the code can be sort of boilerplate code,
the sort that connects your browser to the data store in the back-end.
That's the sort of code that you don't really want to have to write.
And so when we started working with VMWare, we said, hey, you know, this -- what about
this? And they said, "We have a tool that does exactly
this. It saves you a whole bunch of time writing
the code that you don't want to automatically on your behalf."
So we used Google Wave to coordinate the engineering teams between Sydney, Germany, Atlanta, Mountain
View, and San Francisco. We used it all the time, around the clock,
every day, working together. And we made GWT and Spring Roo work together.
The tool I was talking about is Roo. And we are lucky to have the father of Roo,
Ben Alex, here to tell you more about Roo and to show you Roo in action.
>>Ben Alex: Thanks, Bruce. As we were thinking about what to do for you,
we thought what better way than to build you an application live on stage.
It occurred to us that there's something that's very near and dear to most of our hearts in
this room: Expense reports. We're all probably going to go home and log
expense reports. We thought, let's build you an application
that stores these. We're going to build this for and you have
a GWT front-end, the back-end with Roo, with all the Spring goodness, and we're going to
do this in less than 200 keystrokes. So let's get started.
So I have here an empty directory. And we load up Roo.
Roo's an open source tool that you can go and download.
It has a text mode. There's also a graphical version which I will
show you a little bit later. But Roo loads up.
It looks like this. You can get full command help with Roo by
typing "hint" at any time. Let's start our project.
Here I specified my Java top-level package. We need some databases.
Let's go do that. Persistence setup.
Notice the tab is working. We have data nucleus, which is great if you're
going to be deploying to the Google App Engine. But we're going to deploy to hypersonic in
memory for now. So now that we have our persistence layer,
let's create entities. This database is going to have two tables
to start with, an employee table and a report table.
Let's make the tables and let's put some items into the -- put some columns into them.
So here I've used the GWT conventions of specifying that this is a server of class, so, therefore,
don't compile it down to JavaScript. Let's add some fields.
And we can use the up arrow to save a little bit of time.
Let's go and get a report. And for something different, let's add a date
field. So it's going to be the created date for our
expense report. And I think we'll take a Java date for that.
We have the Java back-end taken care of. We could run this up.
But let's get a GWT front-end. As a result of the integration work we have
been doing, it's super easy to do that. All I have to do is type "GWT," press tab
and press enter. What's happening now is Roo is going to have
a look at our domain model. It's going to turn this into a GWT application.
It looks at all of our columns, all of our entities, and does that for us very quickly.
You can run this up in the development mode, just like you normally would if you're familiar
with GWT. To save a little bit of time, I have done
that for you already. This is what the resulting scaffolded application
looks like. It's very simple at the moment.
We have the tables that we promised. We can go and create a new employee.
And it goes and stores it as we'd expect. All the normal sort of cruddy stuff.
What if we wanted a comment column? How do we do that?
The good thing is Roo supports full round-tripping. We have a tool called Springsource Tool Suite.
This is our free IDE, which you can also download. And it has comprehensive Roo integration,
as illustrated by this "Roo" logo at the bottom. In order to add an extra column to our database,
you just edit in a normal Java fashion, string comment.
And I haven't saved yet, but when I click the "save" button, I'd like you to look in
this area down at the bottom of the screen. What's happened is, Roo has automatically
detected I've changed my Java class and it's gone and updated all the necessary GWT user
bits and pieces. In order to see this in action, I go to development
mode, click refresh. It's a very fast refresh, only takes about
two seconds, which is unbelievably fast. Now if we have a look at data browser, and
we have refreshed the browser, employees, and there we have it, we now have a comment
field. Just to show you that it works, and it persists
fine. So what we've done in just a couple of minutes
is, we've gone from an empty directory, we've typed less than 200 characters, and we've
ended up with a GWT front-end scaffolded for us with full round-tripping capability.
This is a great way of saving time as you're building new GWT applications.
At this point, I am going to hand you back to Bruce, who will cover some other integrations
we have added to STS. >>Bruce Johnson: Thank you, Ben.
So 200 keystrokes later, we have the basics of an application, a scaffolding app that
we can build on. You saw STS, the IDE experience.
We have also integrated Google plug-in for Eclipse in GWT and (inaudible) right there
in STS so you have all the tools that you need right there at your fingertips.
We used that environment to continue iterating on the app, using GWT and Roo to continue
to add new features and so on. And after a couple of days, turned it into
a pretty real expense reporting app. So, you know, added a little bit of UI polish.
And, you know, it's a nice, rich Web application. So I keep saying "rich Web application."
What's exciting about that? Well, it's a much better user experience.
So let me point out a couple of things. First of all, it's very fast.
So I'll refresh just to show you how fast it starts.
Ready, one, two, three, refresh. Refresh.
Refresh. Refresh.
That's drawing the UI and that's getting the data, and it's up and running.
That's about 500 milliseconds. Not bad.
It's -- part of the reason for that, by the way, is that the app is only 100K.
It's optimized JavaScript, as I mentioned, that includes even the CSS and the image resources
encoded as data URLs. Another nice thing about this style of rich
Web application that runs heavily inside the browser is that you don't have that sort of
stuttery Web 1.0 click and wait kind of feel. For example, when I want to drill down on
one of these expense reports, I don't have to wait for a new page to come up.
I'm going to click this, and you'll see it animates and transitions very fluidly.
Right, one, two, three, click. And there I have the details.
So this is the way you want to work. It keeps users engaged and it helps you speed
-- basically, speed things up. One other nice thing about a rich Web application
is, it gets exactly the data you need right when you need it.
In traditional HTML server-side applications, you tend to spit out a lot of HTML with data
intermingled, because you're not sure what the user might want to see.
But when I have an interactive application, I know what the user wants.
So, for example, if I want to see the number of people in the engineering department, I'll
click on this triangle and right when I click, it will fetch exactly the data that I need
to answer that one user action. Click, and then, actually, the network round
trip found two employees, populated the UI, and showed them.
And we think that's fantastic. It really speeds up the app and makes it feel
more responsive to what you're actually doing. Now, if you've been using GWT for a while
-- and we hope you have -- probably nothing I'm saying here, aside from Roo, is actually
new to you. You know that you can build these sort of
rich Web applications pretty easily. What is still a problem, though, once you
get your app up and working, is how do you make sure that it performs well?
Some of these apps get really large and there can be bottlenecks inside the browser that
are hard to diagnose. So to address this, we created a tool called
Speed Tracer. We launched Speed Tracer in December as part
of GWT 2.0. And I'll turn on Speed Tracer here.
It's a Chrome extension. I'll continue to use the app.
And Speed Tracer is in the background paying attention to what I'm doing and recording
information. So here I will pause it.
I'm going to zoom out. You see this is a nice HTML5 WUSI UI, all
built in GWT, of course. I look at the sluggishness graph.
I see a peak. That's an area I could optimize if I want
to. I'll drill down, and Speed Tracer shows me
this bar which has a lot of stuff going on. It tells me down to the millisecond where
time is going. So I see that a lot of the time is script
evaluation, but it's also parsing HTML, recalculating styles due to CSS changes, doing layout, you
can even see things like garbage collection. Basically, there's not even a single millisecond
of time that happens within the browser that you cannot find out about in Speed Tracer.
It's like an x-ray machine for your browser's guts; right.
But that's not where all the time goes in an application.
Sometimes the server is what's actually slow. So we realized what we need is a tool that's
sort of like Speed Tracer, but for the server. Well, it turns out that tool exists also.
And Springsource had it. It's called Spring Insight.
And that tells you on a request-by-request basis the timings of various things in the
server. As I was using this app, I was gathering Spring
Insight data. Here you can drill in and see there was an
HTTP post that did a JDBC select, and I can drill down to see even more details.
So if you think it would be neat to combine that information with Speed Tracer, we think
alike, because that's exactly what we did. And so I'll go back to the network tab here.
And I can see a pretty traditional-looking network view, like you might have seen in
Firefox or Webkit Inspector, except now I have this nifty icons here that say, hey,
for this request, I have data about timings on the server side as well.