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 <i>The New York Times.</i>
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.