[MUSIC PLAYING]
TIMOTHY JORDAN: Hi, Timothy Jordan here.
Your friendly developer advocate, taking you
around Google I/O 2017.
We're now in the maps and mobile web tent
and I'm here with Chris Wilson, who's
going to show us how Lighthouse works.
CHRIS WILSON: All right.
Thank you, Timothy.
So Lighthouse is a tool that we've
created to help build really good web experiences,
help you improve web experiences.
I'm going to actually enter in a URL right here.
This is the media player application
that we showed off in the Web State of the Union talk.
We also have a talk about it tomorrow,
in the future of audio and video.
And it's going to run a series of tests
here to test a bunch of different things
about whether it has a manifest, whether it has a service
worker installed, if it's going to work when it's offline,
how it works in different network environments, all kinds
of stuff.
How long it takes for the user to get an interactive access
to the page, all that kind of stuff.
And something went hideously wrong.
So let's take a look at the report.
So this is kind of cheating, because
this particular application gets 100%.
It does super well, right?
I mean, we hand-coded this.
Paul Lewis is an expert--
he knows what he's doing.
Like, he has a manifest on here, it's got a service worker,
it works offline.
You know, there's still things to be done.
Like performance-- you can always
try to do better at performance.
A little bit-- a tiny bit in accessibility.
We could do, maybe some best practices,
and passive listeners-- that kind of stuff.
A really awesome score, right?
I had to use this site because all of mine are horribly bad.
Everything.
You know, I know what the lowest score I've seen today is.
It's my own site, so.
TIMOTHY JORDAN: Well I would say I'm not going to tell anybody,
but you just told everybody.
So now-- this is a social contract to fix that.
CHRIS WILSON: It's all open source,
so you could go fix my site.
Maybe?
TIMOTHY JORDAN: I don't think that's going to happen.
Chris, thanks so much.
CHRIS WILSON: Thank you.
TIMOTHY JORDAN: This is Paul, and Paul's
going to tell us a little bit about what's going on with AMP.
And I have a fancy question to ask.
PAUL: Then ask your fancy question.
TIMOTHY JORDAN: My fancy question
is the overlap between AMP and PWA.
When are we going to see it, and how well does it work?
PAUL: Yeah, there's a good reason why we're so close
together here with the stalls.
And I just talked about it this morning--
how to combine those two in a really, really nice way.
And there's-- there are three development models that really
work well.
Because what we're saying is that you want to start fast
and you want to stay fast.
So you can either build an AMP that is both a PWA--
you can actually do that.
But you also lead from an AMP to a progressive web app,
and use your AMP content as a data source
in that progressive web app.
TIMOTHY JORDAN: All right.
So that makes a lot of sense.
You have something you can show me?
PAUL: Actually, yes.
Yeah.
So--
TIMOTHY JORDAN: Let's go ahead and show it to the camera here.
PAUL: So if you take a look here,
this is actually using live data from the Guardian, who
graciously offered us their access feeds to do this.
And so this is a demo app that I built a few days ago.
And so, as you can see, it's a fairly smooth navigation.
This is actually a progressive web app,
so I can navigate in categories.
And then, if I click on one of those links--
there we go, let's try that--
it opens the actual AMP article.
So this article that you see right here-- as you can see,
there was a transition going on here.
And this article itself is all AMP.
So you have a progressive web app shell
that just does the navigation.
But then you use AMP as a data source in your app.
TIMOTHY JORDAN: That's totally awesome.
Hey, thanks for showing us that, Paul.
PAUL: Absolutely you're welcome.
TIMOTHY JORDAN: What is this going on over here?
It looks cool, and live, and data.
SPEAKER: Yeah.
It's the I/O transport tracker, which
this is the second year we've been running it.
And basically we're--
TIMOTHY JORDAN: Show me what it is up here close.
SPEAKER: There's a few components to it.
There's an Android app that we put on to each of the shuttles
running to the different hotels around the I/O conference.
Those Android apps are using the Firebase API
to report their locations as they
travel to each of their stops.
And then this is just a Google map on a web page
that you subscribe to that same Firebase database and, funnily
enough, each time the bus moves, the bus icons on here move.
And so it allows us to see exactly where
all the buses are.
TIMOTHY JORDAN: That's really awesome.
SPEAKER: Yeah.
TIMOTHY JORDAN: So this is us right here, right?
SPEAKER: Yeah.
You can-- some of the buses you can see are parked there.
And it's all hooked up with GTFS data, as well.
TIMOTHY JORDAN: All right.
So that is the maps and mobile web tent.
And I think it's time to get on and see some more stuff here
at Google I/O 2017.
[[MUSIC PLAYING]