Bowers: So remember, too, that that was in Java
and it was really quick; there was no server configuration,
there was very little development configuration.
Just installed Eclipse and installed a plug-in
and it was pretty much ready to go.
Also notice that I didn't have to write
any JavaScript XHR calls.
That's because I'm using Google Web Toolkit,
and it'll handle the communication
between the client and the server for me.
So what App Engine does on the back-end
making server-side tasks easier,
Google Web Toolkit does on the front-end,
making client-side coding and development easier as well.
So if we can go back to slides...
[laughter]
So they told me I needed a marchitecture diagram.
So it's Google Web Toolkit in the front,
and App Engine in the back.
Now I want to talk about two features
that are coming up in Google Web Toolkit.
We're optimistic that HTML 5 is going to
bring some sanity to the browser world.
Yet you're still going to
have to develop for multiple browsers.
Now, Google Web Toolkit's inherently designed
to work across browsers,
handling the differences for you.
So you write your user interface in Java,
and then the compiler is going to handle the compiling
to the optimized, appropriate JavaScript-rich environment.
But right now there's a wrinkle in that development flow.
We encourage people to use CSS 'cause it's a powerful way
to style your apps, but if you're familiar with this,
you'll also know it's frustratingly inconsistent.
[applause]
I see some of you relate.
So it's times like these when you want to use Firebug
to figure out what the heck's going on.
Now, here's the wrinkle.
Because we have real time Java debugging
in Google Web Toolkit using a special browser,
it's meant you had to compile the JavaScript first,
then take that, go view that in Firefox,
and then look at Firebug,
and then so we had an extra step in there.
Well I'm happy to say
in the next version of Google Web Toolkit
You'll no longer have to do that.
You'll be able to debug directly in the browser.
It's also not just Firefox, it's any browser.
So let me show you a quick demo of what that looks like.
So I'm gonna go back to the project that I just created,
and I'm gonna change the launch configuration
to use the new plug-in.
So we'll take this out here.
So this is gonna start up the plug-in infrastructure.
And I'm gonna close down nightly
and start up the other version of Firefox we have here,
'cause that's what my plug-in is installed on.
Now I can navigate to my local server.
And you'll notice that I'm passing in,
uh, special query parameters
so that we know it's coming from the hosted mode.
And you can see this is the--
the app that I just had, and so now I can use Firebug
and inspect like-- like you're used to.
Okay, well, that doesn't seem too special,
but remember that what I have on the back-end is still Java.
So you can see this is Java that we're generating here.
I can make that change, go back to Firefox--
I'm not using the special browser here--
click "Refresh,"
and then I should be able to inspect that.
Let's see if we refresh again.
Or sometimes it helps to restart your server.
So let's do that. All right.
So we've got that running.
And make sure I didn't cache.
So this is going to make the development cycle a lot faster.
It's also going to work on multiple browsers as well,
so all the major browsers have plug-ins.
And there we go. There we see some changes.
[applause]
And it'll also work with other plug-ins as well.
Now, I want to talk about one more feature
that we're really excited about
in the next version of Google Web Toolkit.
With all this HTML 5 functionality
you're going to find yourself writing rich user interfaces.
And if you've built apps like that before,
really large JavaScript Ajax apps,
you'll know that your JavaScript codebase is going to grow,
and it's going to grow a lot.
If we can go back to slides, please.
It's going to grow a lot as you add more functionality.
And that in turn means your users are going to wait,
and they're going to wait, and they're going to wait
for your application to finish loading.
So you need a way to split up all those JavaScript files
across multiple files so your user
can get started with your application
without having to wait for it.
However, manually splitting JavaScript
can be very tedious.
You have to get the dependencies correct,
uh, it takes a long time, and you really--
it's not something you wanna do on a Friday night.
So that's why the next version of Google Web Toolkit
we're gonna help you out with that,
and do it for you with something called,
"developer-guided code splitting,"
also known as runAsync.
Now with runAsync, what you do is specify in your code
somewhere that you're willing to accept a short pause
in exchange for the compiler being able
to functionally fragment your codebase.
So what this means is I can download code
after the initial download.
Imagine you have a settings page, it's not real--
uh, it's rarely used, not used on startup at least.
Well, there's no reason to download
that code with your initial download.
Instead you'd set a runAsync split point,
then allow that code to download in the background
after your user is up and running.
Okay, you're saying, "Andrew, that's great in theory,
but does it really work?"
Well, I'd like to leave you with some metrics
from a real world application that's using runAsync.
This is a application we'll talk more about tomorrow.
This is a graph during development
of the size of the JavaScript codebase.
So it quickly grew to 1.4 megabytes
as they added more functionality to the UI.
So that's--that's a lot of code to download on initial download.
Now, after runAsync, the initial download
was decreased to 200k, which can then be decreased
another 80k--to about another 80k when you gzip it.
So 1.4 megabytes to 200 kilobytes.
So it's about a 7x decrease. It's going to load a lot faster.
And the best part is they didn't have to worry
about the dependencies themselves.
The compiler looked at their codebase
and handled all that for them.
So these are just a few of the features that we're adding
to Google Web Toolkit.
We're gonna be talking a lot more about the future
and the present with both App Engine
and Google Web Toolkit over the next few days,
so please stop by and join us.
Thank you.
[applause]
Thanks.
Gundrota: Great job, guys.
And as you can see, these are the URLs where you can go
to learn more or attend any of the sessions.
Of course we are very, very happy at Google
to see the developer adoption of Google services.
You go to a webpage and you see someone who's incorporated
Google YouTube, or Google News, or Google Video,
or even Google Search on their page,
and it delights us.
You know, we have over 60 APIs that we make available,
uh, to developers.
In fact, we're very proud to announce today
that we have crossed the 4 billion API threshold.
That's 4 billion API calls every day
coming in to Google.
That's even a big number for us.
And so thank you for your support,
thank you for, uh, enhancing your apps with Google services.
Of course, we're not satisfied.
We wanna do more to-- to make your web apps better
and make the web even richer.
And we looked at one of our most successful models.
And that's AdSense.
There are literally hundreds of thousands of sites
that use AdSense.
And they get those Google ads on their page by nothing more
than including a little bit of JavaScript.
And so we asked ourselves, why couldn't we
take that approach for everything we were doing?
Why not make our other services that easy
to incorporate into your applications?
To demonstrate a brand-new developer product for you,
I'd like to invite up DeWitt Clinton
to walk you through that.
DeWitt, please. Welcome.
Clinton: Hey, thank you, Vic.
[applause]
Hi.
Today I'm very pleased to introduce
Google Web Elements.
Google Web Elements bring Google products
to your website using simple copy and paste.
We were inspired by the embeddable YouTube video
and AdSense, and asked ourselves,
could we apply this approach to more products?
Today I'm going to demonstrate adding Google News
and Google Maps, and Google Search
to a website using Google Web Elements.
Let's get started.
Here's a simple website we put together.
Standard two-column layout like something you'd find on Blogger,
or WordPress, or your own site.
It looks pretty good,
but I think we can make it more dynamic.
I'd like to pull in, uh, headline news from Google News,
and I'll do that with a Google Web Element.
I go to google.com/webelements,
and I select the "News" element.
And here I can choose from headlines from technology,
sports, politics, or enter my own.
I'll enter "Google."
And I'll fit it to my site.
And I copy the code,
and I go to the HTML of my site, and find the right place.
and I hit "paste."
When I go back to the page and refresh,
Google News is already live.
I'd like to add now a map
to Moscone and the developer conference.
So I go to google.com/webelements,
I go to the "Maps" element,
I type in, "Moscone Center."
And we're here for Google I/O.
And I like the terrain view.
And again, I copy the code,
I go to my template,