ANKUR KOTWAL: Hi, I'm Ankur Kotwal,
and I'm an Android developer advocate.
ALEX DANILO: Hi, I'm Alex Danilo,
and I'm a Chrome developer advocate.
ANKUR KOTWAL: Today we want to talk
to you about some new developer features
that we've added in the web view on Android.
So more specifically, Android 4.4-- also known as KitKat--
introduced an updated web view which is actually
built off the Chromium web view now.
And that brings a whole range of new features for developers.
ALEX DANILO: That's right, Ankur.
In fact, what we've built now into the web
view is all the functionality of Chrome.
So what that means to you as a developer is
that you have all the HTML5 capabilities that
exist in Chrome shifted into the web view,
so you can take advantage of modern HTML5 and all its APIs.
Which is kind of nice.
ANKUR KOTWAL: Absolutely.
So let's have a look at a demo.
ALEX DANILO: Well, before we should go into the demo,
I just wanted to point out something.
One thing that's been really hard for me as a developer
is actually debugging stuff in a web view.
How do you debug normally when you're
building Android applications?
ANKUR KOTWAL: I use Android Studio or Eclipse.
ALEX DANILO: Right, like I used to as well.
But when I'm developing on the desktop,
I use Chrome dev tools, which really makes my life simple.
And now you can actually do it from the web view.
So why don't we just have a look at how we actually
go about doing that.
What I have here is we have a little full screen game.
You hit the start button here.
And what you have is a ball that you can roll around.
So it's kind of a standard thing.
But what I'd like to point out here
is that we're actually using the motion of the device
to control the ball.
We couldn't do that before could we, Ankur?
ANKUR KOTWAL: No.
So this is now the accelerometer.
And the Chromium web view is mapping
that hardware accelerometer on your Android device
straight through to the web view itself.
So this is a demo that Alex, you built.
And we now this app here is effectively-- it's a web app.
It's just a thin wrapper of an app that drops in a web view.
And it's just a login to your site, isn't it?
ALEX DANILO: Exactly.
And so the beauty of this is that now we have this web view.
And in the old days, prior to Kit Kat,
you'd be thinking, how I debug this?
It's really hard.
But what I can do is then come over here to Chrome,
and I can just go over and have a look at Chrome inspect.
If I go and have a look at that, you'll
suddenly see the devices that are connected to my laptop
visible.
And here we actually see we've got a Nexus
10 running this application at the moment.
And you can see the actual web view itself.
So for Android developers, you'd be
familiar with this com.alex.roller.
So that's the namespace my app's been developed in.
So all I have to do is click this Inspect link,
and lo and behold, we have the full Chrome dev tools
experience.
Identical to what happens on a desktop.
But now it's actually talking into the device,
and I can look at the DOM.
I can write point JavaScript.
I can modify the DOM on the fly.
ANKUR KOTWAL: And this is not a special build of your app,
right?
ALEX DANILO: No.
ANKUR KOTWAL: It works for debug and release builds.
ALEX DANILO: Exactly.
That's the beauty of it.
This is for any app that uses the Chrome web view now,
which is fantastic.
So I can drill down, look in the DOM here.
And of course, I can see the Start button,
but there's no game content.
You can see hovering over it, it's
actually changing what you can see on the screen.
So if I actually tap the start to start
the game you see all of a sudden all these new elements
appear in the DOM.
So this is a live DOM.
Actually on the fly.
And if you have a look at down here
at the very bottom, which I have that highlighted.
You see the rotation and the transforms
are changing on the fly.
So as the ball is moving around, this is actually changing live.
So this is just fantastic.
Although the holes that the ball falls into,
they're a bit dark for me.
What do you think?
ANKUR KOTWAL: Yeah, I mean all of our UX research
shows that you should use lighter colors, Alex.
ALEX DANILO: I think you're right.
So why don't we do that.
Why don't we actually change the color that we're seeing.
So if I go back up the top-- since I actually wrote this I
know what to look at, but--
ANKUR KOTWAL: I notice that says SVG.
That's also a new feature of the Chromium web view, right?
We now have SVG support.
ALEX DANILO: That's right.
We brought in SVG support.
I think it was Honeycomb was the first version that
supported it.
But now the web view actually has it.
And it flies.
So I've got these gradients here that are used for the holes.
So if you have a look, here's this gradient
that's black and gray.
I might just decide that I'd prefer the holes to be blue.
Start as blue.
So if you actually watch as I change that,
all the holes suddenly changed to blue.
So we're actually modifying the live DOM.
And this is an incredible feature.
So the ball itself, let's go down to the ball.
Let me have a look.
You'll notice we have a Chrome logo there on the ball.
See, that's a Chrome logo spinning
around which is controlled by this image here.
Now I could actually just select it and delete it.
And lo and behold, our ball has become a blue ball
because I've taken away that image.
And this is really bad because now we can't the ball
from the holes.
So we can actually change the color
of that circle that the ball, and it becomes red,
and we can again see what it looks like.
So they have it.
We have actual live editing, on the fly of our web app,
without any code changes.
And you can do this from your desktop, from your laptop,
on the fly.
It's just an awesome new feature in KitKat.
ANKUR KOTWAL: And we should also add
that when we connected with Chrome
we didn't need ADB or the developer tools installed.
It's all built into Chrome now.
And you can connect directly, it just shows up.
ALEX DANILO: That's exactly right.
Pro tip, for all the developers our there,
turn on hardware acceleration because that
will make your apps fly with the new view.
So hardware acceleration, HTML5 features, I love KitKat.
It's fantastic.
ANKUR KOTWAL: Thank you.