Building Beautiful, Interactive AMP Pages for E-Commerce & Beyond (Google I/O ’17)
Articles,  Blog

Building Beautiful, Interactive AMP Pages for E-Commerce & Beyond (Google I/O ’17)


[MUSIC PLAYING] CHIARA CHIAPPINI: All right,
I/O, my name is Chiara. And I am Developer
Advocate at Google. I have been working
on the AMP Project for the last year and a half. And today I would
like to show you how it’s possible to build
beautiful and interactive pages in AMP for e-commerce
website and even beyond. And today I’m going to
share this presentation with other two speakers. Please meet Ambarish
and William. Thanks, guys. And by the end of
this talk, you will get a clearer idea of what’s
it’s available for you in order to build
beautiful pages in AMP. So first of all, AMP stands
for Accelerated Mobile Pages. It’s an open source
project who aims to deliver fast content on the web. AMP is built on three
core components. And only the combination
of these three will give you the
super fast experience. First of all AMP is
a set of HTML tags that you have to
use in your page. It comes from some limitations,
like the amount of CSS is restricted. And third part, the JavaScript,
is only allowed in iframes. Then there’s the AMP
JavaScript library, which implements all
the best performance practices and manages
resource loading on the page. And lastly there’s
the AMP cache, which caches AMP pages,
making them faster, and also validates pages. So then you always
get valid AMP pages. So when AMP was
started it was limited in what it could support. In fact, it was supporting
primarily blogs and news publisher. But during the last
year AMP has introduced new components that make now
easy to adapt e-commerce web site. And we already had some samples,
like 1800flowers.com, Zalando, and AliExpress. And actually, we’ve seen
a lot of adoption of AMP from retailers, as the
AMP format matures. So today I’m going
to show to you which are the AMP components
available in order to build those kind of pages. And I’m going to use
two samples from the AMP by Example web site. So if you have never
seen this website, it contains the most
exhaustive set of AMP samples. So all the code that I’m
going to present today can be found on this website. So let’s jump to those samples
that I’m been promising you. Just one note that
while I’m going to go through those
samples, I’m just going to be focusing
on components that are relevant for
the e-commerce world. Let’s start with a
Product Browse Page. You may be more familiar with
the term Product Category Page, but it’s basically
a page in which a user can land when searching
something on the internet, like fruit. So as you can see from the GIF,
we had some promotions on top, a list of items, and
some recommendations. And the user can
swipe throughout them. Let’s start with the promotions. So as you can see, the images
are playing by themself. And we implemented this by using
the amp-carousel component. So let’s look at the code. So we have the
amp-carousel component. We are using type “slides”
which means you are only going to see one image at the time. And we’re using the
“autoplay” parameter, which means the images are
going to play by themselves. And then what about searching? As I’ve never seen
an e-commerce web site without a proper search. So we managed to implement a
search in the Product Browse Page by using the
amp-form extension. So if you look at
the GIF, the user can type “apple,”
click Search, and then a new page with
the results appear. So the amp-form extension allows
you to use the form and input tags, so then you can
build such a search form. The second sample I want to
show you is product page. So as you can see from the
GIF, we had some images on top. We have selections like color,
quantity, size, and some more information at the bottom. Let’s start with
the image gallery. So again here we
use an amp-carousel. And this time we
wanted the users to be able to swipe from left
to right, or right to left. So this is the code, very
similar to the one that we just seen, this time without
the autoplay parameter, and again, using
that type “slides.” Just below the image, we
added a refinement section in which the user can select
the color, the quantity, and the size. You can implement
a selector in AMP by using the amp-selector
component, which allows the user to choose
from a list of option. And these option of not
only linked to text, they can also be images. And what happens is basically
once the user choose an option, the selected attribute
is going to be added. And actually with the
amp-selector component, you can even realize
a [INAUDIBLE]. As you can see from the GIF,
we realized a [INAUDIBLE] in which the user can click
on About, Specs, and Size, and the content changes. So we implemented this
by using amp-selector. Together and we a CSS trick. So when I say trick, I mean
that we have the amp-selector. We have three groups of deeps. Each group contains two
deeps, one for the button and one for the content. We hide all the
content at default. And when the user
clicks on a button, the content which is
immediately below the button is going to be shown. And you can also
implement a shopping cart. And know that this wasn’t really
possible when AMP was launched. So let’s look what we
achieved in this sample. So the user choose a color, a
quantity, click Add to Cart, and then a new page showing
the shopping cart appears. So again, we used the
amp-form component in here. And as I said, the
amp-form extension allows you to use the
form and input tags. But I would like to catch your
attention on the client ID variable. So this variable allow us to
create a unique identifier for the user, that
then you can use to identify the user when you
send the request to the server. As an alternative
to a shopping cart, you could, on Chrome,
you could also implement a Buy Now button by
using the Payment Request API. So you may have heard
about Payment Request API from other
talks here at I/O. But basically they
allow requesting payments informations
directly from the browser. In this case, you need
to use an AMP iframe, use the Allow Payment
Request attributes. And then all the
logic for the payment is going to be
inside the iframe. And just at the
bottom of the page, you can add some
recommendation for the users. And the best way
to achieve this is by using the amp-list component. So amp-list fetches results
from a course just on endpoint, and then shows them
by using a template. So AMP supports a
set of templates, and for these samples,
we used amp-mustache. And moreover, I would like to
say that the amp-list always allows you to get the latest
and the freshest content to your page. So in the samples
that I just showed, we also created some
advance interactions. These kind of interactions
were not really possible when AMP was launched. So now I would like to
show you some of them. And at the end I’m gonna tell
you how we implemented those. So on desktop, we added a
thumbnail gallery together with the image gallery. So when you click on an image
from the thumbnail gallery, the image on the
carousel updates. And at the same
time, when you click on an image from the
carousel, the thumbnail images get focused. And notice that the page
is not reloading at all. We also been able to update
dynamically the carousel image by clicking on different colors. At the same time, the
price, just below the image, is changing when clicking
on different colors. And if you remember the
Related Product section, we also been able to add
a Show More button, which is going to load more
items from the server and add them to the page, again
without any doing any page reloading. So at this point, you may
be wondering how we achieved these kind of interactions. And we used the amp-bind
component, which at this point, you may have heard from other
talks, like the AMP keynote. But it’s basically
a new component available under Experiment
in the AMP library, which allows you to
create interactive pages. And to tell you
more about this, I would like to invite
William to the stage. [APPLAUSE] WILLIAM CHOU: Thanks, Chiara. Hi everyone. My name is Will. I’m a software
engineer at Google. And I’ll be going a
bit more into detail about this amp-bind thing
that we’ve been working on. So first, let’s quickly
review the motivation behind the future. As Chiara mentioned, AMP
components, like amp-carousel, can offer rich interactivity
within the scope of a single component. But what if you wanted
to add custom stateful behaviors, or interactivity
between AMP components and regular HTML elements? In the non-AMP
world, web developers would typically do
this with JavaScript. However, part of AMP’s
consistently fast speed is the restriction on just that. So what are our options? One option is to embed regular
web pages containing custom JS into an AMP page via an iframe. But you’d lose the speed
and other benefits of AMP when you do this. So that’s not ideal. Or you could work with our
open source developer community to build a brand new
AMP component on GitHub. And for certain use cases, this
is actually the right thing to do. For example, building a tweet
button for sharing something on Twitter. However, building a
brand new AMP component takes a non-trivial
amount of work. So it doesn’t scale
particularly well if you have multiple custom use cases. Or you can use this cool new
thing we built specifically for this called amp-bind. All right, well,
what is amp-bind? Amp-bind is a new
AMP component that supports custom
interactivity through data binding and expressions. Don’t worry if that
sounds complex. It’s actually fairly
straightforward. And I’ll explain
exactly what that means. So you can think of
amp-bind as being composed of three main parts,
JSON state, data binding, and mutation of HTML elements. If you’ve dabbled in
popular web app frameworks, like Angular or React, this
may feel familiar to you. So the first part is
State, which is just JSON data in your document. Amp-bind includes a new
subcomponent called amp-state, which either wraps
local JSON in the Dom, or fetches it from
a remote endpoint. In this example, we have
an amp-state element with the ID Foo, wrapping an
inline JSON object containing a single key value pair. Now, data in
amp-state elements can be referenced by expressions. For example, the
expression foo.bar here would evaluate
to the string “hello.” The second part is
binding, or data binding. A binding is just a link
between an HTML element and an expression, where
the expressions result sets the value of a
property on that element. In this example, the paragraph
elements text content is bound to the expression
foo.bar plus baz. This means that whenever the
result of foo.bar plus baz changes, the paragraph elements
text is set to that result. So again, expressions
in amp-bind can refer to the State. And remember that the expression
fragment foo.bar evaluates the string “hello.” Baz here is another variable
that will define soon. The third and final
part is mutation. Here you can see a button
with a special On attribute. It’s part of the AMP
action system, which allows users to add simple event
driven behaviors, such as do something on a button tap. So amp-bind adds a
new action called amp.setState, which updates the
state with an object literal. Here we’re updating the state
with the key, or variable, baz. So put together, here’s
our Hello World example for amp-bind. Quickly starting
from the top, we have our State initialized
with the amp-state component, a paragraph element
with the text binding. And when we update the
State via amp.setState, the expressions result changes,
which mutates the paragraph elements, bound text
property, the expression is foo.bar, which is “hello,”
concatenated with baz, which is “world.” So tapping the button makes the
paragraph element say, “hello world.” So returning to
our apple example, it uses amp-bind to achieve
the page reactivity shown here. Again, each color of apple
has a different price and size availability, which
is updated on the page upon user selection. So I’ll just very
quickly go over how this example works
in the context of state binding and mutation
in amp-bind. And don’t worry if you don’t
catch every piece of code here. It’s all available online,
with documentation, at ampbyexample.com. First is State. We initialize a State with
data about our apples, including price, and size
for each color of apple. Next is binding. We bind the text
of the price label to an expression that looks up
the price of the selected color of apple in our product data. Note the selected color
variable, in particular. And finally, mutation. We change the selected color
variable via amp.setState. Now the color picker uses
the AMP selector component we saw Chiara demo earlier,
where each selectable element has an option attribute. We can reference
those option values in the Select Event
of amp-selector to set the selected
color variable. So the code snippet
shown on these slides were simplified a bit to fit. The full code for this example,
again, is on ampbyexample.com. There’s a short link there
for this specific example. Ampbyexample also has
many other samples of cool practical usages of AMP. So one part we haven’t talked
much about yet are expressions. What are they? How did they work? Well you can think of it
basically as JavaScript syntax with a few caveats to
keep things fast and safe, kind of like how AMP is HTML
with some caveats for speed and reliability. In AMP’s spirit of
ensuring fast performance we made sure that using and bind
on your pages won’t cause jank. One way we achieve that
is by adding concurrency through web workers. So heavyweight tasks,
like expression parsing, and validation, are performed
on a dedicated worker. This avoids blocking
the main thread, ensuring a smooth
user experience on pages that use amp-bind. Another cool thing is
that it’s Turing Complete. So Turing Completeness is
an academic measurement of expressiveness of a
programming language. Here’s a Turing
machine that counts in binary using amp-bind. The line of gray bubbles is
the tape of the Turing machine. The color bubble is the current
position of the tape head. And the Step button is
the crank that runs it. We built this demo in
part for fun and in part as an exercise to see how
powerful amp-bind actually is. That being said, I
don’t recommend actually building Turing machines
simulators on your end pages. But for interest’s
sake, it works by encoding the state of a
Turing machine in an AMP State element, along with instructions
for advancing the tape head, and writing to the tape, at
any given state of the machine. And actually running
the machine again it is done by amp.setState
in the Step button. So hopefully this shows
you that amp-bind is quite robust in practice and theory. So here is some more
technical details. I won’t run through every
single one of these. One important thing to note
is that we don’t evaluate expressions at page load. In fact, amp-bind only
executes in response to direct user action. This makes sure that we won’t
affect low latency of pages. And it avoids unexpected
content jumping. The gist of this slide
is to say that we’ve built amp-bind with
the principles of AMP in mind, that is it should be
fast, safe, and easy to use. AMP bind is available
today as an AMP experiment and slated to launch soon. We’re working on
making it more useful and adding more
documentation and samples. And it’s pretty close to
being production ready. But we’d appreciate any
feedback you guys might have. Just want to make sure that
it’s fits your use cases, whether or not you
find it intuitive. Just really want to ensure
that it is practical and useful for you guys. We’ve also written
a new code lab for I/O called Advanced
Interactivity in AMP. It goes over some more of the
advanced uses of amp-bind, focusing on the e-commerce
use case in particular. Please check it out. So many merchants have
already started experimenting with amp-bind in their pages. Here are a couple
of implementations from AliExpress and wego. AliExpress, in particular,
uses amp-bind in their product detail page, in a similar
pattern to the apple example we saw earlier with dynamic prices,
and available quantities, depending on the
user selected skew. Next we’ll hear from AK from
myntra.com on their experience with AMP and amp-bind. [APPLAUSE] AMBARISH KENGHE: Thanks, Will. I think first of
all, congratulations. I think you guys have survived
I/O, or almost [INAUDIBLE] survived I/O, you can survive
the next 10 minutes of my talk. But I think it’d be well worth
it because I’ll talk to you about how we did amp-bind
implementation in less than a week. Actually we did it in six
days and had the seventh day for rest as well. So let’s talk about it. So before I go
into it, I do want to sort of talk about the
fact, just a little bit, about Myntra, so that
you know this is actually in production in a really
large scale company in India. So who are we? Myntra is the largest online
fashion player in India. It’s actually bigger
than the largest offline player in India. These numbers actually
are slightly old. I’m showing some press
safe numbers here, but we are larger than
this at this point. 18 million monthly active users,
50 million page views a day, five billion sessions a day,
more than a billion dollars revenue [INAUDIBLE]. So this is done for an
at-scale company in production, what you’re going to see next. So let’s talk about our
journey through amp-bind. So the real problem that we
had while we sort of went looking for it was
that a lot of traffic, for us, comes on
these list pages. And I’m sure you have
the same thing where folks click on something. I’m looking for Nike
shoes or something else, and I land up on this list page
which has a list of products. Now these pages were loading
for us in seven seconds. And that was a long time. And we had a bounce rate of
30%, which, as you can see, is killing a lot
of our business. And as you know, if
you reduce the time, if you reduce page
load, our estimate is– and we’ve looked at some
of the studies here– if you reduce the
page load by a second, you’ll get perhaps 11% more
page use, on an average. If you say, people
are happy or unhappy, you’ll see 16% better
satisfaction, and probably 7% to 8% fewer
conversion if you have one second of page load delay. And India, as you know, 95%
of the internet is mobile. Even though we have desktop,
90% of our, actually, revenues are from mobile. And the data speeds, even though
they’re increasing very, very fast, a lot of users are
still on less than 3G speeds, which means that we have
to overcome the bandwidth hurdle also through amp-bind
kind of technologies. So let’s talk about
how we did it. So day zero, you know, this
is our product manager, Amet, and the engineer Vijay. They’re just thinking,
can AMP be dynamic enough? Because AMP really
was, as you guys know, was supposed to be
for static pages, for content pages
that were loading. And the second question was,
the product manager, right, he has his hand
on the head there, is that he’s got 20,000
other priorities. And he’s trying to figure
out how much time this is going to take. But I think amp-bind
came to the rescue. And here’s our sort
of day-by-day journey on how we did it. And this is actually
how it played out. In fact, on day
one, we were talking to [INAUDIBLE] and folks
at Google and saying, can we even do it? They said, no, read
the documentation. This will be actually
in less than a week. So day one, we read
the documentation, built a very simple proof
of concept actually. Everything starts with a
“Hello World” kind of things. So we really quick, proof
of concept, that worked out. And we said, OK, we can
actually do this thing. Day two, we did amp-list
call to load results. But as with any project,
we just hit this hurdle that these pages were slow to
load because Ajax on the client side was not as quick. So we did server side rendering. The page was less
than 14 kilobytes. And it sort of
downloaded pretty fast. So we crossed that hurdle. Day three, this is where the
real sort of interactivity came in, where we had Search and
Sort, and some dynamic elements on the page. And we had those working. And we’ll show some
of that very soon. Now amp-bind, at that
point, it was experimental. But as we tried this
out, it actually worked fairly seamlessly for us. So that, again,
boosted our confidence. Day four, now this is where
sort of start polishing it. We’ve got sort of a
good thing running. And we started polishing the UX. And as we’ll show in
a side-by-side video, you couldn’t actually
distinguish the AMP version from the non-AMP version once
you started looking at it. Day five, this is
unfortunately the reality, as you guys all know,
analytics comes later. We think about it early
but it starts coming late. For us also, that’s
what happened. We started looking at
analytics, added that in. And then the other
interesting thing is, I don’t know if you’ve
heard of amp-accordions, but we’ve got this
site navigation bar on our AMPs and web. And we use amp-accordion
to create those. And we’ll show you a
little bit of code on that. And the last thing, we added
some transitions for filters. And we’re done. And like I said,
the seventh day we had the product manager
and the engineer there. So let me show you
a quick demo of– it was tough to
set up a demo here, but we shot a video back
there, a few days back, of how amp-bind works
with our [INAUDIBLE]. So what you’ll
see, I think you’ll see on your left hand side, you
will see the old page loading. On the right hand side
you’ll see AMP loading. You’ll have to pay
attention because AMP’s just going to load before
you blink your eye. Ready? As once the video loads. So that right side
is where we’ve got AMP results loading, then
still waiting for my old stuff to load. And this is optimized. And yet, sort of, I think
it took a long time. It is actually that fast. When we showed people,
they were just surprised how quick it was to load. So I’d recommend
you guys try it out. It’s actually pretty cool. [APPLAUSE] Thank you, thank
you to you guys. So this is like, I’ll go
through quickly with the code. I think you guys could sort
of go in and look at the code. But I think Will talked
about the AMP Set States. Will talked about the
POC on the “Hello World.” And now this is how
sort of it really worked in the real world, where
we set the state for saying, OK, you know what, when
somebody hits the Search button, you go to the Show Search div. And it goes there. And we can show the
search element there. Similarly for the sort
down there, we hit the sort and it shows the sort div. And then we have the
amp-accordion we talked about. So we have the site
navigation bar, which in this part of the
code for the amp-accordion. So you could sort of create
a site navigation bar in AMP. So that’s how you sort of
do dynamic pages in AMP. So it’s pretty cool
that AMP was great because it was sort of loading
up static pages very fast. But now you can do dynamic
pages in a cool way. So that worked out
very well for us. Now what’s next? I think every time
you do something you are looking at what
you’re going to do next, how are you going to improve. Now we keep pushing
the Google folks. And I think they’ll
keep pushing us. And we’ll sort of build
more stuff around. But a few things that
we’re thinking next is how do we modify
the amp-list so that we can avoid page loads
on sort, as well as pagination, so that we have the next
set of items sitting there. And we can point the amp-list
source to those items. AMP service workers,
that’s interesting. And it starts working
like a pwa, where you can launch the next non-AMP
page content using amp service workers. And I think this
last point, I wanted to expand on that a little bit. I think a lot of
time to think about whether you want
to do pwa or AMP. And when we started
off, we thought we were going to do
pwa because there was a lot of sort of
noise around, saying, you should do pwa. Everybody should do pwa. And we talked to [INAUDIBLE]. We talked Eric,
bunch of other folks. And they said, what
is your real problem? And our real problem was the
list pages weren’t loading. And there was a big
bounce rate on those. And I remember that call
where we were told, hey, you know what, guys,
think about it. You want to load this page fast. And AMP works great for that. Once people have
loaded that page, now you want to bring
in pwa so that you can create an experience
that is more app-like, and the next set of
pages load as well. So I think it’s not
AMP or pwa, especially with amp-bind and
this becoming dynamic. You could do both
AMP and pwa together. And that actually brings in
a great set of technologies to build amazing web pages. So that’s sort of our
story on how we did this. I’d like to invite
Will and Chiara back on stage to close this talk. Thank you. [APPLAUSE] WILLIAM CHOU: Thanks, AK. So beyond the e-commerce use
cases we’ve highlighted today, what else can you
do with amp-bind? Well abstractly, amp-bind it
adds a layer of dynamic ability on top of your existing
AMP components. And as we’ve seen, you can use
amp-bind to add interactivity to regular HTML elements. So I think the possibilities
really are only bound by your imagination. Sorry, but we’re
excited for all of you to try it out and see
what you can come up with. CHIARA CHIAPPINI: And
really, before you go, we would like to leave you with
some useful links about things we talked about today. So there’s the ampproject.org,
which you can find all the documentation for AMP. All the samples that we’ve been
using are on ampbyexample.com. And you can also find the
documentation for amp-bind. And then, since it’s the
last talk of the day, I can’t really tell you,
come and talk with us in the Sandbox area. So if you do have
any questions, you can use the developer support. And lastly, there are some
very awesome AMP videos on the AMP YouTube channels. So thank you very much
for your attention. [APPLAUSE] [MUSIC PLAYING]

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *