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