October 15, 2019
Building an E-commerce Site with AMP (GDD India ’17)

Building an E-commerce Site with AMP (GDD India ’17)


[MUSIC PLAYING] BEN MORSS: Hello. Good afternoon. Namaste. My name is Ben Morrs. I’m a developer
advocate at Google, where my job is to help the
web be beautiful and easy for both users and developers. And before I was
at Google, I worked on websites for companies
like “The New York Times,” AOL, places like that. Before that, I was a musician. I took tabla lessons
actually for a little while and did a little [INAUDIBLE]. I’m here with my friend
and colleague Raghu– RAGHU SIMHA: Hey. Good afternoon, everybody. I’m a developer at Google. I work on AMP. And together with
Ben, we’re going to talk about building an
e-commerce site with AMP. But before that, I thought
I’d mention that I, too, am a local, former Bangalorean. Over to you, Ben. BEN MORSS: This is true. He grew up here. So on to AMP, which,
as you probably know, is Accelerated Mobile Pages. So why do you want to convert
your current site to AMP or build new pages in AMP? What’s the point of this thing? Good question. It’s mostly because today’s
mobile sites aren’t what they could be in many cases. I mean, they’ve gotten
much better than they were five years ago, especially
six, seven years ago, but sites still tend to be
too slow and too complicated under the hood. The thing is that the phone is a
very personal thing for people. People use their phones all the
time for all kinds of purposes. And they expect
everything on their phone to be good, whether
it’s a messaging app, they’re watching videos,
playing Candy Crush, or using your website. They expect everything
to be fast, responsive, and beautiful and useful. And if your website isn’t like
that on mobile, it will suffer. You see over here
are some stats. There are more stats
like this out there. The one on the left is from a
study DoubleClick did recently, just taking data
from sites that were opted in to sharing their
data with Google Analytics. And they found out that if a
site took longer than 3 seconds to load, more than half
of users would just leave. Three seconds, which
isn’t that much time. And other stats over here
show that most people who think a site is slow
or doesn’t work well won’t come back. They’re just gone forever. And also, of course conversions
will drop if a site is slower. Bounce rate gets worse
when a site is slower. It’s just that people
want their phone to work really
well and work fast. And if it doesn’t, they’ll
just think it’s broken. It isn’t good. And they’ll just
do something else. And in fact, many sites
today load slowly. I think that I recently saw
that 3/4 of sites, mobile sites, took 10 seconds or
longer to load over 3G. And also, they can
be unresponsive. Content might display, but
JavaScript is still loading, it’s still parsing,
and it’s still executing, which is much slower
on phones than on laptops. And so people will
tap on things, and they don’t do anything. They assume it’s broken. They’ll do something else. And also, ads may kind of pop
in there and displace content. So none of these things are
good, not to sound negative. But also, you can get a site to
be faster as a good developer. You people are all
smart over here. You know the latest techniques
for site performance, how to make things work quickly,
but it takes a lot of work to do this. It’s not easy. And sites will keep
on slowing down and require constant
speeding up. So for all these
reasons, we created AMP. The AMP project is an
open-source initiative to make a better web,
with sites that are fast, that are beautiful, and
also can make money. And it’s fast and easy not just
for users, but also for you, the developers. It’s been popular. There’s over 4 billion
pages that are in production now that are AMP pages. Over a million domains
are producing AMP pages. And every week, more than 50
million pages get produced. And now, Raghu will talk about
what AMP is a little more. RAGHU SIMHA: Thanks, Ben. So we’ve motivated the reason
behind the existence of the AMP project. As you might have heard, AMP
stands for Accelerated Mobile Pages. But we’re going to soon discover
whether the mobile is really restricted to
mobile or if you can make just beautiful experiences
on desktop and mobile with AMP. So now that we’ve talked
about the motivation, let’s dive into
what AMP really is. There are three core
components to AMP, as you can see on the screen
behind me, AMP HTML, AMP JS, and AMP Cache. AMP HTML is a modified
version of HTML, that you’re all familiar with. It consists of a web
components library that provides a powerful and
comprehensive set of building blocks with which you can
make beautiful desktop and mobile sites that are
fast, responsive, not only that, beautiful, user-friendly. The second aspect
of AMP, AMP JS, that’s the engine
that drives AMP. It’s a JavaScript engine. And it does things
like managing resource loading and implementing
best practices that ensure that your pages
render really fast. And finally, the AMP Cache. It fetches, caches,
and serves AMP pages and ensures that what
you see on the screen is, in fact, as
fresh as possible. Now, for all intents
and purposes, the AMP Cache is
virtually invisible. That is, what you see when
you load a page via the cache is a cached version. And in the background,
the cache is updated. Now, for pages that are uploaded
frequently or hit frequently, this is not a problem. The cache is
virtually transparent. But if you have a page
that’s not hit as frequently, there are APIs you can
call that help you manually update this cache. Now, AMP is designed for
efficiency and speed. And it therefore must
enforce some constraints to ensure good performance. The first thing might
surprise some of you. A valid AMP page may not
contain any custom JavaScript. You heard me right. Most web pages today
contain lots of JavaScript, so what’s the deal with this? Well, most of the JavaScript
on a valid AMP page is contained inside
the AMP runtime. And you and your page use AMP
web components library and use this JavaScript engine
to write your page. Second, you might ask,
what about the AMP format? How does it relate to HTML? Well, the AMP format is a
specialized subset of HTML. And it does contain several
additional features, which you’ll see about in
the web components library. And finally, there’s a hard
limit on the size of the CSS that can be associated
with an AMP page. Now, in spite of
these constraints– and I’m going to argue
because of these constraints– the AMP runtime lets you build
mobile and desktop experiences that can delight your
users while remaining high performance. So let’s take a simple image. In regular HTML, you’d
use an image tag. What do we do with AMP? Well, we use AMP image. You’re going to see a
whole lot of examples like this, with the
amp- in front of it. This is a simple HTML tag. It’s part of the AMP HTML
web components library. The only thing to note
here is that by specifying the width and the height
of an image beforehand, the AMP runtime already
knows the aspect ratio. And it knows how
to lay out a page. And that’s how the AMP
runtime makes pages load fast. We also introduced
a layout attribute to most AMP components. And by saying that it’s a
responsive layout element, the runtime knows how to
resize this element when the size of the page changes. Let’s breeze through
a couple more. If you want videos
on your page– let’s say you want to
embed a YouTube video– it’s as simple as this little
piece of HTML on the screen. Again, specify the
width and the height, a responsive layout, and
it’s as simple as writing a few lines of code here. The JavaScript engine
takes care of the rest. You will see an example. And we’re going to discuss how
to build an e-commerce site later during this talk. And some of the
things you will see can be done using
the web components I’m going to show you now. The first example
is amp-carousel, where you can swipe
images left and right and have a carousel of
images, articles, whatever. A sidebar– most
complex websites need to have a menu and a way
to get around the website. So amp-sidebar lets you do that. And finally, if you
want to let people share pages from your website,
amp-social-share lets you do that really easily
with just a few lines of code. So what you saw just
now was just a few of the building blocks that
together form the AMP web components library. But the library contains
so much more functionality, like video players,
social embeds, accordions that let you expand and collapse
areas on a page, carousels, menus, special effects,
and a whole host of things, in addition to doing
things like serving ads, tracking user engagement. And now, Ben’s going to talk
it through a way of building an e-commerce site with
this web components library. BEN MORSS: So as
Raghu was saying– oh, sorry, I’m not on. So as Raghu was
just saying, AMP has a lot of components built in. When AMP first started out, it
was made for publishers to use. So it was good for static
pages, simple pages. But as he’s been
showing you over here, AMP has advanced since then. And I’m here to say AMP isn’t
just for publishers anymore. It can be used to make
all kinds of sites and, as Raghu was saying,
not just mobile experiences, but desktop as well. Many, many kinds of sites are
now easier to make with AMP and are just a lot
faster for users– hopefully easier for you– including e-commerce sites. E-commerce is a pretty
complicated idea. So we’re going to
discuss actually how to build an
e-commerce site with AMP. And that may show that
all kinds of things can be done, including,
of course, e-commerce. So going on, let’s do it. Here’s a site over here. This is a bike shop we’re going
to build for you in the next 19 minutes and 24 seconds. And by the way, this
bike shop already existed in template
form on ampstart.com. We’ll give you guys
the URL later on. And the code examples are
modeled after that site. So an e-commerce site– first of all, you
need a home page where the user could go there
from search, from Facebook, from Twitter, wherever, and
they can find your stuff and, you know, see who
you are, look for things. And then when they’ve found
something they’re interested in– they might search around,
they might use a category in menu– they’re going to want to
go to a product browse page where they can look at various
products and, you know, see what they want
to actually buy. Next, they actually will click
on our product, hopefully– if things all go well– and go to a product
details page, where they can see the product,
what it’s like, what it costs, and so on. If they like it, they might
try to actually buy it, in which case, they’ll
go to the cart page. And the cart page shows what’s
in the cart, what they have. And then, finally, the checkout,
and then you guys get money. So let’s go back to the
beginning, the home page. The home page is not
that complicated usually, in most cases. And the things on this
home page over here can mostly be done using
pretty standard static type AMP components. So for example, images. We saw AMP image. If you have a
video of some sort, we have various components
for embedding videos. If you want to have a
little sliding image carousel showing products
or specials, also possible. And navigation of the
menu, amp- gives you that. There it is up there,
that little hamburger up there on the top left. I guess they call this a
burger menu in Germany, not a hamburger menu,
even though a Hamburg is a city in Germany. Let’s pass on that, though. Navigation isn’t hard to do. And offers highlights, mostly
possible using standard kinds of AMP components. I didn’t include
a search here yet. We’ll get to that. Let’s go on to our next page,
though, the product browsing page. So here, again, you can have
these products over here loaded as static products. But maybe at this
point, you feel like you want some stuff to be dynamic. Maybe you want to have
the freshest product data or prices. And maybe the cache doesn’t
refresh often enough to have that happen for you. Maybe you want to
actually pull these in using JavaScript, using Ajax. But Raghu was saying
there is no JavaScript. So how do you do that? It’s impossible, right? It’s possible. We’re going to show
you how to do it. And something else,
let’s say the user wants to go through and
maybe filter, you know, bikes, certain kinds of
bikes, certain brands of bikes. They want to sort by
price, filter by color. Again these are user actions. It’s going to require
some different kinds of dynamic components. So we have those in AMP now. Oh, sorry. What do we do? The question mark. The burning question. Dynamic AMP. We can do it. So when you think about
a page being dynamic, there’s two ways where
this often would happen, where content would want
to change in some way. One of those is simply,
you retrieve content from the server and
display it on the page, whether the user has
requested something, whether you just do it
because you want to do it. So one way, content is retrieved
from the server and displayed. Way number two, the page
simply changes in response to user actions. Maybe that content is already
there on the page somewhere in the HTML, and just gets
shown, or a class gets changed, it gets changed in some way. So another way of
looking at this is that dynamic stuff can
happen either in response to user action or not. And content can come from
the client or the server. AMP is user-focused,
so in AMP, in general, things change when the
user requests them. So here’s our heroes
today that can do these things, our wonder twins
of amp-list and amp-bind. They combine their
forces together over here to make pages dynamic. The cases we just discussed– they cover these cases. Amp-list pulls content
from the server. And amp-bind over here looks
very, very serious today. Amp-bind lets you
actually bind components to actions of some sort,
so that’s the second case. Amp-bind is when you
change the page in response to user action. So these two things
actually cover a shockingly wide
array of different ways to change a page. So back to our product
browse page over here, if you want fresh product
data when the page is loaded, that’s a case of pulling content
from the server, so amp-list. And then the sorting
and filtering is a case where the page
just changes in response to user actions. It might also involve pulling
content from the server as well, but this is mostly
an amp-bind kind of thing. So let’s begin with amp-list. Amp-list, again, retrieves
data from the server, lets you actually format
it with a template and show the
results to the user. And as amp-list and
amp-bind are friends, amp-list has its
own little friend over here called amp-mustache. Amp-list, amp-mustache
perform together. And Raghu will show
you how that works. RAGHU SIMHA: Thank
you very much. Now it’s time to write
some code, so pull out your notebooks. I’m kidding. Let’s deal with the
first problem Ben alluded to, which has to
do with retrieving content from the server dynamically. So in this example,
you see behind me, we’re going to start
with some product data. And it’s just raw JSON data. As you can see, there’s– we’re trying to
build a product site, so there’s a couple
of items in this JSON. And each item has some
data associated with it in JSON format. It’s got an item ID,
the name that you’re going to display on the product
page, a description of what it does, a price,
which you can update behind the scenes on the
server, and an image that you show in your store. Second, amp-mustache. We’re going to introduce this. So those familiar with
HTML might already know about templates in
HTML, the template element. The AMP runtime introduces
a new template type. It’s called
amp-mustache, which is a wrapper around the
mustache.js templating system. Now, as you can see
here, this template specifies the way a
product item needs to be displayed on the page. So we specify things
like formatting, what goes in each field, how
large the text is displayed, et cetera. But it’s just a
placeholder, as you can see. So now let’s flesh this
out, the next step. Let’s add some more
details, like a link to the actual product page
from the details page, an image of what the
product looks like. And as you can see,
the double curly braces indicate that it’s also
a templated element. You specify a height and
a width so the runtime knows how big to display it. And now that we’ve fleshed
out our amp-mustache template, let’s combine it with amp-list. So this is where
the magic happens. This piece of code
here, as you can see, contains an outer layer
of an amp-list element. The list uses, in
the source field, the product components JSON,
which was the first code slide we just looked at. And so the list is
dynamically populated based on data pulled from a
server in raw JSON format. And that JSON that’s
pulled from a server is populated using
the format specified in the amp-mustache template. So this looks like a
simple piece of HTML code, and it does pretty
complex stuff. And so what we’re
really doing here is encapsulating this JSON
data inside an amp-list. With this, we’ve
got a product page. BEN MORSS: Hey, it worked. [LAUGHS] She’s very
excited by this. So there it is,
actually, the live page. Here it is, the actual things
we showed you a minute ago, those two products in the JSON,
caliper brakes and wheel set. There it is. It works. I might go a little faster,
because I realize our time is running a little shorter here. So let’s go on to the
second part over here, because for the filtering
and the sorting, we’re going to want
to use amp-bind, again, this being an
example of the page changing in response to user actions. So binding, as you have in
Angular, in React, and so on, is useful. And there it is,
like I just said. And amp-bind has
a friend, as well. Amp-bind works with its
constant companion and faithful collaborator, amp-state. Here’s Raghu to
explain how this works. RAGHU SIMHA: All right. Let’s breeze through this. We’re going to solve the
second problem here with code. Second problem, namely changing
a page’s content in response to a user action. So user clicks, and the
page responds immediately, and the contents of the page
change with your user input. So understanding
how this works can be done in three quick steps. Step one, we call it state. We’re defining state. And in this case, amp-bind
introduces a custom sub-element called amp-state. In this case, the
ID is greeting, so this is an example
we’re going to go through. It contains some raw JSON in it. And we can index it, so
you can say greeting.name, and this evaluates to an
expression on the page. So this is a way of putting
data inside the DOM a page. Step two, we’ve got to bind
this data to an actual element that’s on a page. So far, we just had data. Now we have a paragraph
element, which is going to be
displayed on the page. The thing to note
here is that the text property of the paragraph
element is in square brackets. And so what happens is the
value of that text property is going to be what we evaluate
from the expression. So in this case,
what I’ve done is I’ve initialized the
value of the text property with the phrase
“Hello Bangalore.” And this is bound
to the expression that you see there
in double quotes. And that’s where
amp-bind gets its name. The third and most
important step, mutation, which means changing the data
on the page based on user input. A simple example of how you
can interact with a page– a button. In this example,
the AMP runtime, and particularly amp-bind,
introduces a new method called setState. And when you tap
the button, we’re going to set the state of
the city field to Bengaluru. And the title of the button
is Correct the city name. So you can imagine how
this is going to work out. Let’s put them
together really fast. To recap, we’ve
got the amp-state, which establishes the JSON
data and initializes it. The second step has an element
that’s seen on the page, and we bind the expression
to the value of that element. And third, the mutation,
which comes from user input. So as you can see in the
animated GIF behind me, tapping the button
corrects the name of our old city’s
name, Bangalore, to our current city
name, Bengaluru. And that is amp-bind
in a nutshell. Now let’s put these
ingredients together and see how this applies to
the product page really fast. Again, we apply this to
the product page example. We’ve got state in
raw JSON format. These are the products. We start off by showing all
products from all categories. And then we’ve got a selector
in this case, not a button. And when the user clicks the
selector and changes the value, so when you go
from all categories to, say, just bikes
or components, the magic happens
in the background. And thirdly, when
we have an amp-list, just putting the source
tag in square brackets means it is now bound to the
value of the JSON in the page. And here we are. BEN MORSS: There she is. It’s working. And that wasn’t that
hard to do, was it? There was no
JavaScript involved. There were some
expressions involved, but this is a pretty simple
way to make pages dynamic. And it works pretty well. Who’s this guy over here? Is this like a baseball
player with a funny looking bat or something? RAGHU SIMHA: Well,
everybody knows who this is. Like a well-crafted century
that’s Sachin makes, it took us quite a lot
of steps to get here. It’s a slow process,
but it works. BEN MORSS: It’s a cricket thing. RAGHU SIMHA: That’s right. We’ll talk more about it. But what we really have
as a result of this is– of this process of using
amp-list, amp-bind, amp-state– is a product page that just
serves us dynamic content and supports advanced
user functionality. And all this is built
from the ground up with AMP, with no
custom user JavaScript. Pretty amazing. BEN MORSS: Not bad. RAGHU SIMHA: Yeah. BEN MORSS: So we can
now make dynamic pages. Let’s finish up our site. So again, the idea
here is that this is how you can make
a site that’s pretty dynamic pretty simply with AMP. So back to our home
page over here, I said before there
was no search, because we didn’t know how to
make auto-completion before. And search without
auto-completion is like cricket without a bat. It’s not good. See, I’m learning things
already over here. So over here on our home page,
we have a search over here. We can use amp-form for a
validated form over here, which is our search area. We can use amp-bind over here to
bind the contents of the search input to an API request. And then we use amp-list without
a completion area itself. So the amp-list has
the API request in it. It is bound to the search input. When the input changes,
the API request changes. You can make a
request to the server and format it with amp-mustache
and stick it right there on your page. Works pretty well. Then the product
detail page over here. Let’s say you want
to have the user be able to actually choose
different colors, different sizes over here. You simply actually bind
those, the image up there. And there it is. The add to the card button
can make a server request. This is a form over here. Also possible to do. If you want to
have reviews, they can get pulled from the
server using amp-list. If the user is going to
actually make new reviews, submit those via form, again,
amp-list for templating. You get the idea, right? You can do all these things
with the various things with amp-bind and amp-list. And social sharing, as
Raghu pointed out before– there’s a component for that. So Twitter, Facebook, all those
little buttons over there– G+– all possible with AMP. The cart page– again, similar. If you want to get
shipping costs, you can go to the server
for those kinds of things. If you want to change
the quantities, you can bind the quantities
there to the actual price. If you want to [INAUDIBLE]
and remove items, again, you can have
binding to actually change classes on things when
things are removed. You can have a state
variable in there to track what’s
actually in the cart. And you’re calculating
totals, same idea. Finally, the checkout
page over here. We haven’t discussed
this before, but AMP comes with some
very, very nice form validation that’s built in. You can specify regular
expressions, whatever you want to, to have some nice,
helpful messages over here when things are
submitted or things are entered that are
not the correct format. And then for payments,
this is a new feature that’s coming to all browsers. Chrome already has it. Safari is working on it. It’s coming everywhere. The payment request API can be
used to do this if you’d like. This will pull up over
here a nice little screen with the user’s actual methods
of payments already built in. If that isn’t good for you,
amp-iframe also can be used. The iframe, you can put
whatever you want to in there. JavaScript is allowed in
the iframe, of course, so you can do payment,
also, through the iframe. But what if you actually
need more, like Virat Kohli. RAGHU SIMHA: That’s right. BEN MORSS: Actually, I
saw on TV this morning, I think for higher wages
for cricket players. If you find that,
actually, you can’t use the AMP for
everything anymore and you want custom
JavaScript, there are some ways to
do this as well. Of course, we mentioned
before with the amp-iframe, you can embed whatever
JS you want to use. But also, you might
find at a certain point that the balance of speed
and convenience of AMP is outweighed by wanting
to do either more powerful functionality
that a PWA has or you have just more
complicated stuff on your page that
has more JavaScript. So this is not a problem here. This lovely animation
says it all, AMP PWA. In this case, it is common
to start with some AMP pages for speed and then, at a
certain point, transition to PWA so you can have PWA features
where things load quickly, things are available offline,
and so on and so forth. And
amp-install-serviceworker can be used to get a
service worker loaded and running in the background
so your next PWA page loads immediately. So AMP, PWA are a very
powerful combination. As I was saying before, you
can try this out yourself over here. Ampstart.com/templates has this
very same bike template over here that we showed you today. And AMP e-commerce actually
works shockingly well. WompMobile over in Seattle has
been AMPing various people’s e-commerce sites. And the numbers here are
usually pretty impressive, a doubling of conversion rates. Numbers like this occur
sometimes with raw performance, but not usually. Just AMP is so much
faster than anything else. That tends to please
users quite a bit as long as the user interface
is still nice and the design is still good. FastCommerce also has
made lots of pages and seen pages get much
faster and conversion rates increase correspondingly. And actually, right
over here in Bengaluru is Myntra, which has done
AMP e-commerce recently. And they’ve seen 60% improvement
in speed and a very, very large reduction in bounce rates. That’s all we have for you. If you have questions,
come find us at the AMP office hours
or the AMP sandbox over in the other room,
other building place. We’re here to answer
your questions. Thank you for your time, and
have an excellent afternoon. [APPLAUSE] RAGHU SIMHA: Thank you. BEN MORSS: Thank you. [MUSIC PLAYING]

2 thoughts on “Building an E-commerce Site with AMP (GDD India ’17)

  1. Hey Google,
    Thanks Ben and Raghu.
    I have one question. Can we get more detailed notes on this? So that we can develop a AMP Based e-commerce portal?

Leave a Reply

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