Gundrota: As much as we love web apps,
they don't work in many situations
when you lose connectivity
or have intermittent connectivity.
And there are a lot of scenarios
that we wish our web apps could work.
One of the challenges is that there's no local storage
and no way to store the application state or code.
That is until recently.
What the HTML 5 standards of Database and App Cache
allow you do is really approach the problem of offline,
or even in the online scenario,
store and cache the resources you need
for a faster application.
Let's show you how this works.
Let's go into the first demo.
First demo, I'm in Safari,
I've got a little app, it creates a sticky note,
and I can, uh, you know, create some sort of data.
And if we go into the developer tool here,
inspect the element, go into the Database,
you'll see that sure enough,
the notes I'm writing are pushed down
into that SQLite database.
But let's lose the connection.
Okay. No connection. No Ethernet connection.
Can you go to google.com?
Okay, good. My favorite web site is inaccessible.
We really are offline.
Let's try creating another note.
Okay, so the note continues to work.
The JavaScript's all there.
Uh, the data is being pushed into the SQL database.
Now you must be wondering, okay,
you got the data in the database,
but where is the app?
Well, let's look at the manifest
because the standard points us to a way to actually, uh,
have pointers into the storage system which high--
which, uh, point to where the code is, the JavaScript code
and the other resources that you need.
And so there you can see where the JavaScript CSS images,
uh, and other things are stored
so that when you're in an offline state,
well, you can rehydrate all those resources,
and the app just works.
Let's show you a more advanced example.
This is an Android phone,
and what you're looking at here on Android is Gmail.
It's really, really rich Gmail.
You can see the colored labels,
for those of you who are Gmail users,
you've come to know and love.
Um, as Matt moves around,
you see that floating toolbar that moves with him--
that's all implemented, uh, in this particular app,
and it's very, very fast.
You click a message, it opens up.
Here's the kicker.
Look at the top of the screen.
This is an Android device that's in offline mode.
It has no connectivity.
In fact, what you're looking at is a web app,
utilizing the great new capabilities
of the Android browser to have support
for these HTML 5 standards.
This particular app, Gmail on Android or on the iPhone,
is already shipping.
In fact, it's Google's first big HTML 5 app,
and really demonstrates the power of what's possible.
And as these phones get faster, these web apps
just get better and better and better.
Whether it be better JavaScript performance,
or the CPU of the phone gets better,
or the network connectivity gets faster,
these really become more and more capable,
and another example of Google moving towards HTML 5.
Okay, let's go back to slides.
Of course, we're not the only company who's, uh--who's--
really has invested in the web.
Another company that has pivoted their strategy
around an open web platform is Palm.
And to talk about that, I'd like to invite up Michael.
Michael Abbott, Senior Vice President of Palm.
Welcome Michael.
Michael and Greg.
Gonna talk about this, yes.
Abbott: Thanks a lot, Vic.
Uh, good morning to everyone here.
Um, I think that, uh, one of the interesting things
that I was thinking about yesterday is that
if it was a year ago, and you were at this conference,
I'm not too sure many of you would've predicted
that Palm would be at stage here at Google I/O.
And, uh, one of the key things I think why we're here
is that we share a very common vision.
Or a similar vision.
And that is indeed that the web is really the platform.
And as we step back in time from when we were designing
and architecting webOS, we were thinking through,
how could we actually enable developers
to have a program model that we're used to,
but at the same time offer access to both
services in the cloud as well as on the device?
And so what we did was we have built up a platform
with the browser as really the core construct.
And more concretely, actually using WebKit
as the core rendering engine in WebOS.
So all of the core applications
that are built as a part of WebOS--
mail, contacts, and calendar--
are all built in HTML, CSS, and JavaScript
as applications on-- in this environment.
So if you look at a little more details
of what one of these applications really look like,
you can see that we have an HTML page
that defines a layout of the application,
we have JavaScript that-- which can define transitions,
animations, access storage on the device,
and we might use CSS to style the applications.
Now, for developers we have
a framework called the Mojo framework
that allows you to style applications in beautiful ways
and at the same time be very performate.
Now, with this program model that we're offering,
certainly standards is really important to us,
and HTML 5 is a really key aspect of WebOS 1.0.
And so we're gonna show you just a couple quick demos
of how we've actually deployed and leveraged HTML 5
in the initial version of the platform.
So we'll switch over.
So, the first thing I'm gonna show you
is just an example of the canvas tag in our calendar application.
You can see the way we're using it
is to actually get really high-performance scrolling
as Greg actually scrolls up and down in the day view.
So that's just one example there.
And this example we're gonna show you is CSS transformations.
So this is in our music application,
and you can see that we're using CSS transformations
to rotate the album art.
Again, this application
is all built in HTML, CSS, and JavaScript.
And the last example I'm gonna show you
is with HTML 5 database.
And we're using that HTML 5 database
as a mechanism to store user's history as well as browsers.
Now, within this development environment,
there's a set of services that are on the device--
uh, we'll get to the next slide.
That we want to offer and expose up,
from the hardware in this particular case,
into that development environment.
And the Accelerometer is one of these extensions
that we'd like to see in HTML 5.
What we've done is offered up various events
into that JavaScript run time
so, for example, events around shaking, acceleration,
and orientation, and expose those events up
through a DOM Level 2 interface into JavaScript.
Now, there are certainly other types of events like this
that--as a result of that deep integration
between the software and hardware--
makes a lotta sense,
certainly for the mobile computing platform,
and that's actually one of the key things that--
that we're interested in working with you on over time
which is how do we actually really bring in both the mobile
and the desktop development environments together.
If you look at an example of how we're actually doing
this type of integration of the applications
using these accelerometer API,
you can see that we define a set of events,
and then you as a developer can go and define
the handling of those events.
So depending on how you want to leverage the accelerometer
in your application, it's very simple to access these events
and leverage these within
that JavaScript programming environment.
So again, what we see for HTML 5 and WebOS
is really a key convergent point between the mobile platform
and the desktop platform,
and we're very interested in working with you over time
to extend all the various events and access services
from these hardware platforms into this run time.
Thank you.
[applause]
Gundrota: Thank you. Thank you.
Okay, App Cache, Database--
broadly adopted today in these browsers.
Finally, let me talk about Web Workers.
You know, as the web becomes more powerful,
and you build better and better apps
that become richer and bigger,
uh, you do run into some problems.
Problems that native applications have solved.
For example, any of you who've written applications
with large amounts of JavaScript
understand the challenge of having the UI freeze
as you do JavaScript parsing.
It's not pretty.
but unfortunately it's unavoidable
as your JavaScript gets larger and larger.
How do we solve this problem?
Well, in a native application,
you could spawn a background thread.
You could, uh, have background processing.
And that's exactly what the HTML 5 standard
of web workers allows you to do.
Let me show you some demos.
Let's move over to screen one. There we go.
This particular example just calculates, um,
some prime numbers.
And so we've got a couple of tabs open there.
You can see we've got the New York Times and so forth.
Uh, Matt, why don't you go ahead and start the demo?
And now try clicking on another tab.
Uh, exactly.
So the JavaScript parsing is completely hosing
not only the tab-- the UI of the tab--
but as well as the rest of the browser.
Let's redo that demo.
This time let's look at the source.
Same demo, but look at the source.
We made a change.
And you see there Matt highlighting the use
of the background processing via the Web Worker.
Let's run that same app again.
Number one, the UI is responsive,
the other tabs are responsive,
and it all just works.
Right? New capability.
Background processing in the browser from JavaScript.
That's just really, really great.
Let me--
[applause]
Hold your applause.
If you like that, wait 'til you see this.
Uh, this demo is my favorite.
Okay, it's using the canvas tag to place the boxes,
it's using the video tag to play the video,
it's using JavaScript and Web Workers
to run some background processing.
Let me tell you what's gonna happen.
We're gonna start the video, and you're gonna see a lady
walk by the vi--on the video.
JavaScript is gonna run and do motion detection,
and then draw via canvas a bounding box around the object