[MUSIC PLAYING]
BEN GALBRAITH: Thank you,
everyone, for joining us here
at the 5th Chrome Dev Summit.
DION ALMAER: Thanks for
everyone coming to Yerba Buena
and to San Francisco, and for
everyone on the livestream.
BEN GALBRAITH: We have
an exciting couple
of days for you.
I'm Ben Galbraith.
I'm product lead for the
Chrome platform team.
DION ALMAER: I'm Dion Almaer,
Google's developer relations
lead.
The two of us have actually
been working together
for over 20 years on the web,
across Mozilla, Palm WebOS,
and as developers building
native and web experiences.
BEN GALBRAITH: And now we're
working with the web community
here at Google, and we
couldn't be more thrilled.
The reach of the web
is truly massive,
with billions of people all over
the world using it constantly.
DION ALMAER: And people use
the web no matter the device.
That's what's so
special about the web.
Whether you're
creating experiences
for desktop or for mobile
and whatever device
is going to come to
us tomorrow, the web
is going to be there for you.
BEN GALBRAITH: But
back to today, we're
really excited about the
quality of experiences
that we can build on
today's web platform.
For the past few years,
we've been talking a lot
about progressive web apps.
PWAs are defined by
specific new capabilities
that we've talked about
before, like Service Worker.
DION ALMAER: Right.
But for us, PWA really is about
providing users with fantastic
web experiences that load
really, really fast, that
seamlessly integrate with
a user's device, that
are reliable in the face of
uncertain network conditions,
and are really just
highly, highly engaging.
BEN GALBRAITH: We
find that developers
who embrace this philosophy,
who take advantage of the latest
web capabilities to optimize
the performance of their web
experiences, are
seeing great results.
Take Trivago, a
major travel services
company who bet early on PWA.
They started experimenting
with a small team of three
developers and a designer.
And after seeing the
initial promising results,
they kept iterating.
And today, they've
launched PWA experiences
in 33 languages
and 55 countries.
DION ALMAER: And Trivago
have seen a 150% increase
in engagement for users who have
added their site to the home
screen and a 97% overall
increase in conversions.
BEN GALBRAITH: We found that
these kind of amazing results
are typical of developers
around the world who
make this sort of investment.
This is made possible
in large part
by the broad browser
support for Service Worker,
including browsers in
the next billion users'
regions of the world.
DION ALMAER: And we're so
excited that both the Microsoft
Edge and the WebKit
teams have announced
that they're working on
adding Service Worker support.
We think this is
big news that really
signals the global demand that
we've heard for PWA features.
BEN GALBRAITH: I
don't think I've ever
seen so much enthusiasm
for a single diff.
DION ALMAER: Yeah.
And then again, when people
found in the WebKit console
that the Service Worker
object was right there--
what a blow up.
BEN GALBRAITH: Amazing.
DION ALMAER: As we've worked
with companies that actually
use Service Workers, we've seen
common patterns time and time
again.
So we've packaged them
together in an open source
project that we call Workbox.
This encapsulates what
we've learned into a library
that you can then just
incorporate into your own code.
Using Workbox means instead of
boilerplate code, such as this,
you can bring it all down.
You can choose from a
set of caching strategies
that are available to
you and just choose
the one that makes sense.
So you take Workbox,
and it really
streamlines the creation
of Service Worker
enabled sites and is used by 70%
of all shipped Service Worker
sites around the world today.
Definitely recommend
that you check it out.
BEN GALBRAITH: Service
Worker requires
that sites use HTTPS
for all their requests.
So this gives us a
natural opportunity
to check in on our
efforts to drive HTTPS
adoption around the world.
We've been at this
for many years now,
and we've been evangelizing
the importance of HTTPS
and investing in making
it easier for developers
to migrate, such as by
sponsoring the Let's Encrypt
effort, along with many other
companies in the industry.
We're pushing hard here,
because migrating traffic
to a secure transport layer
is one of the best ways
that we can provide security
and protection for our users.
We closely monitor
how much traffic
is passing through
HTTPS in Chrome,
and we share this
with the community
in our transparency
reports, the latest of which
we've just released
this morning.
And we're really pleased
with the results.
For example, on
Android, Chrome is now
serving 64% of its
traffic over HTTPS,
which is a 50%
increase year-over-year
from the prior year.
And we're seeing strong
increases on other platforms,
too.
Also worth noting, 71 of the top
100 sites now default to HTTPS,
which is also a big
year-over-year increase over 37
sites last year.
DION ALMAER: So
when you consider
the huge size of the web,
these kinds of changes,
these increases are
almost stunning.
But we know that
we're not done yet.
Earlier in the year, we started
to mark all insecure forms that
accept a credit card number
and a password as unsafe.
What you're going to
see from us this year
is we're going to mark
any insecure forms unsafe.
So if you aren't HTTPS
yet, now is the time,
and it's never been easier.
BEN GALBRAITH:
Speaking of forms,
we think it's really important
to streamline the form data
entry experience as
much as possible.
We want to take away as much of
the friction in the experience
as we can.
And on mobile, of course,
this is even more important.
Autofill is one of the
ways that we do this.
In fact, over 9 billion form
interactions every month
are aided by Autofill.
And we found that
on Android, we save
over 12 seconds on
the median form entry
when Autofill is used.
So as developers, we have a
big impact on this performance
by ensuring that we hint our
forms with Autofill completion
hints, giving our users the
smoothest possible experience
with Autofill.
DION ALMAER: Chrome Autofill's
ability to store credit cards
and synchronize them
across all of your devices
is particularly helpful
with web payments.
But there's an opportunity
to do a lot more here to make
web transactions easier.
So we've been working on
PaymentRequest, the new API
and browser UI for facilitating
web-based payments.
J. Crew, the American
fashion brand here,
recently implemented
PaymentRequest,
and they've seen great results.
Let's take a look at
this flow as I buy
this lovely pair of bear socks.
Once I've decided to buy,
I'll add it to my bag
and start the checkout flow.
When I click Check
Out Now, we're
seeing the Payment Request UI
in action, rendered by Chrome,
giving me an easy and fast
way to share my payment
and shipping information
with J. Crew,
resulting in a very
fast transaction.
50% of users are now
going through this flow
on both mobile and desktop, and
it cuts down the transaction
time by 75%.
This new experience
works wherever
PaymentRequest is implemented.
That's currently in Chrome,
Edge, Samsung Browser,
and both Firefox and
Safari have announced
that their support is coming.
Give it a try.
BEN GALBRAITH: It's
also worth noting
that PaymentRequest is
a particularly good fit
for mobile.
In fact, I want to give a mobile
example now with fancy.com.
This is a marketplace for
discovering cool new products,
and they've just integrated
PaymentRequest, also
with the Google
Payment API, which
is the best way to get access
to the hundreds of millions
of credit cards and debit cards,
and other forms of payment
like PayPal that Google
have on file for users.
And the Google Payment API
was actually just opened up
this morning to merchants.
DION ALMAER: We're already
seeing the payments ecosystem
embrace PaymentRequest, too.
This example, Stripe.
They recently integrated
the Google Payment
and PaymentRequest API
into their platform
with their beautiful
Stripe Elements library.
BEN GALBRAITH:
Another major area
of form-filling friction and
frustration is authentication.
You'll be shocked
to hear that we
found it to be one of the
biggest reasons why users never
return to a site.
And I'm sure that we've
all had experiences
that feel just a little
bit like this one.
Nope!
So we're excited to share
that today we've launched
a new Sign-In Library to help.
DION ALMAER: This
library allows developers
to take advantage of the
fact that millions of users
have already signed in
with Google properties
and allows you to
offer these users
a one-time, one-tap
signup experience.
For example, here
I'm using Zillow
to browse for my new home.
I'm visiting the site
for the first time,
and I want to mark this
obviously affordable San
Francisco home as a favorite.
But to do this, I need
to create an account.
Because Zillow is using
the Google Sign-In library,
and I've already signed
in to Gmail and Safari,
I'm able to do that
seamlessly with a single tap.
It was just there and gone.
BEN GALBRAITH: The dialog that
you saw pop up from the bottom
was all that was required
to create the account.
And in this example, with the
popular travel website Kayak,
it shows how the library
facilitates subsequent sign-ins
with similar ease.
And the Google
Sign-In Library also
integrates with the
Credential Management API
if the user already has a
username and password saved,
and it's based on an early
draft of an OpenID standard.
[CLAPPING]
DION ALMAER: Thanks!
BEN GALBRAITH: Thank you.
DION ALMAER: Let's switch
gears and talk about media.
Media is one of the biggest
use cases on the web,
both for consumption
and sharing.
Mary Mika just
had a report where
she shared that some people
spend 5 and 1/2 hours a day
interacting with media
on their devices.
BEN GALBRAITH: That's like
two "Blade Runner" showings
back to back.
DION ALMAER: That's a
lot of "Blade Runner."
That's a lot of "Blade Runner."
The recent deprecation
of Flash really
shows just how capable,
though, the modern web media
platform is.
Here's an example of Joy
Cinema, where they bring this
all together and show a
really, really nice web media
experience that shines.
BEN GALBRAITH: The
web has been adding
deeper integrations
between web media
and the underlying
operating system.
And we've implemented
these in Chrome.
For example, with the
Media Session API,
your web media sessions
are synchronized
across devices and UI
surfaces on Android,
just as your users
expect, even when
the browser window isn't open.
And with Android
O, we've already
added support for
picture-and-picture,
ensuring that web content
is a first class media
citizen on the platform.
DION ALMAER: We mentioned
media sharing earlier.
The camera is obviously
so important with mobile,
and we recently updated the
image picker UI in Chrome
to make it easier for users
to upload their content
right from that gallery,
as you can see here
in this example with
Twitter's web property.
Then when you get access to
the live camera feed using
getUserMedia, it now gives
you full-frame access
and the ability to control
the camera hardware,
such as engaging the
flash, mucking around
with the ISO levels.
And so when you put
all of this together,
you can really create
amazing things.
BEN GALBRAITH: Take Instagram,
the popular photo sharing
experience.
They've invested in
mobile web support
to make it easier for
users that have devices
with constrained capabilities
or are using generally
unreliable network connections.
To do that, they're taking
advantage of adaptive bitrate
streaming, using the open
source Shaka media player.
They're using image
capture and filters, WebGL,
Add to Home Screen, and Service
Worker-powered offline support.
And they're even using
the new background sync
capabilities and more.
They're here at the Chrome
Dev Summit with a booth
that you can check out to
see a demo of all this,
and they're also
participating in a talk
tomorrow where they
explain how they're
building this experience.
It's pretty cool.
DION ALMAER: It's really cool.
It's great work.
So these media APIs
are an important way
to create web experiences
that feel tightly integrated
into the user's device.
Let's continue in that vein.
Today we're announcing a new way
to integrate your web content
with Android.
BEN GALBRAITH: So
originally, the way
that you integrated web
content with Android apps was
with the WebView API, which
is a modern web render
inside of the Android SDK.
Then we created
Custom Tabs, which
allows you to take advantage
of the user's browser
to render web content
in your Android app.
The advantage to
using the browser
is that custom tabs provide a
consistent rendering experience
across a wide array
of Android devices,
and it provides access
to the user's profile,
such as cookies,
autofill data, and more.
However, this
experience is designed
with opening other
websites in mind.
It's kind of a mini-browser
embedded inside of the app,
so we continue to
show the toolbar
at the top of the screen.
DION ALMAER: So
that's great if you're
building something
that has to keep
going out to different
content, like an RSS
reader or something.
But what if you want to use
content on your own website?
You probably don't
want to show a toolbar
within that experience.
Instead, you can provide the
right experience directly
in your app, and this is now
possible with a new capability
we're announcing today
called Trusted Web Activity.
By launching a
Trusted Web Activity,
any Android app can directly
include app-like content
served from their own site,
with the benefit of custom tabs
running full screen.
This enables you to combine
the best of native and web
in one experience.
On the website, that
means up-to-date content,
small-on-device footprint,
and you can share this
across all of your platforms.
And from the Android
side, you can
take advantage of
everything Android
has to offer, such as
access to Android activities
and services, and integrating
with any other aspects
of Android, such as the
Android and app shortcuts
that you see in this example.
BEN GALBRAITH:
We'll be releasing
a preview of Trusted Web
Activity support in Chrome
developer channel
soon, and it will
be available in the
Android Support Library
so other browsers will
be able to support this.
Try it out, and let us
know what you think.
DION ALMAER: Now, let's
move on from platform API
and integrations and talk about
the core primitives of web
development-- the holy
trinity, if you will,
of HTML, JavaScript, and CSS.
These are the key technologies
that you work with day in
and day out, and they've
each landed massive upgrades
that you can use today.
BEN GALBRAITH: First up, HTML.
One of the recent
big additions here
has been Web Components,
which gives you a cool new way
to share complex functionality
by defining your own custom
email tags.
It's a great way for
you to encapsulate
complex front-end functionality
into reusable components that
can also be integrated into a
wide array of web front ends.
DION ALMAER: We've just
created the Polymer Project
to facilitate the adoption
of Web Components,
even across browsers that didn't
yet natively support them.
This has been kind of a
breakout year, in my opinion,
for Web Components throughout
the entire industry,
with browsers like
Safari recently
shipping built-in support,
and with new tools
from the community like
Svelte, Skate, and Stencil.
For some reason they all have
to start with the letter S.
Not sure why.
But we're starting to see a
web community come together
for this tooling ecosystem.
And these things are starting
to feel a little bit different.
They feel more like
compilers than libraries,
where they generate lean
and fast Web Components that
are ready to use.
BEN GALBRAITH: To make
Web Components easier
to use with today's
web frameworks,
we earlier this year launched
a new site called Components
Custom Elements Everywhere.
It helps you understand
how each of the frameworks
supports Web Components, so
you can make great decisions
and understand how best to
integrate them with the web app
that you're building.
And developers
all over the world
are seeing the benefits
of Web Components.
Williams-Sonoma
is a great example
of an ideal use
case, because they
own a portfolio of
lifestyle furniture brands,
and so they need to reuse a lot
of common web front-end code
across a variety
of different sites.
They're using Web
Components, and it
helps them achieve this reuse
and also interoperability
with a variety of
web frameworks.
And here at Google, we're
betting big on Web Components.
Our widely used
mobile framework, Amp,
relies on Web
Components to provide
high-performing, domain-specific
tags for specific use cases,
like news websites,
or as shown here,
e-commerce sites like Overstock.
With over 4 billion Amp pages
across 25 million domains
loading in half a
second on average,
Amp is a great example of
Web Components at scale.
And they rely on Web Components
as the technology that
helps deliver their
easy-to-use tag vocabulary.
DION ALMAER: The latest
version of YouTube
also embraces Web
Components and uses Polymer,
resulting in an
experience that's
up 15% faster than
the previous site.
YouTube developers
have actually been
able to reuse over
1,000 custom elements
across the multiple
sites that they build,
which is a really big
deal for that team.
BEN GALBRAITH: So that's some
of what's happening in HTML.
Now let's talk about CSS.
We've all gotten the cheap
laugh out of this old chestnut
through the years.
DION ALMAER: It's such
a cheap shot, you know?
But you know what?
We think modern CSS is
actually genuinely awesome now.
For us, the biggest news
here is grid layout,
which really gives
you an amazing way
to define fluid, responsive
layouts for a modern web
application.
In community resources
like Grid by Example,
we show you exactly how to
make it work for you with tons
of specific layout examples.
Kudos goes out to Rachel
Andrew for all of our hard work
in the community here.
It's great to see how
these things work together.
For example, using
grids for your app
combined with Flexbox
for components
kind of feels like a
match made in heaven.
BEN GALBRAITH: And
what's most exciting
is you can actually
use all this stuff.
There is broad browser
support for grid layout,
so now's the time to
dig in and apply it
to your own web experiences.
This takes us to JavaScript,
the last member of our trinity,
so to speak.
And it's had a
fascinating history
going from its origins
in the 10-day Epic Hack
at Netscape to
unfortunate episodes
like entire versions that
were specced out but not fully
shipped.
DION ALMAER: Yeah.
Does anyone remember ES4?
Yeah.
ActionScript.
It was a thing.
BEN GALBRAITH: Half-life?
DION ALMAER: That
time fortunately
does feel like a bit
of a distant memory,
as modern JavaScript
has come a long way,
with browser support iterating
and improving rapidly.
BEN GALBRAITH: In
fact, in the last year,
the majority of browsers have
shipped compelling support
for a whole new
batch of features
in JavaScript known
collectively as ECMAScript 2015.
And Chrome's coverage is
now basically at 100%.
You see a whole sea of green.
There's only one small feature
that the browser community
has all generally agreed
wasn't a good idea
and won't be implemented.
So it's basically all here.
DION ALMAER: Yep.
I love seeing all this green.
Modern JS, of course, brings
us classes, aero syntax,
async await, and a
huge range of features
that make it easier,
productive, and plain fun
to build on the web.
We've also shipped
module support along
with others like
Safari, and we're
working on fully
shipping dynamic imports.
We believe, in the
next year, modules
will be the way to build
and deploy your sites.
BEN GALBRAITH: I
like this code sample
because it shows
off dynamic imports.
And this is actually
really important,
because we're constantly
optimizing our sites
to be as fast as possible
in the initial load.
And this enables
us to restructure
how we think about
JavaScript so that we just
serve what's needed for
that initial experience
and gradually suck in
the rest of our resources
as we need them.
It's really pretty cool.
Of course, all of
Chrome's support
for these new
JavaScript features
comes thanks to V8,
our JavaScript engine.
We just shipped a really
ambitious new release of V8
that has a completely
new re-architecture that
has resulted in substantial
performance improvements.
We have a whole talk that goes
into detail on this tomorrow.
We wanted to share
some of the highlights
for you, starting with
the Speedometer benchmark.
Now, this is a benchmark that
has a reference app that's
written in a bunch of different
popular modern web frameworks,
and we exercise V8 on it.
And we've found the
new architecture
has resulted in a 22%
speed improvement for us
on Speedometer.
We're also looking at V8's
performance in the top 25
real world websites, and we
found a 5% performance increase
with the new version.
And finally, looking
to the future,
we have this
benchmark, ARIES6, that
is focused on measuring
V8's performance running
the next generation of
JavaScript features,
anticipating broad
uptake, and preparing us
for the future of the web.
And here we see a 40%
speed improvement.
So we're really
excited about what
the team has been able to
accomplish in optimizing V8.
DION ALMAER: So
these improvements
are really important--
but not just for Chrome,
also for Node.js developers.
Are there any Node
developers in the audience?
[AUDIENCE MURMURS]
There we go.
There we go.
Very good, very good.
Well, V8, of course,
is the engine of Node.
And the V8 team takes
this very, very seriously.
We have dedicated engineers
working to support Node,
and we don't allow
any commits into V8
if they break Node itself.
BEN GALBRAITH: V8 also provides
support in Chrome for something
called WebAssembly, commonly
referred to as WASM.
Of course, WASM, as we
talked about last year,
provides a compilation
target for low-level code,
such as C or C++, and it
provides bindings that enables
that code to access the
capabilities of the browser.
What's exciting for us
today is that WASM is now
finally available across
a huge swath of the web.
We're supported in Chrome,
Firefox, and Safari,
across desktop and mobile,
and coming soon, in Edge.
DION ALMAER: Wait a minute.
I think Edge actually
shipped support of this
and are rolling it out
to all of their users
as we speak onstage today.
Pretty exciting.
[APPLAUSE]
So for the first time
since JavaScript,
we have a new widely supported
runtime target in the browser.
We think this is huge news.
We want to give you a feel of
what WASM actually enables.
So the Google Earth team
threw together a quick demo
and low-level code base,
utilizing WebGL compiled
for WASM and running in Chrome.
BEN GALBRAITH: It's
incredibly exciting
to see this kind
of functionality
come to the open web.
And we're pleased to share
that both Unity and Unreal
Engine have announced
that they have
plans to support WASM with their
market-leading game engines.
So we think this is going to
be a really exciting space
to watch in the coming months.
It's a big moment for the web.
So we've just talked
about a bunch of updates
to the web platform.
There is a lot to keep
track of, and so it's
more important than ever to
have up-to-date documentation
for all of this.
DION ALMAER: That's
a really big job.
And so we're excited that
last week, Mozilla, Microsoft,
and Google all came together
and shared the news that we've
teamed up to place all of the
Web Platform reference docs
on Mozilla's developer network
site, along with Samsung
and the W3C.
We've actually been
collaborating here
for quite some time.
But with this announcement,
we formalized the partnership
with the creation of a
new MDN advisory board.
BEN GALBRAITH: This is
just one of the many ways--
oh, thank you for the applause.
[APPLAUSE]
Thank you.
This is just one of the many
ways in which the browser
vendors are collaborating.
Actually, I think there was an
MDN staff member back there.
We know it's really important
to build applications
on a web with really broad
compatible and predictable
semantics.
So we're also
pleased to give you
an update on the Web
Platform test project, which
we've talked about before.
We're pleased to share
that over the past year,
we've increased the test
pass rate by 18% in Chrome
and fixed over 500
interrupt bugs.
We're continuing to make
progress in this area,
and we've also seen Safari,
Edge, and Firefox make
similar improvements, all
of us working together
to make the cross-browser
development experience better.
All right.
Now we want to touch
on some of the work
that we're doing in
the tooling space
to make developers
more productive.
Our flagship tool
here is, of course,
Chrome DevTools,
which is directly
integrated into Chrome itself to
help with daily web development
tasks.
And one of the most important
features of DevTools
is Lighthouse,
which provides you
with a detailed
audit of your site
and offers you actionable
steps for improvement.
And Lighthouse can also be
run from the command line,
so you can easily
integrate it with
your continuous integration
infrastructure, which
I'm sure all of us use to
ensure our web apps are
of high quality.
We're going to
share more details
on the latest updates for dev
tools and Lighthouse tomorrow.
DION ALMAER: But let's get
back to continuous integration
for a second.
We recently launched Puppeteer,
a new open source project
to control a headless Chrome
instance intended for use
with testing and automation.
We actually think it's
incredibly powerful
to be able to fully command
Chrome with simple script
just like this.
Anything Chrome can do
is a quick function away.
BEN GALBRAITH: It's
pretty amazing.
In fact, it's kind of weird.
There's a website we
have called Try Puppeteer
that you can go to where you
can actually exercise Puppeteer,
which means you can
run the headless Chrome
inside of the headful Chrome
and then render HTML through--
try it out.
It's great.
So tools like
Lighthouse and Puppeteer
give you incredibly
valuable insights,
but it's important to
remember that on the web
your users can come
from all over the world,
as we talked about
in the beginning.
And because of
that, they're going
to have very diverse ways
of experiencing your site.
DION ALMAER: Now, Web Page
Test is a vital tool here,
giving you detailed site
performance information
from locations all
across the globe.
You should make a habit
of checking your site
on webpagetest.org/easy to
run against real devices.
And it even integrates
with Lighthouse.
Plus, you'll get bonus points
from Alex Russell if you do so.
And today, though, we're pleased
to announce a brand-new project
that can help give you an even
larger performance perspective.
BEN GALBRAITH: We call it the
Chrome User Experience Report.
It provides a snapshot of how
Chrome users all over the world
are experiencing a sample
of popular websites
across mobile and desktop
devices and various network
conditions.
In this initial release, we
were focused on loading metrics,
such as first contentful paint.
All of this data is
published to BigQuery,
where you can use a SQL-like
syntax to analyze it.
In this example,
we're running a query
that returns the
fraction of users
who get a first contentful
paint event on Google Origins
in under a second.
As you can see,
it's pretty fast.
We're excited to share
this information with you,
and we're looking
for your feedback
on the structure of the
data set, the metrics,
and the dimensions of everything
that we've included here.
Let us know what you think.
All right.
We started the talk
telling you how excited
we are about today's
modern web platform.
DION ALMAER: With
a steady stream
of new capabilities
expanding what's
possible in web applications.
BEN GALBRAITH: And with
the core primitives--
HTML, JavaScript, and CSS--
being dramatically
upgraded and green
across all of these
different modern browsers.
DION ALMAER: And an entirely
new cross-browser runtime target
with WebAssembly.
BEN GALBRAITH: And a bevy of
new tools and other support
resources.
We hope you agree the modern web
is truly an amazing platform.
And across the world,
developers have noticed
and are dramatically upgrading
their web experiences
and reaping big benefits.
DION ALMAER: We've touched
on a couple of examples
here as we've
talked this morning,
but over the next
two days, you're
going to see a ton of
real-world case studies
and great demos that will
help you see what you should
be building in your web apps.
BEN GALBRAITH: More importantly,
while we're all together,
we want to hear from you
and understand what you
think we should be doing next.
DION ALMAER: So let's all
have a great conference
and work together to
build a better web.
Thank you.
BEN GALBRAITH: Thank you.
[APPLAUSE]
[MUSIC PLAYING]
