Gundrota: This new functionality that's, uh, included
in these browsers allows developers
to have their cake and eat it too.
We still get the best of the web browser
deployment model-- the friction-free deployment--
and for the first time as developers,
we're able to access the underlying services
such as geolocation or the graphic subsystem
or storage or CPU services
in a way that was formerly only limited
to native applications.
And those capabilities, we believe,
will close the remaining gap in usability and performance
from native apps and web applications
even further.
Course, it's not just about the technology.
It's about people.
It's about the people in this room.
Those who've contributed to this amazing acceleration
of innovation that we've seen.
This chart is the unique, monthly contributors,
um, to open source projects.
And just look at the growth of our community--
of developers contributing to make the web better.
And so it's no surprise that as our community grows,
we see more innovation.
I mean, just stop for a moment.
Did you realize that in the last decade,
we have seen a 100x improvement
in JavaScript parsing?
Think about the implications.
The implications are that what we thought was impossible
to do in the browser with JavaScript
may now become possible.
Of course, that's just one example
of technological improvement.
We're going to show you lots more today.
More the community growing, more innovation,
has lead to the ultimate metric of success,
which is users.
And today, we have almost half a billion people
who are using modern, open source browsers.
And I think that is just a fantastic testimony
to the success that we as a community have had
in moving the web forward.
I'm gonna walk you through some new capabilities
in what I'm going to broadly categorize as HTML 5.
We believe that the capabilities that I'm about to show you
in this keynote allow us to move beyond Web 2.0 apps,
but really move to kind of apps that have capability,
have a fidelity, have an experience
that I think will surprise you.
Before I go into those new standards,
I want to tell a cautionary tale
and I want to plead for help from you.
Almost a decade ago,
I was on another team responsible
for driving the adoption of XMLHttpRequest.
It was a new capability we had added to the browser
that allowed for asynchronous callback.
And I talked to many companies, many developers,
and we just didn't get traction
until--do you know when?
Until about April of 2004 when Google released Gmail
and we saw an explosion of Ajax apps.
Yet those underlying capabilities
that enabled those Ajax applications
had laid dormant in the browser
for over half a decade
because no killer apps were developed
that exploited those capabilities.
I'm going to plead with you as a community,
let's not make the same mistake again.
As we talk about these new standards this morning
around HTML 5,
recognize that having the capability
in the underlying platform is not enough.
It's up to you and people like Google--
companies like Google and others--
to build the compelling apps
that are exploitive of these capabilities.
Let's not wait another half decade.
Let's take advantage of these things
that you'll see this morning.
Let's build those exploitive apps.
Let's move the web forward even faster.
So this morning, I'm going to invite up Matt Waddell
to walk us through--
we're gonna go through about 16 demos this morning.
You're going to see a lot of the capabilities
we're talking about.
And Matt, my colleague, is going to walk through these demos
as I--as I talk over them.
We're going to emphasize five things
that excite Google
and we think you should be paying attention to
in the HTML 5 world.
The first one is canvas.
Let's talk about the problem.
You're developers.
How do you draw a diagonal line in the browser?
Think about it. What do you do?
Draw a diagonal line in the browser.
Well, I know, you think, well, Vic,
I guess you can't really draw a diagonal line in the browser.
You would draw and image on the server.
You'd push the image down
and you'd get your diagonal line.
Yeah, you're right.
But then, of course, your interactivity
is limited to the granularity of the image tag.
That's not very interactive.
Some of you in the audience are going, wait, wait,
it's easier than that.
Just use a VML or Silverlight or Flash.
And--and you're right. Those approaches could work.
But what if we wanted something that was part of the open,
transparent internet that we know and love?
And that's exactly what canvas is.
The canvas tag is intrinsic. It's native.
It fits seamlessly into the page
and works great with JavaScript and CSS and the DOM.
And canvas allows you as a developer
for the first time within the browser
to have drawing and animation APIs
with pixel-level control,
which changes, uh, the kind of applications
we can deliver.
Let me show you.
In the first example we're going to show--
if we could switch to the demo machine--
Matt is just going to draw within, uh, the browser.
And he's using the mouse. He's drawing.
The magic here is in the source code.
That's the entire source code.
There are no plug-ins here.
What's magical is what Matt is highlighting.
There's the use of the canvas tag.
And then the JavaScript is doing nothing more
than responding to mouse up and mouse down movements.
And he's drawing right there within the browser.
Let's show you a little bit more advanced example.
This is a first-person, uh, shooter--
I mean, gifter.
We did this on Mother's Day.
And we thought first-person shooter
was not politically correct so we changed his--
the weapon.
I guess he runs around giving gifts.
Uh, but once again, the magic here,
look at the JavaScript.
It's the use of the canvas tag and nothing more
than--than JavaScript.
And, you know, this is-- this is amazing.
That kind of demo half a decade ago
or a decade ago was amazing on the PC.
Now you can do that within the browser.
This next example is Bespin.
It's a development tool from Mozilla Labs.
It's an IDE that allows you to build web apps.
And it's, uh, it's a fascinating tool.
What's interesting about the IDE
is that it feels like a native app.
It's not a native app. This is in the browser.
And the use of canvas tags to do pixel-level control
gives this Bespin IDE tool a level of richness
and a native feel
that I don't think you're used to in the browser.
Finally, let me show you another example.
This is an internal tool.
We've never demonstrated this publicly.
We've never shown this.
It's a tool we use at Google to do profiling,
um, uh, uh, characteristics,
um, and so we can tweak our apps
and make them faster and better.
So we can switch to, uh, machine two.
And what Matt's going to do is this is--
this is running in Chrome.
He's going to click on the tab.
And he--he turned on this profiling tool
that you see him moving to the right.
Now he's going to open an article
in The New York Times.
Yeah, I don't think you clicked on that article.
There we go.
Now, as he, uh, goes to that article,
what will happen is that profiling tool
will start to graph,
uh, the--the performance characteristics
of--of that particular operation.
Note how he can zoom in to that profiling tool.
Those spikes represent time
or things that are slowing down the app.
And as he moves up and down, he can see the various events.
Matt, can you click-- there we go.
So he opened up a script tag.
You can see the pie chart there
that shows what percent of the time
was on the JavaScript compile,
what percent was on parsing the HTML
and so forth.
So the tool is interesting.
But would you believe that tool is completely built
in HTML 5--
that's just the use of a canvas tag
to produce this level of high fidelity?
It's an example of the kind of apps
that we as a community can build
once we have pixel-level control on the screen.
Let's go back to the slides.
Course, one of the advantages of using,
uh, something like canvas
is that you as the developer get to take advantage
of performance improvements in the browser.
So as JavaScript continues to get faster,
you get to ride that rocket
and automatically benefit from that.
Course, we've shown you some examples
of canvas to produce higher fidelity apps in 2-D.
Is the web ready for 3-D?
We think it might be.
In fact, I'd like to invite up Matt Papakipos
up to the stage to show you some 3-D demos,
uh, and some emerging standards
that we think will surprise you.
Matt.
Papakipos: I got to go, right? Gundrota: We've lost Matt.
Aha! There he is. Matt, please.
Papakipos: Thank you, Vic.
[applause]
So I'm Matt--Matt Papakipos.
I run, uh, one of the-- one of the efforts
in the Chrome team at Google.
Um, we are very excited about the prospects
for 3-D graphics inside the web browser.
And we'd like to share with you,
uh, what we've been working on today.
Over the last ten years,
we've seen an explosion in 3-D content
that real users use every day.
Everything from video games to engineering applications
to data visualizations like Google Earth.
What's been missing thus far is the ability
to run these 3-D graphics applications
in the browser itself.
So let me show you what we've been working on.
This is O3D.
O3D is a-a project that we've developed at Google,
that we open sourced a little over a month ago today.
You can find this on code.google.com.
So what are we looking at?
We're looking at rich, interactive, 3-D graphics
running in the browser.
It's a JavaScript API
that a conventional web application can use
to get 3-D graphics functionality
whenever you want in your app.
As you can see, we're running it here in Chrome.
But it also runs in Firefox and IE and Safari and Opera.
This, uh, the application we're running
is what we call our beach demo.
It's one of the many code samples we developed
for 3-D that makes sure that the technology worked
and performed.
Uh, and it's open sourced on code.google.com.
So the--the full source code of the JavaScript
and all the art assets are fully open sourced.