[MUSIC PLAYING]
DEV GOGATE: So growing up,
I wanted to be a rock star--
literally, a rock star.
I dreamt of being a
guitarist in a rock band.
Now, due to lack of talent,
amongst other things,
that career move
didn't work out for me.
And that's OK.
But you make up for it.
I did dress as my favorite
guitarist during Halloween.
Does anybody recognize
who I'm dressed as?
Yeah?
A few of you.
All right, that's awesome.
Now, I was born in
India and grew up
listening to a lot of
music and a lot of bands.
But growing up, I never had
the opportunity or the means
to see any of my
favorite bands play live.
So I listened to a
lot of their music
through conventional means,
tapes, radio, CDs, and so on,
and so forth.
But I always wished I could
see my favorite band live.
Now, fast forward, and just a
few years ago, my favorite band
reunited.
And I was able to
see them in concert.
And man, what an
experience that was.
I was all the way up in the
front yelling at the band.
And it was the most beautiful
thing in the world for me.
But that got me thinking,
what if watching a band
live at the concert
was the only way for me
to get exposure to their music?
Could I have discovered the
music back home in India?
Now the beauty of music is that
the original song once recorded
by the artist is available
in many different formats
and over devices.
And you can listen
to your favorite song
whether you are working out,
you are cooking, or driving.
So in short, as a listener, I
don't have to go to the music
unless I want to.
The music is available
to me wherever I am.
And in the same fashion, being
able to deliver amazing web
content to your user
wherever the user is,
that's leveraging
the power of the web.
And we'll dive into
these concepts.
So 30 years ago, exactly to this
day-- which is November 12th--
Tim Berners-Lee, the man
who would go on to develop
the worldwide web--
he published a proposal
for linking and accessing
information over a
shared interface.
His proposal was to build a
web of hypertext documents
that could be
viewed on a browser.
Now I remember my first
experience using a browser.
It was a simple process.
You sat in front of a computer,
you fired up the browser,
you typed up the destination
URL, and you hit Enter,
and you got to your destination.
And then when you wanted
to do something else
or access some other site,
you followed the same process
all over again.
It was a deliberate, simple,
and very linear process.
And even if as
devices have changed
and we now carry mobile devices
that can browse the web,
the idea of going to a
browser on your device
is pretty much the same.
But technology and user behavior
has changed quite a bit.
Now today, the browser isn't the
only way to access the internet
or connect your users
to your website.
And we are in such an
exciting age for developers
with so many new
devices and ways
to engage with your users--
all the way from tablets,
to desktops, to phones,
to newer interactive
methods like the Assistant.
So thanks to the omnipresence
of all these computing devices
around us, we have entered
an era of ambient computing.
And so the devices aren't the
center of attention anymore.
It's the user.
It's you and me.
So how does web development
evolve to address this shift?
And just like in
my concert example,
it's unrealistic to expect
that the band is going
to rerecord their music every
single time a new content
format or a new device
shows up in the market.
But before we go ahead, let me
just give a quick introduction.
My name is Dev Gogate.
I've been at Google
for 10 years.
And I lead a team of web
solution consultants.
And we work with
developers like yourself
to build engaging web
experiences using the latest
modern web tech.
And it's really
amazing to see some
of the things our
partners have built,
the way they have completely
transformed the way you
buy movie tickets online,
buy flowers online, or listen
to music online--
all using the power of the web.
So what are the
underlying powers
of the web that make it
so effective in today's
environment?
So I'm here to talk about how
the web can be a key building
block for building immersive
user experiences based
on its primary four superpowers.
The web is capable, it's
interoperable, it's imbeddable,
and it's highly transformative.
And we'll dive into
each of these concepts.
But before we go
any further, it's
critical to acknowledge that
we learn something completely
new when we moved
from desktop devices
and started carrying
handheld devices that
could browse the web.
We learned that you can't
just be mobile first
by taking your desktop
content and just resizing it
for a different screen size.
And this is beside the
obvious performance issues.
Because a user's expectation of
how they interact with the web
has completely changed.
I mean we started with typing--
keyboards and mouse, right?
And with mobile, now we are
all about tapping and swiping.
And now we are on the
cusp of the ambient web,
with newer interactive patterns
like the Assistant and Voice.
And besides the obvious
performance-related issues,
as I mentioned earlier,
these new experiences
lead to a completely
new user expectation.
And a lot of this
is based on how
the users interact with the
real-life objects around them.
So they expect a
similar response.
However, in my
experience working
with a lot of our partners,
I feel like the web design
process still starts
with the assumption
that the user will
go to a browser
and then follow the steps that
we have laid out for them.
But then if we only think of
website design in this format,
I think we are drastically
underestimating the impact
the web can have in our lives.
And we are undervaluing
the complexity
of a real user's journey.
Now, user journeys are
getting increasingly complex.
And they are actually
a lot more complex
than any of our analytics
or data shows us.
Now, when we look at
our analytics data,
we might look at data in
terms of a user's session
or time spent on our site.
But what is the user doing
in between these sessions?
Like, how are they even
getting to the website?
And it's important
to think about that.
Now, research shows
that a digital shopper
will have almost more than
100 touch points to the web.
And this is right
from the intent
to purchase
something all the way
through discovery, research, to
the actual process of buying.
So people are no
longer following
a linear path from awareness
to discovery to purchase.
Now, let's look at
a real-life example.
Now, I talked about my
desire to be a rock star.
So I want to look cool and I
want to buy a Gibson Les Paul
guitar.
So this whole process
of me even thinking
of buying a guitar to actually
finding the perfect guitar
to buy, is long.
And the journey is perilous.
And it could take me
days, and months, or weeks
to find the perfect guitar.
And the process of
research and discovery
happens across mobile,
desktop, tablets,
and could include a combination
of web search, social media
ad, remarketing ads, video
research, and research
on the retailer website.
Now, let's say at the
end of all of this,
I find the perfect guitar
that I want to buy.
I go to the retailer's
website and I purchase.
And the journey
doesn't end there.
Now, I'm really anxious to get
this guitar right in my hands.
So now I'm tracking
the delivery.
Maybe I'm using the Assistant
to track the delivery.
Or I could use
mobile web to track
the progress in the delivery.
Now, the guitar shows up and
I get a push notification.
By the way, the guitar shows up.
That means I'm also
really very excited.
Whether it's obvious or
not, a direct browser
or a version of a Chrome
Custom Tab or a WebView
is part of almost every part
of this journey leading up
to the event where
the guitar actually
shows up at my doorstep.
And whether it's obvious or not,
the most interesting part here
is, it's not where I'm
directly going to the browser
to access the web, it's how the
web creeps out of the browser
and comes to me.
So we don't have to
go to the web anymore.
I think the web
comes to us as we
move across devices, services,
and even the Assistant.
So we are in a
post-destination web.
So how did we get there?
How did this happen?
So let's look at
the first superpower
of the web, which is, the
web is extremely capable.
We all know that
the web has evolved
from a collection
of static documents
to a collection of
highly-immersive experiences.
The web can do it all.
Whether it's subscribing
to a podcast,
watching a movie online,
connecting with a friend,
or just getting the right
information at the right time,
you can build highly-engaging
experiences and performant
experiences that
do exactly that.
If there's one
company that really
cares about giving their users
great experience, it's Airbnb.
As part of its research,
Airbnb realized
that 65% of its first-time
users land on its mobile web
experience.
And those same users
expected all the performance
and all the features
of the native app
without having to
download the app.
So Airbnb took this
really seriously
and invested in rebuilding its
guest experience on the web.
Now, they're already
seeing some great results.
They're seeing 23% improvement
in conversion rates.
But that's not the
most exciting fact.
Now, mobile web is
the primary platform
that Airbnb designs and
develops for, instead
of it being the last platform.
Which also means they're
pairative with native,
ensures that the design that
they built for mobile web
can easily be transformed and
transported to other platforms
like Android and
iOS, thereby reducing
the overall development time.
At Google, we're
always investing
to push the boundaries
even further by bringing
newer technology to the web.
TensorFlow.js is a
web-native implementation
of the core machine
learning functionality
provided by TensorFlow,
which is our software
tool for deep learning.
And this includes many,
many prepackaged solutions--
let's say to classify images,
to detect objects, detect
body poses, detect language,
and so on, and so forth.
ModiFace, which is a Canadian
augmented reality company,
use TensorFlow.js to build
a beauty product virtual
try on app for L'Oreal.
And as you can see
from this image here,
it's highly interactive,
highly engaging.
It's a really good way to
take a real-life use case
and apply technology
to solve the problem.
Even emerging areas
like augmented reality
and viewing 3D models are
now possible on the web.
Yahoo introduced
a web AR feature
to distribute rich media
content to all its users.
They used the model
viewer web component.
And by using that, they
were able to ship a AR
mode with fall back to 3D
for non-supported devices.
Even though this is an
early experimentation phase,
Yahoo is already seeing a
huge increase in engagement.
They are seeing
around 10% engagement,
which is much higher when
compared to non-AR mode.
And they're also seeing a
bump in conversion rates.
So this is, going forward,
going to play a critical role
in enhancing the e-commerce
experience at Yahoo shopping.
And if you're willing
to try this out,
it only takes a few lines
of code to try this out.
And it works across
platforms and frameworks.
So I highly encourage
you to try this out.
The second superpower of
the web I want to talk about
is the web's ability to
be interoperable-- or
interoperability.
Now, this speaks to the ability
of the web to really render
across all types of browsers.
This is not a new thing.
We already know that a good
web page renders and works
across all browsers.
But from a user's perspective, I
think this is beyond a browser.
Now your same web
content can render
in your favorite native app,
on Google Search, or even
the Assistant.
So let's look at a
few examples here.
As we have transitioned
to a mobile-first world,
native apps are
obviously very popular--
and especially
social media apps.
And one specific format that's
become increasingly popular
is Stories.
For those of you who
don't know, Stories
is a highly-interactive way to
share your experiences online
by using a combination
of video and images.
And if you're a
verified user, you
can even add a web
link to your story.
So in a way, your
app now acts like
a post-destination browser.
And with one swipe up,
you're able to load
your web content embedded within
the app in a Chrome Custom Tab.
Now, imagine if these
pages were actually built
for this type of handoff--
how efficient and
cool this would be.
Let's look at a
different example--
the Assistant.
One of the amazing things
about the Google Assistant
is, you can now use
your voice to find
interactive or immersive
services and experiences.
And if you want more control
over this experience,
you can even write a dedicated
action like Walmart did.
And as you can see
here on the screen,
you can search for
objects or things--
in this case, this apple--
and add it to your
Shopping Cart.
And when your shopping
journey is over,
you can just click
the link, which
deep links straight into
their Progressive Web
App at the point of checkout.
And the Progressive Web App is
hosted at grocery.walmart.com.
And at this point, you
transition to your normal touch
interface and complete
the checkout process.
And this just works.
It's the same
URL-supported experience
that you find on the web.
The Google Lens platform
is an entirely new way
for users to explore what's
around them using the camera.
And this makes a lot of sense
because, let's admit it,
it is hard to type into a search
bar or a URL bar on your phone.
We recently partnered with
Netflix and the "New York
Times" for a special Lens
experience in the print
edition of "New York Times."
And as you can
see in this image,
there was a printed
ad in the newspaper,
and when you point
Google Lens at it,
it shows you a digital overlay.
And when you tap
the digital overlay,
it takes you to additional
content tied to it.
And now, guess what?
This experience is
powered by the web
and opens up an immersive
page using the physical world
as your virtual URL.
And due to the interoperability
of the web content,
Lens can now immediately
surface your content that's
tied to a visual anchor point.
So in a way, it's your
same web-hosted content,
but which can be surfaced
in new and engaging ways.
So let's look at
the next superpower.
The web is embeddable.
In the previous
examples, you end up
in what looks like a
traditional browsing
experience, which
takes advantage
of the linkability of the web.
But what if you want
to embed content?
So we think of embedding
in really two contexts.
What if you want to embed web
content into other platforms?
Or what if you wanted
to bring native content
and embed that into the web?
I'm glad to say, both these
scenarios are possible.
So let's explore a
few examples here.
Dynamic Mail takes
us to the next level
by bringing modern tech
like interactive AMP content
into your email client.
It provides senders
the ability to provide
expressive and immersive content
and deliver to your email
inbox--
so much better than
static, boring emails.
And as a user, you can now
interact with the content
as if it was a mini app.
So in a way, a
user can now, let's
say, browse through a carousel,
click a link, submit a form,
or click a button, all within
the context of the email,
and always have
access to the latest
information in the email.
Now, we always knew
that web content
could be made available
inside your Android app
through WebViews.
What we are offering
you is a much better way
to do these things.
So we recently announced
Trusted Web Activities.
And you've probably
heard about all of it
over the last two days.
It lets content creators quickly
integrate existing web flows
and journeys in
a fullscreen mode
within existing Android apps,
with all the performance
and the assistive features
of the Chrome browser.
As you might remember
from all the other talks,
there are a ton
of other partners
who have experimented with this
and have seen immense value.
Obviously, all of this should
adhere to Play Store policies.
So what about the other
type of embeddability?
Now, if the key
differentiator of the web
is its power of
distribution, can
you take native content and
then leverage that power
to distributed it widely?
And the answer is yes,
using WebAssembly.
WebAssembly lets you run
your high-performance,
low-level code written in
C and C++ and run it within
the browser in a much
more efficient manner.
And I think, again, you have
learned all about it today.
So WebAssembly also has broad
support across many browsers
and devices.
So let's look at a few examples.
Now AutoCAD took their
35-year-old code base--
by the way, that is older
than the web itself--
and is now running it in the
browser as a proof of concept.
And it's going really well.
Now, what an
amazing achievement.
And if, as a web
developer, you're not
that familiar with AutoCAD or
you don't use AutoCAD as much,
you might be familiar with
Figma, which is a software
that you use to design
your web interfaces.
Figma has been using WebAssembly
to run their C++ code within
the browser.
And the biggest
benefit Figma saw
from using WebAssembly
was faster load time.
In fact, they are
seeing 3x the load time
after they switch
to WebAssembly.
So let's talk about the last
superpower of the web, which is
the web's ability to transform.
Now as we've seen
throughout this talk,
the digital ecosystem is
getting more and more complex.
And it's no longer about
worrying if your page can
render in the browser.
You now have to worry
about platforms, apps,
and new computing surfaces that
all seek for your attention.
So how do you keep up with this?
And maybe it doesn't make
sense to publish a dedicated
UI for all of these surfaces.
Your content might be
universal, but your UI
is increasingly custom
to a particular surface.
So it might be interesting
to see how your published end
points can be seen as
separate entities--
like, let's say, business
logic, content, and UI.
In a typical web page
loaded in a browser
all three are combined to
form the user experience
that you control.
But you might have noticed that
some of the markup that you use
lets your content
act independently.
And I'm talking
about structured data
here, which is a way to mark
up your pages so platforms
like Google can better
understand your content
and can transform
it if necessary.
Now, the end result is that
your web content, which
was previously
coupled with your UI,
can be decoupled and transformed
into a richer UI within, let's
say, Google Search.
In this example, you can see
snippets, events, and products,
and many more areas shown
here, with a very rich UI that
shows up within Google Search.
So in a way, this extends your
presence beyond your core page.
Earlier, we talked about
how the Assistant can become
a good referrer to your site.
But what if you want to trigger
a quick action before it even
gets to your site?
Now, what's neat about
this ecosystem is that,
to enable actions on
Google for your content,
you don't have to create
something from scratch.
Because you already mark up your
pages to describe your content,
Google can automatically
generate actions for the Google
Assistant with a corresponding
entry in the Assistant
Directory.
So when users ask
the Assistant for one
of the available content
types, the Assistant
is able to serve it up easily.
And we are already doing this
for our podcasts, recipes,
and news articles.
And as a site owner, now
you can go to the console
and claim your site
content, knowing
that it has already
been transformed
for use with the Assistant.
So as web developers, you
have made huge investments
in the web platform.
So it's only logical
that you should
be able to leverage this when
new markets or platforms open
up.
And there's a way to do that.
Now, recently in India, we
announced the Spot Platform,
which is powered by Google Pay.
A Spot is a digital
front for a business that
is created, branded, and
hosted by the business,
but powered by Google Pay.
Now users can discover
a Spot online or at
a physical location
by scanning a QR code
and transact with the merchant
safely and securely, all
within the Google Pay app.
Now, the good news
is, a Spot is built
using HTML and JavaScript.
So as developers, you can
leverage your existing
investments in the web and
transform it into a Spot
by just adding a few
lines of JavaScript code.
Now this makes it
possible for a merchant
to have a truly scalable
solution, while maintaining
the consistency
of your user flows
across different platforms.
And Google is not the only
player who is doing this.
WeChat lets you do something
similar on their platform
as well.
So to recap the
four superpowers--
the web is capable.
You can do almost anything
with the web today.
The web is interoperable.
You build something once, and
it works almost everywhere.
The web is embeddable.
You can embed web tech
into native platforms
and bring native to the web.
And the web is transformative.
Your web content can adapt
and seed new platforms.
So now that we have discussed
the main superpowers
of the web, here are some
things to ponder and reflect on.
Are you building
high-quality content?
Are you building
highly-performant sites?
Are you taking advantages
of all the capabilities
that the web has to offer, so
that you are creating the best
experience for your users?
Are you really designing
for a post-destination web?
You know that users are
accessing your site through all
these non-conventional
means, how
are you ensuring
that your site is
interoperable and embeddable?
Is your web presence modular?
Are you designing
your site in a way
so that you can
leverage your investment
and apply it across platforms so
when a new technology comes in,
you are ready?
Now you might leave
CDS today and say,
hey, this is all
great, but I have
to think of all this technical
debt that I have accumulated
and deal with all these
performance issues.
Now, it's not that different
than the sound engineer
at a concert who has to stare
at this jumble of cables
and try to make things work.
But I ask that you leave
that aside for a moment.
Just like fans like me
demand an amazing experience
at the concert, we are on
the cusp of the ambient web,
and our users are demanding
an amazing and immersive web
experience from us.
And as you probably learned
over the last two days,
there's tons of capabilities
and tools that you can leverage.
And now that you have learned
about all the superpowers
of the web, the
only thing needed
is your creativity
and your imagination.
So I can't wait to
see what you'll build.
Let's go put on an amazing show.
Thank you.
[MUSIC PLAYING]
