test test test test test test
test test test Kraken CRYSTAL LAMBERT: Yuki ZOOUK Yusuke Utsunomiya test test test AMPConf #AMPConf one second. Hello, everyone. Most of today’s
session is spoken in English with a small session in
Japanese. If you need a head set to
translate into Japanese, raise your hand. For the session in
English, you can pick up the headset later. If you need a
translation headset to go to Japanese, please, raise your
hand and we have them right here as well.
Thank you. Hello, everyone. Please take
your seats as your program will begin in five minutes. Attention everyone, we have a
full house today. There are a few seats up here that are still
to be filled. Please fill every seat today.
Thank you. Hello, everyone. Please take your seats as our
program is about to begin. You might have heard the terms
floating around. AMPConf, what’s up? Welcome to
the AMPConf. All right. I really need to relax a little bit now I
think. I need some break here. Now, so, please welcome to the stage, Crystal and Yusuke
who will be your co-host and lead you
through the next two days. Welcome. It is really amazing to have you
all here. Let us introintroduct ourselves. Thank you very much for coming
to AMPConf and for today we have
made a lot of preparations and we have a
full house today and we are excited. Let us start with a brief
introduction. My name is Crystal and I am a
technical writer at Google on specifically, you guessed it,
the AMP project. I am so excited to be here and work on my
passion the web and a framework that does so well at keeping it open
and available for everyone. YUSUKE USTUNOMIYA: My name is
Yusuke Utsunomiya and I do a type of
work where I go everywhere to speak about
AMP. Maybe some of you have heard me
at other AMP conferences, but I what I deliver is information
that PM and engineers are talking about
today. I am very excited Crystal and
really excited we are able to host this AMP conference. The annual AMP event here in
Tokyo. CRYSTAL LAMBERT: Look. It is me.
YUSUKE USTUNOMIYA: Let me explain this. This started in 2017. The first city was New York. Then it has been held last year
in Amsterdam and this year we
wanted to do it in Tokyo this year because of all
the excitement building toward the Olympics it is a wonderful venue to host
Google AMP. CRYSTAL LAMBERT: This is my
first time in Japan and Tokyo and it is my
first AMPConf and it is my first time moderator so thank you for
joining us. Definitely tweet at me all of
your Japan recommendations. I want to know.
YUSUKE USTUNOMIYA: And speaking of, you are wearing a beautiful
traditional yucata. YUSUKE USTUNOMIYA: We are
honored to wear this outfit built for this
conference. There is craftsman, Mr. Kim Ne, he made this ucata for
us today. Thank you very much, Mr. Kim Ne. CRYSTAL LAMBERT: I have so many
favorite things about AMP but one of them is we don’t only
reach developers globally but we reaching people in different
industries. AMP is becoming something
something for everyone. YUSUKE USTUNOMIYA: And so AMP is swirling upwards in a diverse atmosphere. We will like
to ask questions. Raise your hand if the question has to do
with you. Who is from Tokyo today? Raise
your hand. And who lives in Japan but you
came from outside of Tokyo, raise
your hand? Anyone from Okie noa? Not just for Japan, of
coursement raise your hand if you are from China, India, southeast Asia, Australia, today
is your day. CRYSTAL LAMBERT: I want to know
Europe, Middle East, and Africa. I was expecting more hands than
that. Thank you so much for joining us. What about the
Americas? That’s me. San Francisco! Fantastic. I want to see your hand if is
North America, south America, Mexico and Brazil. Lastly, anywhere else? My Mountain Viewers let me see
you. Of course, we want to give a very special shout out to all
of you joining us on the livestream. When I have joined conferences
on the livestream I don’t always believe them when they say you
are a part of this and you truly are. We will invite you to
participate as much as possible. We are so excited to have you
joining us. YUSUKE USTUNOMIYA: Everybody on
the other side of the livestream,
hem hello. There is a diverse crowd participating in this
conference. AMP has a strong code of conduct
that it believes strongly in. If you go to the link, you can
see the language and the motto is be
excellent to each other. We want to make this AMP
conference enjoyable for everybody.
CRYSTAL LAMBERT: Be excellent oo each other. We have a lot of
different cultures and backgrounds and it is one of
those things that make AMP so beautiful. We want to make sure
everybody feels welcome in this environment and has such a great
time. Please be as polite as possible, as forgiving as
possible, but if you see something that doesn’t feel
right or makes you uncomfortable, this is the way to let us know about it or come
up to any AMPer staffing any booth and we will address the issues you have.
YUSUKE USTUNOMIYA: There is another important theme which is
language inclusiveness. We don’t want anybody to feel
the border of a language. When I am speaking Japanese,
what I say is interpreted into English and if somebody is
speaking in English, that is getting interpreted into
Japanese. And the AMP teams would like to speak with all of you directly but
some of the AMP members may speak only English. They may have an accent but
let’s try speaking to each other. There are other people speaking different languages in
attendance today.>>CRYSTAL LAMBERT: Please take the
time to be patient and communicate and have language
inclusiveness. I don’t want anyone to feel embarrassed if
you are speaking with somebody with a different native
language. One of my favorite things about
traveling with AMP is speaking to different people and learning
their backgrounds and their struggles and what they need to
gain from AMP. Please go speak to one another
and be inclusive about the different languages. It is really worth the extra
effort. YUSUKE USTUNOMIYA: Let’s build
the excitement and Twitter is
#AMPConf. Everyone tweet like hell and
let’s try to make this a top hashtag for
today. CRYSTAL LAMBERT: You just have
to tap right in. It is just that simple.
YUSUKE USTUNOMIYA: Let me talk about where we are. We are at
number 7. That is the general sessions. Lunch and after parties are in
four and three and the other areas are tutorials and demos. We also have a mother’s room, so
if you need to use it please do. We will have a Google booth
specific to all your Google questions. Everything else is
AMP-directed that will answer all your questions about design
and user experience, stories is launching a bunch of brand new
features we are so excited to hear about a little later today.
Email is live out in the wild. Some of you should have gotten
that AMP email. Visit that booth and all the
questions. We will have a booth on
performance and interactivity. One of the most popular
questions I get all of the time traveling around
the road show is analytics. We have a booth for that and it
is staffed by knowledgeable AMP Core team members. And you can
live code AMP today with a tutorial booth. Please, it is
just around the corner. As we showed on the map. Go check it
out and talk to the AMP team. They are so excited to answer
all your questions. YUSUKE USTUNOMIYA: Today’s schedule will start with
a keynote after we are finished
and after lunch we have ate so it is really a stuffed schedule but we have
eight sessions in the afternoon. One point here, this event,
these sessions will be uploaded to the
YouTube AMP channel, so you don’t need
to take pictures of the slides. You can get that later from the
YouTube channel. CRYSTAL LAMBERT: We are going to
have a party with entertainment
featuring live poetry by myself and Yusuke.
[Applause] CRYSTAL LAMBERT: Now I feel bad.
Just kidding. We are going to be having DE DE
MOUSE. We are going to have other stuff. There is party
things such as food, drinks, we will have a photo booth where
you can turn yourself into a GIF. We will have Pacman Battle
Royale and we will also be performing
poetry upon request but I highly encourage you to take pictures
with us. We are much better posers than
we are poets. YUSUKE USTUNOMIYA: So, if you
want to take a picture with us, do stop
us and ask us. We love to take a picture with you. If you have any questions, just
ask away. Go to https.slido. We take general questions about
AMPConf and in addition there is a TSC
panel from 5:30 p.m. today and you can use this app to ask questions to those panelists.
CRYSTAL LAMBERT: We will be featuring the people on the Technical
Steering Committee today. There is also — I am sure
Yusuke just covered it, an open chat room for general questions
and then there will be a Google-specific panel tomorrow
that you can already start submitting
questions for. YUSUKE USTUNOMIYA: I have been
speaking too much so why don’t we start! CRYSTAL LAMBERT: Now please join
me for the moment we have all been waiting for as we welcome Malte to the
stage. [Applause] MALTE UBL: Hey, everyone. My name is Malte and I am a
member of the newly formed Technical Steering Committee for
AMP and the tech lead for the team at Google that is
working on AMP. Welcome everyone watching on the
livestream and of course everyone here in the audience.
Thanks so much for joining us. We are so excited to be in Tokyo
and we have had AMPConf in three different regions across there
world and it is particularly awesome to be here in Asia and
Japan because publishers and platforms have been incredibly
successful with AMP. Publishers on e-commerce
websites based in Asias are some of the
strongest users and contributors to AMP.
Many of the platforms that link out to AMP content are based
here in Asia. At the first AMPConf, two years
ago, we announced Yahoo! J apan, Baidu and Sogou were
bringing support to AMP. And Yahoo! Travel as well as two additional
services within Yahoo! Adopted AMP. This past October we celebrated AMP’s 3rd
birthday. Let’s take a look back at where we have been and what AMP can do for
you. MALTE UBL: Wow, that is 852 open
source contributors to AMP. A huge thank you from all of us
for your help. We would definitely not be without your
help where we are today. As we have just seen, AMP has
expanded a lot since first announced.
Originally AMP was known for the simplistic page for publishers
but now AMP powers experiences across the web with stories, ads
and emails. Pinterest is a great example of literally doing all
these things and making AMP the building blocks for how they
approach the open web. They link to AMP pages on their
product and they are exploring using AMP
Stories and one of the first senders of AMP emails. As you can see, AMP has
evolved. We are not just mobile and we are not just pages so it
doesn’t really make sense to use that long awkward phrase and
that is why moving forward we will be known as the AMP
project. No acronym, just a word that
signifies great user experience. AMP is more than pages and it is
transforming our super freshed launch side amp.dev. You as a
developer are probably not working on ads and emails at the
same time. The new website makes it quicker find what you are
looking for. Besides a redesign, the new use
case section is sampled around
examples that push the boundaries and
hopefully inspires you to do more with AMP as well. While we
have shown this before, I feel it is important to revisit the
vision and the mission of the AMP project. We are here for strong
user-first open web forever and to achieve that we are supporting the long-term success
of web publishers merchants and
advertisers. To make AMP better reflect our stakeholders we changed the AMP
governance model. Governance is just a fancy word for the rules and groups that decide
what happens with the AMP project. It includes the
Technical Steering Committee, or TSC. The advisory committee. And
finally, the working groups. Those groups are the easiest way
to contribute to AMP and we would love to see many of you
bring your ideas to life by joining one of these groups. All of the TSC, many of EC
members and many of the working group members are here today. I
would like to recognize them by standing up if there is anyone
around. [Applause]
MALTE UBL: You will hear more from the TSC later today in our closing
panel. When I think of the web platform, I think of three main
pillars. There is HTML, CSS, and
JavaScript. And while AMP itself is written
in JavaScript, so far when you build an AMP page you only had HTML and CSS
at your disposal. You could say that AMP was
incomplete, but that is changing now. Based on revolution technology
called worker dom full JavaScript is
coming to AMP. You can run your own JavaScript in AMP documents. On the surface, what we are
doing is introducing a new extension called amp-script. It allows you to run your own JS
inside the document. There is being added rules to keep things
safe and of course fast. This is a big topic so check out
Chris’ talk about amp-script right
after this keynote. All right. Speaking of JavaScript, one of
the most popular ways to create AMP pages is throughout react server-side
rendering. For example, Reddit, Pinterest
and Airbnb use this technology but everyone had to roll their
own thing. That is changing and we are super excited to announce
Next. js one of the most popular
framework for React is gaining first-class support for AMP. They have put a lot of thought
into creating the best experiencing including live
reloading. It is combining the power of
React with AMP. Because it is always best to eat
your own dogfood the entire Next. js is itself an AMP website as
of today. Let’s talk about what I think is AMP’s number one
problem. Those google.com/amp URLs. Last year, we talked about new experimental web technology
called Web Packaging or Signed Exchange s. I am super
excited to announce Signed Exchange launched in Chrome
stable and Signed Exchange support is launching in Google
Search as of today. It will be available to all users that use
browsers that support the technology and all your websites if you are
serving Signed Exchanges. You can now get the instant loading
for AMP on your own domain. By the way, on top of just
fixing URLs this makes stuff like analytics
more robust because everything runs
on your domains and cookies and storage simply just work. To
participate a website has to make Signed Exchanges available
for itself and today there are two ways to do this. There is
the do-it-yourself method where you install a new software
but you know, to be honest it can be a bit difficult to setup.
I am more excited to announce Cloudflare is launching their
servers AMP Real URL that automatically provides Signed
Exchanges for all your AMP pages. To turn it on, all you
have to do is go in the Cloud for admin and toggle the
feature. It is incredibly easy. You probably want to learn more
about this and may chose to do it
yourself. Check out the talk tomorrow by Greg that dives details and what they
mean for AMP. All right. One of the key differentiating elements
of AMP is that it is an evergreen JavaScript library.
Every day, hundreds of open source contributors and dozens
of full-time engineers are working on making AMP better and
those improvements are flowing to all AMP pages on a weekly
basis. Thinking about this more, I
realized that AMP is more like a software as a service Cloud offering than the
old kind of shrinkwrap software model. We believe web frameworks
are going through the same transformation
as other software and we are calling it AMP as a service. To
give you a bit of an idea of what this means let’s take a
look at a few things. The AMP team is polishing the core format towards the more delight
full native like experiences. As you can see here, images on
AMP pages now support the live box by default and that light box has
smooth morphing tran scission just like users expect from
native apps but you don’t get on the web. And finally, images may
still take a while to load. To improve the instant feeling of
AMP, we are soon starting to
automatically generate blurry preview images
which will appear instantly. All of these improvements come to
your AMP documents for free and importantly by default. That is what we mean as AMP as
Service. Investigating in AMP means that
your websites get better every week without you having to invest yourself in
those improvements. Reason of example of additional improvements are infinite
scrolling, video docking, protection
against slow third party code and masking just to name a few.
All right. We previously talked about AMP
and PWA being best trend but what if every AMP page on the planet would be a
PWA? We are moving toward that vision with the one line service working
which is an auto configering service worker.
It has all the right things including resilience and speed right out
of the box without any configuration. Diving deeper
into this topic, you can hear more with the AMP as a
service talk by Naina. It is right tomorrow morning so don’t
miss that. All right. Earlier, we talked about AMP’s
mission which includes the part to support the long term success of every web
publisher and advertisers. That means folks need to make money
so let’s talk about ads. Back in 2016, we realized that
the same performance using AMP pages could be applied to ads as
well. We set out on a pretty daunting mission. AMPHTML is fast but no way they
would find adoption if they didn’t have great business
outcomes. Turns out speeding up display ads contributes directly
to publisher revenue and advertiser RI. Here are a few
examples. Sonet, a Japanese demand service platform, has
seen huge decreases in ad load time resulting in major
improvement in ad metrics such as a 34%
improvement in click through rate which is incredible and unheard of. Spanish newspaper and Volkswagen
ran an ex experiment and the result was
excellent conversion. Every single user acquisition
got 43% cheaper. Putting that together, at Google
we believe in the potential for making a better web based on the AMPHTML
ads and made progress putting them into as many places as
possible. They make up 12% of all ads
including AMP pages and non-AMP pages. The
entire web. I am sure you can imagine that adds up to quite a
huge number but being only 12% there is a long road ahead of
us. Changing large ecosystem take a
while but we are absolutely committed and working on it. Switching gears a little bit. Let’s talk about AMP page
monetization. We have seen huge growths in
adoption residing in 300% more ad
requests on publisher AMP pages with using ad manager and ad sense, both
Google products. 300% in one year is absolutely
stunning. I don’t know where this is coming from but it is absolutely stunning. The times of India, part of
India’s largest media group is a great
example. Their AMP passengers load three times faster and
improvered yield by a stunning 50%. You can hear much more
about AMP providing value to users,
publishers and administrators across the web in
Vamsee and Katherina’s talk tomorrow morning. Let’s move on
to another way to make money which is for merchants on the
web. AMP is a great solution for e-commerce but not just
individual stores. E-commerce platform Shopify
supports AMP and they are powering 800,000 businesses and support AMP
through their Shopify app’s platform. Six such apps provide great AMP
versions for the Shopify storefront and more than 20,000
stores have installed these apps and more than 1,000 are
installing them every single month. In case you are wondering
which of those six apps you can use, we just published a blog post diving
into that topic at you can see on the screen behind me. One of these apps is ampifyme.
The page speed decreases from more than six seconds to less
than one second with AMP. The key step is mobile users went
about one page deeper into the website which starting out on AMP page. Cafe24 is another e-commerce
platform betting on AMP. They are enabling their 1. 6 million merchants to deploy
AMP pages using ready made templates. You can learn during
their talk later today. Speed and user experience is also
super important when it comes to conversions which is why two of
the leading platforms of powering converges of landing pages, unbounce and
instapage, have gone all in on AMP. These services are super
relevant because they are very popular with Google ads. Last year, Google Ads launched
at the same time they introduced their speed more that measures landing page
performance. Today we are seeing the fast majority, far over 90% of AMP pages
receiving the highest possible score which is 10/10. This translates to real business
success. Across case studies, advertisers improve load time by 4X and
bounce rate lifted in half and lift in
conversions 3-500 percent. There are two more key fields of
AMP we have introduced at last AMPConf.
Stories and Email. I want to spend the rest of the
presentation talking about those. Let’s start with Stories.
AMP Stories started with developer preview at last year’s
AMPConf. Since then, we have seen publishers post an amazing set of stunning
stories about a wide range of topics. Stories are the first new medium
that was truly born on mobile. They feel native on your phone
the way nothing else does and they are
every. Invented by Snapchat they found
their way into WhatsApp and many others. Stories are in many places but
confined — they were invented by
Instagram and taken up by Snapchat. This is where AMP Stories comes
in using a format users love. We
believe there is distinct value in having stories live on the
web. With AMP Stories, you own the
content and control and design and
disTRIBdistribute content as you like.
There is not a platform dictating what you have to do.
AMP Stories has gained wide range of crucial features and I
want to highlight a few of those in the next few slides. The first one are page
attachments. You have probably seen that in
native apps before. They allow swiping an app to
dive deeper on a particular topic. The second is is it ability to
add a sidebar or hamburger menu that you can use
to navigate into further areas of your site. And the desktop
experience can be excellent as well. We have worked with “The
Washington Post” to create styles that are
part of the core format. Because AMP Stories are on the
web it comes as free by using standard design techniques. Speaking of “Washington Post,”
there was very surprising news yesterday.
“Washington Post” contributor was awarded the Pulitzer Prize for
future photographer for his rich
photography and the award-winning story
appeared in the AMP technology story. The AMP Story presentation was
so visually striking that it was
submitted to the Pulitzer Prize committee
and won. Incredible. All right. So, advertising on
stories is still an emerging ecosystem. I want to give you an
update where things stand with that. The first product for publishers
is story ads. You are a publisher who created a story, you can now directly work
with advertisers for full-screen, beautiful ads. These ads appear just like ads
used to do in the paper magazine. The ad only shows if
it is loaded by the time user get there meaning
users never, ever see a blank ad. If you don’t like the ad as
a user, you tap it and are on the to next
page of a story. Just like in a paper magazine
you go to the next page. We feel is a great combination
of attractive advertising and a
great user experience. Just how a publisher delivers to
the web pages they would do the same on stories. For example, here is a story
delivered by “The Washington Post” from a story they created.
Advertisers will be able to target and deliver story ads using DV360
using Google ad manager. This feature is in beta and reach out
to us if you like to participate.
Another way publishers can monetize stories is using
affiliated links. We are adding support to stories
that allow publishers to provide
additional details so users can navigate to
the external web page to complete
the transaction if they are interested. All right. One thing
we have learned is that making stories is a little bit
different from creating your plain old web page. Create
agtruly good story isn’t as easy as just adding a new template to
your CMS. Instead, creating stories
requires tools that allow you to express
your creativity and that is something that has been lacking
so far but something that is completely changing now. We are super excited about a
whole slew of awesome tools for AMP Stories that are launching as we speak.
Make Stories is an end-to-end what you see is what you get tool for
making stories integrate into your favorite CSS. The tool was
built from the ground up to take advantage of the capabilities of
the AMP Story format. We are excited to announce as of today the tool is coming out of beta
and free for anyone to use. You can try it on makestories.io. Next is Newsroom
studio. It is specifically engineered for publishers looking to embed
Tappable format into editorual and
commercial workflows. And for WordPress, launching today in beta is the new AMP plugin for
WordPress. It comes built-in with a WUSIWUG.
Many of you will be able to create additional stories with
no additional plugins. Finally, we are excited to
announce Unfold, one of the top story creation tools out there
that has 17 million downloads and used by millions worldwide is integrating AMP Stories
support. This will launch in June as part
of the new premeual version of their
product. Keep an eye out for that. But site tools are seeing an
emerging trend. Jumprope, a platform discover
and created and shared as well as
Tick Done with spearheading this trend. We are super excited to
see more of this in the future. All right. So the AMP Stories format is
gaining features, monetization is coming along and we have great momentum but
what about Google? Google launched a developer
preview for AMP Story after the last AMPConf. That first phase of the project
is ending and we are moving on to consumer launch.
Google want to improve Google Search and Google discover. You
might have spotted stories showing up in your discover feed
already if you live in the United States which are for more
placement of stories and discover and launch in more
countries. As of last week, Google breaks
out stories traffic console so you will get detailed metrics
for how well you are doing. This was the discover project. Nexus Google Search. I am excited to announce, the
first phase starts with travel-related stories and moves on to gaming, movies,
TV, and fashion. Stories being a completely new medium and will
start as experiments while we learn how users respond to
stories on search. We will keep you posted as this is rolling
out. For all of you in the room, we are hoping you will start
creating more stories to fill this new block
on search with life: And then be sure to
check out Jon and Hans talk later today and
explore the demo space outside the room. Now it is time for the last
topic today; email. We announced AMP for email as a
preview at AMPConf last year and it is
now ready for business. I did, however, want to take a
little bit of time to write some extra context at what AMP for
email really means for email. For many of us, email really
hasn’t changed as a medium in years. I personally can actually still
remember the introduction of HTML email but HTML email isn’t
really a thing. You write something that is kind of like HTML but it is an often
heavily sanitized to rip out everything that could be
remotely unsafe or the client can render. If you have ever
created a sophisticated HTML email you have probably felt
that pain. AMP for email relies on the same
safety features in AMP that have privacy-preserving prerendering
for the web. It opens up a whole new
possibility for eveal. Stuff like R SSHGS RSVPing for events and so on. AMP for email is now available
to Gmail and Gsweet — G Suite users. It is coming
to Yahoo! Mail and Outlook and hopefully
other platforms later this year. This launched two weeks ago and
early adopters like indeed are seeing a 2X increase in clicks on job alert
emails and OYO saw a 60% conversion
lift for visitors coming via AMP e-mails
since launch. Google launched common
notifications for Google docs. I used this for it makes me life
better. I never want to go back to plain
old and often stale notifications again. We have a detailed talk diving
into all things AMP for email. Check it out tomorrow afternoon. This was avenuing everythingwy
— this was everything we wanted to talk about today. We talk about JavaScript coming
to AMP and Next. js is launching first-class
support. We have made major progress for advertising on the
web based on AMP and publishers are seeing great success
monetizing the AMP’s websites. Stories are gaining steam and
the format is getting more mature. We are seeing great
momentum with a whole slew of tools. Google announced plans for
consumer experiments with stories. And finally, a few weeks ago AMP
for email launched and more is
coming later this year. Thanks everyone for coming. That
was it for the keynote but that is so much more. I hope to talk
to many of you at the breaks and at the afterparty
tonight. Thank you very much.
[Applause] YUSUKE USTUNOMIYA: I think that
was a wonderful keynote. AMP is a product so new features
coming out every day very important. So, what I was impressed — what
my impression was is there is a lot of corporations using the new
features of AMP and giving their feedback
back to the AMP team and as a result we
are building a more sound product.
We have a lot of Japanese people here so let me elaborate. There were a lot of case studies
but the interesting one was the Yahoo! Japan one was a good one. Scientific Exchange which is a
browser feature, Yahoo! Japan used that to deliver more
things to their client. And tomorrow 2:30 p.m. , this person who did this
project will be speaking on stage tomorrow. He has a tech blog so you can
read up on that before tomorrow’s meeting at 2:30 p.m. We have time until next session
so I have to fill about 10 minutes. I need your
cooperation. Let me talk to you about the next session. It is about JavaScript, how to
use that on Java is what needs to be
discussed. JavaScript. If you don’t know what you are doing, you are going to ruin the page
speed, so to stop problems like that, you
can use AMP. That’s why AMP exists. If you don’t — if sites don’t use AMP, you
could — those sites that don’t use Java
well want to improve their JavaScript so there is a lot of
improvements that people want to make and they think AMP might be able to be the solution
but there is something called common
link. Anybody? No one. OK. Calm link is the worker thread
— it is interesting tool. In the next session we will talk
about a different library and it is
going to be discussed next session has
more affinity with AMP. I would like to start the next
session. It will be on the glory of
amp-script. Please welcome Kristofer from
Google. KRISTOFER BAXTER: Hello,
everyone. I am very excited and also extremely nervous to be
here today. I am happy to be the one to be presenting amp-script,
a way to incorporate custom JavaScript into your AMP
documents. There are billions and billions
and billions and billions of AMP documents available across the web and
they share three key traits that I think are important and worth
calling out. First, instant loading. When you are on an
aggregator and click on a hyperlink to an AMP
document it feels like it is already there and renders almost
instantly. It is a magical feeling not
expressed across the wider web. The reason is privacy-preserving
preloading. While you are sitting on the news aggregator
looking for the content you would like to click on, we can
in the background load AMP documents
and have already available so when you click they are there
just like that. Now, this doesn’t work unless we build
into concepts of preserving privacy during those prerenders all the
way into the architectural core of the framework itself. If we preloaded a document and
it exposed credentials in advanced
it could be use to target. We make sure privacy is
preserved during the preloading process so articles and other
content appears instantly when you click on it. And third,
believe it or not, is a reliance on JavaScript to improve user
experience. Yes, that JavaScript. Now, that might seem
a little strange because so far we haven’t
allowed custom JavaScript within AMP documents but here on the
AMP team we love JavaScript. It is the world’s most popular programming laj language and it
is core to how the web works. AMP image to AMP Story is
authored using JavaScript. We have constricted to list to
high growing components. This can have unintended consequences
over billions of documents leading to greater similarity and less
customization unique to each domain. We would like to allow
developers like you to loverage some of your own JavaScript
within the documents without impacting user experience. We
believe a little bit of JavaScript, and I mean a little bit, will
allow your documents to express your intent
more uniquely. Last year, you might recall we
presented this idea with a bunch of caveats. We were very nervous
about this project. We just started it when we spoke
about it last year. We had a lot to learn about whether it was
possible. Over the course of the year of developing this
technology, we learned a lot. We were scared often. We were nervous we made a
promise we couldn’t deliver on. Internally this project became
known as the Kraken which is sea creature
that tormented early sailors
traveling into the unknown territories and this is what it
felt like building this technology. When you are at the
edge of the known and unknown it is easy to imagine how hard it
can be and make up mythical sea creatures making it impossible
to achieve goals but we are really happy to say we have
tamed this Kraken. We have made it possible. We have worked with
it very well and are ready to release the technology so you can fare across there seas
safely. Let’s talk briefly about how
this specific technology works. In an AMP document, there are
two main pieces to remember, the Runtime and components
themselves. The Runtime is shipped normally
as VOjs and this specific Runtime
presents the document from loading content too far away
from the visual import. A great example is images. Say there is an image at the end
of the document that is 30 pages long, we will not load that
image until the user is close enough to where it would start
to display and give buffer room in advance. This means when you
are visiting a document that has a lot of images you are not using your entire data
plan up front. Only when you go to interact with those pieces.
It is not just for loading images you do this. We use this
for our JavaScript a well ensuring that components that
are far down the screen do not start up
or perform computational heavy
tasks until they get closer to the user.
Because we have this Runtime in place we can ensure dom reads and writes
are batched. All AMP components are considered efficient and the Runtime
prevents a number of potential issues. What
happens when we introduce custom JavaScript in this environment?
It can’t be managed by the AMP Runtime. This component may run
a number of assets before it is anywhere near the visual view port breaking promises about how AMP documents
work or even worse consume tremendous
amounts of CPUs. It would lower overall
performance and unintentionally giving users a poor experience.
How did we solve this? First, we put a sandbox around
that custom JavaScript. It prevents that specific
JavaScript from abusing system resources in the main thread and
also accessing parts of the document outside of its scope. That way, when you put an
amp-script on the page you can feel confident it will not
interfere with things outside of the amp-script root. Next, we put that specific
context in a worker thread. We transmit that over and create a
new worker from scratch. The worker thread, like all web
workers in JavaScript, does not have access to there document
object model. This is an intended design
decision. As a result, JavaScript frameworks and your
custom code do not operate in this context the same way they
would in a main thread. This is a pretty large problem. We invented a library called
worker dom. Worker dom does exactly like
what it says. It creates the DOM within the
specific context of a worker allowing you to use the DOM mutation and frameworks
that use those specific instructions without much
change. Then we put your custom JavaScript inside that container. This also
creates another problem. Now that worker thread has a whole
set of changes it would like to express to the DOM. It said I would like to add an
event handler to this one here. We need to transfer the commands
back to the main thread and apply them. Let’s walk through a simple
example. Here we have got two lines of
code. The first line we are going to create an element of
div. We are going to assign it to a representation that we call
div. Afterwards, we are going to take
that development and append it to the document body. This is vanillavanilla js but
the frameworks do these things under the hood.
Let’s talk about how we do the creation of elements for a second. Create
Elelement is what we will achieve with this numerical
sequence. This is an array buffer of
values. The first value, 3, is the
persistent reference to this node. When this node is created it is
assigned that identifier. If the worker or main thread
refers to node 3, both know what they’re talking about. The
second node, our second number, tells the main thread what type
of DOM node should be created because this specific
instruction said create element we are going to use the number 1
here. This is not a made up number. The node prototype
includes all of the types of nodes you can create. One just happens to be
node.element.node. The next value is something we
couldn’t know in advance. The string div. Maybe we could have
known about div but not the text that is in arbitrary nodes. What
we do here is create a string pool. Every time we encounter a new
string, we put it into the spring pool and now we have a persistent reference
to that persistent string. We can use that value and get a
resulting value from a numerical index.
The fourth value is what text would be contained inside this
node. Now, this example is
createElelement so the text inside this node is 0. 0 is a
magical constant and effectively means there is no content inside
of it. However, as a thought exercise,
if this was create tex node when a first argument of foo, then
what we would need to do is transmit the index
value of that foo string inside of this
specific reference. The final value in
createElelement is the namespace of the node. Elements created through create Element has this node. We had
need to translate that namespace as the value here from the
string pool. Now, we are on to appending that child to the
document body. How do we do that? Again, we can reply on an array
buffer to transmit this information. Here we have got the number 2 to
begin with. This number represents the type of operation
we are going to be performing. 2 indicates appending a child. The next value is the identifier
for the parent we are appending to.
Document.body has that unique identifier assigned up front of
the number 2. The third value in this buffer represents the next
sibling node. If you were referring to that next sibling
node when you appended this object, we would need to transmit its identifier here
to correctly insert the right place. Same thing goes for previous
sibling. If you referenced to previous
sibling here we need to translate it as well. Here is
where things are different. The next slide is the number of
nodes we intend to append to the DOM.
Why would we need this value to be more than one? You cannot
append more than one node at a time through this API. This
specific construct is a DOM change list meaning it is the
ability to append and remove multiple children at the same
time. There may not be a DOM API for
that today, this interface would
allow us to support future DOM APIs that
would allow that in the future. The next value is the number of
nodes we intend to remove. On the final value is a spread of
the items that we intend to add, with their unique identifiers, followed by
the items we intend to remove.
Congratulations. We successfully requested a node
to be appended to the document body. For reference, here are
those two array buffer sequences again. Creation of a node and
leveraging that node as we append it to the
document body. This allows working DOM to send
messages quickly and efficiently through the threads and apply DOM mutations.
Let’s build something. That was a little deep. Maybe we can back
up and build something and make this a bit more fun. Let’s start
with the Kraken document. This is an example I built and
it expresses most of the common
functionality you would need to do within an amp-script
component. We start with a valid AMP document. I omitted a ton of the AMP
document code to bring down the example and simplify but really
first we are appending a new script tag and that script tag
is for the custom element amp-script. Later, we leverage
the amp-script custom element itself and pass into it an
attribute that is the URL of the JavaScript that will enhance the
DOM nodes inside of it. And again, we have children inside
of it here, a single child that is
a div. When the worker starts up it has
knowledge of the div. JQuery plugins will work
successfully. Next, we need to write some
JavaScript. That JavaScript will interact
with the DOM inside the amp-script element and treat the root of there
amp-script element as the doc body. This example is using preact.
All we are doing is creating a div node in our component
method. That div node inside of it has a
class attribute with the name Phil. It is the same thing you
saw in the previous slide. When we go to render that specific
element to the screen, the component is put in
document.body. Now the third argument here is specific to
Preact. What it means is it will merge
what was existing in the document before
with what you now specified. Next step, we need to make sure
our server is responding with the correct setter of headers.
This is one of the security constraints. Here AMP access control allows
source origin, say that three times fast, will allow you to specify what
origins are allowed to load JavaScript from. So, if you have an AMP document,
and you load JavaScript, that JavaScript resource needs to
make sure this header is present. I have hard coded the
values in this example but you should figure out what is best for your sering
environment. We are likely better off calling
this not the Kraken document but the
empty document because that is all that was in it. Let’s add
some interactions. First we will insert a logo
component. When we do that, we import the component and then we leverage
the logo component within the render method. Now this div is
going to have a single child, that is the logo component. Here is the logo component
itself. An important thing to note is I
used a component called AMP image and that is something I wrote that actually
outputs an AMP-image and the content is the attributes you
would apply to an AMP image. However, it is important to note
we have added a click event
listener so now every time the AMP image is clicked we will run the method handle
click. When handle click is called, we are growing to change the state of
this Preact component and it will toggle between the
animation, so we will be able to say animate this component when
you click on it and when you click again turn off the animation. We need
to wire that up to some CSS. Here is the CSS for this
example. I have an animate class name and when it is applied it uses a CSS
animation to wobble the logo back and forth. Now, we have gone from the
Kraken document to the wobbling
document. For the sake of time, I will jump to the end, show the
example and talk through it a bit. Here we have the click that
causes the logo to wobble and there is a
Kraken at the bottom. Click on that and a series of
SVGs fall from the screen. If I click on it again, you will see
a different sequence and they go in different patterns. Lastly, I
added a touch move event listener on to the document body
which will allow us to see the cursor and the lag time for sending events back
and forth between threads pretty quick.
You can achieve a lots of what you want to do in your custom components
using just these pieces. What is supported? Quite a bit is supported but not
everything. We have a handy dandy chart right here you can
go read and I recommend taking a look at that if you plan to use
amp-script. It will tell you the DOM APIs
supported and what is not supported and also what is
coming soon. An important note to add as well is we built a
Linter that will analyze your JavaScript code and look for
patterns that will work or need
replacements and give you hints. Let’s talk about the tradeoffs
and restrictions for a second because like all things in
computer science nothing is perfect. You have to make
tradeoffs in order it keep moving forward. There is a few I
would like to call out that are important to know as you start
to use amp-script. The first one is 150 kilobytes.
That is the maximum size for all JavaScript content on an AMP
document. No more than 150 KB. This size
is not based off the compress size. It is based off the decompressed
size of your JavaScript. It is not a tremendous amount of room
but we think it is plenty to accomplish a ton. So, why 150?
First off, we are being a bit conservative up front. If we
find this rule is too restrictive through testing, we
will be able to loosen it but that is only if we
are absolutely certain it will not impact performance on low-end devices. The second, the internet in
general is a wash with JavaScript. As an industry we
chose this particular tool more frequently than we should.
The impact of JavaScript is far greater byte for byte than any other
resource type on the web and left unchecked the size of
scripts will have an adverse in pact on the loading performance
of amp-script document segments. We are also concerned about
parse and evaluation time of this JavaScript and want to make
sure the low-end devices continue having a great
experience using AMP. Next number is 0. This is the number of mutations
an amp-script is allowed to make without user interactions. The idea here is just like in
AMP thinks will not change unless you as a user click or
interact with the document. If this rule is violated in
custom JavaScript. If there is an attempt to mutate
the document without user interaction, the JavaScript is
shutdown and destroyed and the amp-script is left inert in
the last script it was in. The trick is to make sure amp-script
doesn’t do things that are unexpected. If you have a
statically sized object on screen that is an amp-script and
it is below a certain height we will allow it to mutate as much as it would
like to. The reason is it is perfect things that use web socket connections to
update status. We think this is a large use
case not addressed today within the AMP
ecosystem. Next number, 5 seconds. This is how long custom
JavaScript is allowed to make mutations after an event has
been registered and fired. The reason for this is that we don’t
want users to have a long wait between their click and the actual
change being seen on the screen. If you violate this rule again
what happens is the amp-script component is shutdown and left in the last
state that it was. Again, there is an asterisk.
This one is fun. Whether you get a click event,
sometimes you need to ask the server what to do. We recognize that and when a
fetch is initiated within this timeline we will extend the
duration of the allowed mutations until the first bytes
of the fetch come back plus five seconds. If you need to fetch something
from an eventevent, go ahead. The next is asynchronous layout. Typically the term is
synchronous layout but it is running in a worker so it is all
asynchronous. In JavaScript often you need to
know the client position and size so you can do calculations
to understand what to do with it. In this case, our div is going
to ask for its client’s rec by using
the get bounding client rec. This method doesn’t exist in
amp-script at all and here is why. When we are in the main
thread and we have a div like this that needs
to know its clientrect it asks directly. Sometimes the browser must re-layout that and
JavaScript can be halted her held on to until that value
comes back. This is a little different in a
worker environment. Now we have the div element inside the
worker. We are going to request the
clientrect. In order to get the data we
don’t know that information in the worker. We don’t have access to computed
layout and need to send a request to the div and the main
thread for that information. It will find out its layout
synchronously and communicate it back to our worker afterwards and back
to the div element. This can take time. It doesn’t take much time but it
can. As a result, we would like to make sure programs are not reliant on
synchronous behavior so instead of using div.get-boundingclientrect. This returns a promise with the
clientrect so the moment the promise resolves you have the same data
you would have the synchronously. That was fun. Let’s get into something a bit
more practical. Let’s start with frameworks. We worked hard to make sure
worker DOM is an implementation not spick
to your needs and amp-script supports
popular frameworks. Preact, React and Vue work well
out of the box and we with working with
authors to make sure we are not doing
things within amp-script to make their code. This is implemented in Vue and
Preact. As you can see, things work as
you would expect, however, all of the custom JavaScript is running within the
worker and it just works. It is pretty cool. Next we partnered with our
friends at the “Washington Post. ” They do an amazing number of
interact articles with charts and data graphs and things that
were difficult to achieve in AMP documents beforehand. We ported one of their more
recent articles. This has a bunch of SVG charts
you can interact with and change the DOM through those
interactions. You can go to the top selector
and change the date to the year you
were born and it will change all charts. The text values are
changing to represent data point that are collected.
There is also a video embedded within the page and when you
watch the video you can use the controls as you would expect. This is a perfect representation
of what we think amp-script is great for. It is something that can take
documents that were 95% of the way there and get them to the last 5%. E-commerce is really
important to the web. We wanted to see if it was
possible to use checkout flow using AMP.
A member of the team worked on this specific demo. We have an inline multi step
checkout flow. Just pretend we clicked on
something to buy before this started. This would pop up and
allow you to complete the information and
send something and we will be able to complete the entire flow. You can go through all the
information of your address, name on your
card, and things you would expect flow. When I hit verify here, the next
thing that will happen, I am sorry, confirm, the next thing
that will happen is you will see successful conformation
of the purchase. Next is talking about how the
web used to be. I really loved Geocities and
kind of wish it would come back. We have a person on the team
named Allan who feels the same way and he built a demo called bling.col
and this is a conversion of that demo. The interesting thing
about the demo is not that it looks cool but it is the same
codebase that runs in the non-AMP and the AMP version.
Both are the same which means he can ship just an AMP-first
representation. How fast is this. We are sending messages
back and forth between threads and there is a
lot of computation going on. It looks like a lot of work, right?
It can’t be efficient. Transferrables and array buffers
are very efficient and only getting better with continued
investment from teams like V8. Here is an example of a popular benchmark called DBmon and this
plush as ton of DOM rights to scene. This
implementation is running inside amp-script and has a steady 60
frames per second. It workss well and the main
thread is using a small amount of memory.
How far could we go? Talked about how fast, talked about
what you could use it for, we have seen interesting examples
that are practical and fun, we wanted to see how far it could
go too. How far could we push the limits of this technology? Erin built an immoulater and it works as you
would exec. This example is not small enough
to go in an AMP document. We think this is beyond the limits
of what you would want to do an on
AMP document but it demonstrates the technology is capable of
doing far more than what we thought initially. When is this going to be able?
Malte talk about this earlier but it is available today. You
can try it out now. I am very excited to hear your
feedback. I think you will probably run into thinks that
need to be fixed, or need to be addressed, and as a result we
are opening it up as an origin
trial. You can go to this URL and register for this domain and we will send you
an origin trial token. We want your feedback and
wouldn’t to hear what is hard and what work and what doesn’t.
We are looking forward to hearing from you as you try it
out. I am very excited to have been here to talk about
amp-script. Thank you so much for having me. YUSUKE USTUNOMIYA: There is one
more thing I would like to correct. I went upstairs and when I was
talking on stage, I said 2:30 but it is actually 3:30 is the
correct start time. So, just to inform that. I would like to correct that.
CRYSTAL LAMBERT: JavaScript is finally available in AMP! Whoo! A couple quick things here. On
the sli.do, I don’t see any questions. There must be so many
questions you want answered so, please, start asking them. We
can use the app to ask you questions and we have one upright now
which is if you describe AMP in one word
what would it be? Please submit that in the
sli.do. Coming up next, we will have a coffee break.
There is coffee available right out there. Before you go, keep in mind, we
will ding a bell like this, come back, come back.
It is hard to do one-handed. That is your signal to start
coming back in and take your seats back here in the main
session hall that way we can keep on time and make sure our
livestream viewers can participate as well. YUSUKE USTUNOMIYA: So, we break
until 11:00 so if you could look at
that we’re he go. See you back again. Check out the booths and
tutorials as well. The glory of amp-script: Test test YUSUKE USTUNOMIYA: Awesome. It
is everyone back in their seats? Was the break good?s everyone
back in their seats? Was the break good? How was your break? Are you able
to speak with different people? I have been looking at the
Twitter trend. We are up there. Thank you so much. I would like to get to the next
session. I won’t talk too much. Our next speaker is — next session —
MELISSA DEPUYDT: Hi, everyone. My name is Melissa DePuydt and I
am really excited to be here with you in Tokyo and on the livestrea. Hi,
mom and dad. I am be sharing about a mindset
I call AMP Core. My team developed it at the “Washington
Post” on our arc publishing tool. We use it when we go into
clients and build sites on top of our tools.
We have heard a little bit about “The Washington Post” already
today so no pressure. You have heard from Malte that
the Post recently won a Pulitzer Prize
for content published via AMP
Stories using technology that is our arc publishing software.
That is the team I work on. Arc publishing is an
award-winning state-of-the-art digital tools for modern
publishers. I have been on the team for
about three and a half years. Specifically where work on our
professional services team meaning I get the honor of going
into other publications and working with their stakeholders to bring new
experiences to life on the Arc Platform. Over the course of the last
three and half years, I have had the opportunity to work on
implementing some of the greatest websites for publishers
on Arc. It has been a real honor both
big and small client in moving them over
to Arc. I didn’t start out as a technical architect. I started
out as a boot camp graduate when I got my offer from “The
Washington Post” it was in October 2015. It was to the day coincidentally
tied to the same day I got my offer
was the day the AMP project was announced. So, you can imagine my kind of
trepidation knowing I was going to be working for a media
company and learning about this new project that the Post was part of at the very beginning
and learning that the skills that I had spent the last few months
learning would not be part of the AMP spec with
JavaScript and limited CSS. I saw this as a potential point of
frustration but as I started to work with AMP in projects over
the last couple of years, I have been really excited to come
around to this mindset that AMP is more than just limitations.
It is actually aligned with some of the best practices for software
engineering. Chances are you have been on a project that
sounds a little bit like this. You get a set of requirements
and you are told the site has to do X,
it has to do Y, it has to do Z and it also
has to be AMP compliant. In this kind of waterfall
delivery style, AMP is often an afterthought in requirements. It
is not something that is up front and center yet. So, what happens when AMP is an afterthought is we built a
default or non-AMP experience and come back and say oh, yeah,
the AMP part and dive straight in the technical spec. That is a reasonable thing to do
as engineers; to go and read the
documentation but when we go straight into the technical
limitations of AMP, we miss the bigger picture in
seeing what AMP can offer us as engineers.
So, what happens most of the time when AMP is an afterthought is we end
up maintaining two different sets of code. This is something
Paul mentioned in his intro. You have your non-AMP and your AMP
experience and pushing more people to go AMP-first. We have seen this shift from mobile-first or as mobile-first
has grown we have gone from having a
desktop site and a mobile investigation
to just having one –version to just having one version that is
responsive. That puts some restraints on the
chaos a little bit but I still have issues with mobile first and that is
why I started calling my mindset AMP Core. The AMP Core Mindset
is one that is based on AMP’s design principles. What you heard from Malte
earlier was a little about the vision and values of the AMP project and under the
hood AMP also has guiding design principles that help them make
consistent decisions. In the AMP Core Mindset you use
these design principles to help you align with stakeholders
across teams at the very beginning of the project and
then the downstream impact is that you see performance
benefits on both your AMP and your non-AMP renderings. But before I go any further, I
want to clarify AMP Core as I will present it is not the same as the AMP first
mindset you have heard about. In AMP first that is the only
version running but in my team, and I
suspect many organizations, having a
canonical AMP experience is not an option at the moment. That is
where I think AMP Core is really powerful. It let’s you take all
of the guiding principles of AMP and distill it
into a mindset that can inform development for your paired
sites. I have developed this mindset in projects with paired
sites, AMP and non-AMP and that is not necessarily a limpitation
— limitation of the Arc platform
but just the state of the projects we worked on. The AMP Core Mindset starts out
with a process I call AMP design thinking. If you are familiar
with the concept of design thinking, it starts out with a period of empathy and learning
what matters in a project. I think of it a little bit like
this marble. When you have so many different
competing priorities they all get blended together and it is
hard to sus out what really matters on a project. With the
design thinking process, you can work with your stakeholders
across teams, so not just engineering managers but people
from product and marketing and advertising and get everyone
to buy-in at the beginning. Once you get stakeholder buy-in
on the principles and priorities for a project, it tends to limit the scope a
little bit but at this point you should be thinking much more in the abstract and
not even looking at the technical limitations because
stakeholders don’t actually care about the technical aspects. They care about what it means in
a language they can understand. That is why the design
principles are valuable because they communicate the things you
care about to your stakeholders in terms of things they care
about. Once your stakeholders have bought in that is when you
can get down into the technical specifics. I will talk more about what that
looks like for us at Arc but the first thing I want
to dig into is the design principles. They are a way of
capturing the guiding light and vision for a project in language
everyone can understand. Typically they are going to be
able to express the intent for the people involved from the
beginning so they can inform future decision making on
a project. This is not a new concept within
software engineering as a whole. If you think about the zen of
Python those are design principles. If you think about Ruby on Rails
or the model view controller mindset, those are design principles within
software engineering that we use to make
internally consistent decisions. That is a phrase I have used a
couple times and I borrowed it from our friends at Google. When
I was digging around for information on software
engineering design principles I kept coming
back to this quote from Google on their AMP website. It says the design principles
guide the ongoing design and development of AMP. They should help us to make
internally consistent decisions. To me, this was a light bulb
moment. I realized I was frustrated on
projects that didn’t have internally
consistent decisions. The project didn’t have design
principles here to guide when things got tough. I realized
that all of the projects that frustrated me were the ones
that had erratic decision making with
the priorities changes. The design principles are meant
to be the underpinning for all OV the
decisions on a project. When I think about design principles
within software engineering, I want to get really vague. I am
not talking about limits on CSS, or limits on JavaScript, but
really kind of the core thinks that we think
of as priorities as software engineers. Now, I am a front-end
engineer so I will speak specifically to my experience
but these are some of things I think of as software engineering
principles. I like to remember the user experience and keep in
mind who is going to be using my product. I also remind myself, time and
time again, to keep things simple and
to not repeat myself. From a performance perspective,
I like to remember that things should
be efficient, that my code should be clean, and that if
something fails, it shouldn’t break the whole application. So, unsurprisingly, the AMP
design principles line up almost 1:1
with things we would consider engineering best practices. AMP
has design principles that say the user experience is greater than
the developer experience, that we should design for the
browsers we have, not for a hypothetical future, faster
browser. They say it is important to not break the web and render things on the
right layer. Those are all things that matter
to us as engineers but expressed in
terms that matter to stakeholders. They don’t mention
any particular language, or any size limits, they are a common
way for us to express our priorities to stakeholders
across teams. So, I didn’t just magically end
up at this mindsetmindset. It has been
quite a journey over my time at Arc. I started out as a very
junior web developer and have worked up through the levels at the Post to where I am
today. Over those years, I have gotten to work on some pretty awesome projects
and helped develop this mindset. We started out with our very
first implementation of AMP on our
client iinfobae.
They have more than doubled their traffic on all platforms
since moving to AMP. We built their non-AMP site first and afterward they came to us and
asked for two sets of components. A funny thing happened as we dig
into the technical spec In the absent of
requirements, we can build a fast website that wasn’t necessarily
AMP compatible. That wasn’t what they wanted because they wanted
AMP specifically but that was the light bulb for me. The AMP was something we could
use as leverage in conversations with stakeholders. It is a common framework that is
already in production and has all the things they want and
gives me the things I want. Speed on this site and
performance benefits. I knew that I wanted to take
this idea a step further and I got my
chance when we worked on the Tribune
interactive projects. Tribune Interactive has many
different publications in the U.S. including the New York Daily
News shown here. Right from the beginning we wanted to take AMP as priority. We did
that by going into the our discovery process with the
design team and establishing what some of their priorities
were. Their priority in this case was
a consistent brand experience
across all rendering tiers for them. In order to accomplish
that priority, we sat down with their design team and decided we
would follow a design system. The design system would have the
guidelines for us to implement against but then we also got to
walk away and say we were going to impose a technical limit on
that in order to have consistent branding we needed to
use the design system across both the
default and the — or the non-AMP and
the AMP version of the site. We built that accountability into
our build process with a web pack
size limiter and that was very helpful down the road when we
encounter things in the design system that just needed a little
tweak or added a little CSS. The size limiter gave us a really concrete way to say no, this one
tweak, or one extra thing actually violates one of the
principles we set out at the beginning. So the conversations we were
able to have with this design team were
so much more fruitful and productive
throughout the project because we agreed on those things up
front. Now, with this project, we still ended up creating two
sets of components. One for the non-AMP rendering and one for
the AMP rendering. We still had a little bit of a
ways to go in order to really flush out
AMP at the core as a mindset. We got
that opportunity with our client in Germany, RTL, last year. RTL is one of Germany’s largest
broadcasters and they came to us to launch a new experience for
their users on the web. We had a really tight timeline but we
knew that AMP was a priority up front and we knew we wanted to
launch AMP at the same time as the default or
the non-AMP experience. So, what we ended up doing was
taking the design system idea from
Tribune and pairing it with this idea that all of our components should, by
default be AMP compatible and only certain components, like
the video player which you can see it looks a little bit
different between the non-AMP and AMP versions. Only the
components that need to be switched out should even have a
duplicate rendering. This led to us being able to
launch the AMP experience at the exact same time as the non-AMP
and makes it easier for us to maintain in the code long-term.
So, we are not at the point with any of our projects where we are doing
a canonical AMP or AMP-first implementation but that is what
I think makes AMP Core so valuable. It is the logical extreme of AMP
first for any client or any
organization that isn’t able to take advantage of
AMP First. Instead we are able to take
advantage of the guiding principles for the AMP project
as a whole. What I want to leave you with is
concrete steps you could follow to implement the AMP Core Mindset
at your organization. I will use the example of a
hypothetical publication needing to redesign or replatform their
website with a certain set of
priorities. So, it might look like this. We would start out by gathering
a cross-functional group of stakeholders where we get together and
discuss the principles and thinks that
matter to us. This might be different from a different
perspective for product. It might be the design and the
branding. For advertising, it might be the
speed with which their ads load, but as the discussion unfolds,
you will want to make sure that you are not actually getting
into the technical specifics yet. This should be the high
level, what matters to us in this project. Then once you have some kind of
coalesing around certain principles you will want to lay
them out as the ones that are your project’s design
principles. You need frame them in the way that works for your
organization. I like to go back and revisit the AMP design
principles at this point and figure out which ones we are
gravitating towards. In the example of a publication doing a
redesign project, one of the priorities or principles they
might agree on is that the pages should load quickly. That would be the most abstract
way to say the site should be fast. Then you might get a
little bit more specific and say pages should
load in one second. You could even get more specific than that
without getting technical and say pages should load in one
second for first-time visitors or for
repeat visitors, or pick a specific metric that you could measure whether that
is time-to-first-paint or DOM complete. Whatever it is for
your organization, make sure it is framed in a way that everyone
can get on board with. Again, that’s not just everyone
who is an engineer. That is everyone from every department
that has a say in the project. Only at that point should you
walk away from the table as engineers and determine exactly which
technical guidelines you will need to follow. At this point, this would be
where you would say — if we want pages to
load in one second, here is exactly the
performance budget we can afford. Here is the HTML, the CSS, and
the JavaScript that we can afford to send to the browser on
that first load. And then, bring that back to the
larger group so that you can make sure that everyone is still
on board with what that means. It is really easy to be on
board, of course, with saying my pages should load in one second. It is a little bit trickier when
you realize that you only have a certain amount of HTML and CSS
and JavaScript to work with in order to achieve
that goal but if you have already aligned on the goals up
front, it should be much easier to get that buy in from people
across teams. The last step, and arguably the
hardest, is keeping everyone accountable. I think the easiest way to do
this is to build accountability into your regular
process. For us, we run part of web pack
process and CI/CD servers and we are
never able to scoot around it or ignore it just once. It is
something we are constantly thinking of. We also like to bring it up at
regular stakeholder meetings making sure everyone is still
aligned with the things that we agreed on. When
push comes to shove, and things get little bit tricky to deal
with, we can always go back to the most
abstract versions of the principles and remind everyone
we are on the same team and all agreed on these things at the
beginning of the project. Now, the AMP Core Mindset might
look a little bit different at your organization and it may not
feel like the right thing for your team. What I can tell you, though, is
that with the AMP Core mindset, you will have the best chances
of keeping yourselves aligned with everything that AMP stands for which is software
engineering best practices in general. So, I would like to
thank you guys for taking the time to listen to me today. Feel
free to find me at the conference and chat about Arc,
about AMP Core, or about anything else. I really appreciate the time. Thank you. [Applause] CRYSTAL LAMBERT: Thank you so,
so much, Melissa for that wonderful talk. When I first met Melissa and
heard her story, I immediately felt this little bit of a kindrid spirit. Little
known fact. I have a background in journalism which a lot of
people usually laugh at that because it is like how do you
wind up working for a web components
framework at Google? And it does have a similar
journey. I started writing and getting more involved and being on the web
and getting extremely interested in what is going on out there
and realizing this is such an amazing platform for how people
are able to communicate with each other. Where — I started working at a
non-profit in San Francisco. This non-profit had a really
great mission. It was to help other non-profits meet their
technology needs. Sounds great, right? Because often people working at
non-profits have low budgets. They don’t have a lot of
technical people on hand. We were there to help them figure
out what it is they needed to do to
get that non-profit running. We had a website that worked as
their hub where they could come and see everything that was
available and pick out what it was that they needed
for their use. This was intended to give them
more time and more focus on doing what they really wanted to
do. So, a lot of them were child
shelters, a lot of them were homeless
shelters and some of my favorites, animal
rescue non-profits. We really wanted to give them that ease of
technology that enabled them to follow their mission. My job was
answering the phones. Every day I got the same
questions every and over and over. They were also
frustrations with our website. I can’t figure out how to reset
my password. I don’t know how this navigation works.
Yeah. I can’t figure out what it is I am looking for on this
website. I started getting list of all these questions and
realizing that this isn’t the fault of our users. Our website
is confusing. That is when I decided this is
how we are going to help people get
where they need to go and that is by
helping the website accessible. I went to a boot camp, just like
Melissa, and learned web development. Finding out about
AMP was so inspiring because it is such a great way to enable these great features that just
make your websites work in fantastic ways. So, I think we are coming up on
time. We are going to — speaking of people and the web and AMP, I am really
excited to introduce this next talk. It is going to be by
Andrew, our resident AMP designer, about how
we balance the developer’s experience, and the end-user’s experience with
AMP and how it works. Please welcome — please join
me as we welcome Andrew to the stage.
ANDREW WATTERSON: Hey, folks. My name is Andrew Watterson and
I am a product designer with the AMP project and I am excited
about making AMP a great experience for everyone. So I
just kind of want to start with the statement that AMP is here
to improve the quality of web
user’s daily experience. You have heard about a lot of stuff,
more to come but it all rolls up into this goal. We have one of
our design principles that talks about this. It says that the
user experience is valued over the developer experience and
both of those things are valued over the contributor experience. If you kind of read this diagram
backwards it means we as the contributorerize making stuff
for developers and users and as developers you can make stuff
for your users. That is what I want to talk about today. I want
to talk about how we design for the user experience. I want to
talk about how we design for the developer experience. And then I
don’t want to talk about the implementer experience. I want
to talk about how you can help because this is really important
for you as well. But before I do that, I want to sort of set the tone for how we even
think about design in the first place. If you kind of look at
the two sort of ends of our process. One end is at AMP makes stuff
and the other end is people have a better experience. It is not
quite that simple but that is what we are going for. One of
those things is that in order for people to have a better
experience, we really need to go talk to real people, right?
There is all kinds of different people, you know, even from
minute to minute that have different attitudes
towards things. There is different types of folk in the
world. We do a lot of our UX work out of Google and you can
see here this is actually just a Google tent set-up on the
street. You can just tap folks on the shoulder and ask them to tell you about
how they use the internet and what their experience has been.
That really informs a lot of the stuff that we do. So, like I
said, this is a little bit wrong and too simplistic. I want to
propose a different diagram which is that we really have
these three steps. One thing you will notice about this diagram
is it that it is a cycle. We don’t make stuff, put it out
there and walk away and whatever is out there is what you get. We want to coonwant to
constantly be refining and improving things. We want to
number one identify a problem. We want to identify a user
experience that could be better. Then we want to make something
that improves it and then we want to measure and actually
make sure we improved it. Again, it is very difficult to kind of understand whether or not you
have made real changes that improved the lives of the people
you are trying to improve. We need to go through all three of
these steps. The reason this is so important
is because AMP is opinionated. We are just just a pile of parts
on the floor that you can pick up and make a website. We have
very specific ideas about what you should and should not do
when you are implementimplementing
experiences for your users. AMP is opinionated so we need to
make sure these opinions are not wrong. Opinions can be wrong. We
constantly need to be very curious and always testing to
make sure we are doing things the right way. So, yeah, be
curious and set yourself up to learn. That is kind of the guiding
principle we approach all of the design
work we do on AMP with. Let’s talk about the user experience. All these users. User experience
answers the question how does it work? I mentioned before, you want to
find an experience you think could be better and then figure
out what is our strategy for solving this. It turns out we are web
developers so more often than not the thing we will make is a
web app that consists of screens we want to guide folks through
in a particular order. On those scene —
screens we are buttons and all those things. The user
experience of design answers a question of how does it work
from a high level all the way down to what color should this
button be. And one thing that is really interesting about AMP is
in order to have these good user experience ideas we can’t just
have like, you know, an idea about how to solve one
particular problem and then we just go solve it. AMP is on a
million pages. We really have to constantly be optimizing for as
many different use-cases as possible. We are actually
solving, you know, thousands or millions of user-experience
problems at once, and then we have to sort of take all that and boil
it down into a single set of components
that work across all these user experiences. We are rethinking the way
amp-carousel works. This is one of our more popular
components. If you are not familiar with carousel, it is a
gallery of media. We have a photo and arrow buttons you can
swipe or page to different photos. When we started this
project, the engineer that I am working with came to me and was like I figured it out
and thought about how to do the
carousel customizations. You can show slides, arrow buttons or
not, we could position the media if it is like different sizes in
different ways, you could have different interactions and like Naheed all
these ideas immediately — he had all
these ideas. As a designer, it is great have
to engineers that can implement stuff you want to make but if
you start at this abstract level, and imagine what does it
even mean to be all possible carousels at once, you risk not
solving a human problem, right? So you always want to focus on
what you can do. What you can do and what you can implement is
very important but you never want that to distract from
what you should do. You never want that to distract from what
is the user experience we are actually trying to enabling. We
tried to focus on specific-use-cases. We wanted to
brain storm what are the user experiences we are trying to
enable with AMP carousel. One is we have a lot of AMP
publishing sites often on a news article you will have a gallery
of media you want to be able to get through. Just home pages. A
lot of times companies will have a gallery of featured products,
deals or events they have put on. Related products.
If you are on a shopping site, and you sort of go through an item and
it not quite exactly what you are looking for, you might be looking to look at
related projects. And then recipes. We have not seen this
quite as often on the web but thinking Hey, you have a gallery of media you can page
through it step-by-step and that is like doing a recipe. We
wanted to support all these use-cases and imagine what if we
had a carousel that supported recipes.
What would that look like? For and all these others as well.
You can kind of see we were able to draw out what we thought a
pretty good version of all these different
carousels would be. They all look a little
different. They have different layout choices and all that but then of course we
want to do better than imagine. It is not enough to sit in our
office and draw out carousels. We went to a coffee shop, tapped
people on the shoulder and said can we talk to you about how you use the
internet for 15 minutes and people are always
really cooperative. What we had done is we found a
list of carousels we liked on other
people’s websites that were similar to what we were imaging
for our AMP version. We were able to go to people and watch
them use these websites and not talk about the carousel. Just be
like you are on this shopping website, what do you notice? And
see how they react and once they hit the interaction with the
carousel, what are they doing? How much are they enjoying it
and able to solve whatever user problem we set out to solve? If
you have never done this, by the way, if you have never gone out
and watched someone use your product
not in a sales or demo setting, it is
super awesome. I am sort of an introvert and I don’t like talking to people that much
but I always get back and I am like man, we learned so much
stuff and now we know what to do next.
You learn two categories of things. One category is you
learn what you wanted to know. You have these questions about
like, what is good and bad about my product? You wonder this
stuff when you are making it. You can learn what you want to
know. In our case, we were wondering
if people would be able to find a carousel. You have this image
but there is more stuff behind the image and more
images you can page through or get to. We wanted to make sure
people would be able to understand that something was a
carousel. It turned out from the studies
that we ran no one has any problem with this. People have
been using carousels, particularly in the use-cases I
mentioned before, all over the internet. They are there. They
do not need help finding a carousel. We didn’t have to make
the arrows really big or do a cool
animation saying there is more content here. We could cross
that off our list based on the feedback we got from users.
We can cut off what had been hours and hours of discussion
about how big do we want the arrow buttons to be by having those conversations directly
with real people. The more exciting category of stuff that
you learn is you learn what you never would have asked about in
the first place. Stuff we were not wondering about in our
office actually came up in these user research studies. So, in this example, it was that
as folks were navigating through carousels they would be like,
man, I really wish I understood where in the carousel
I was and how many more slides there were.
One participant went so far as to say if I am going through all these
different slides and I don’t know how many are left I feel
tricked. That is a red flag for us. Users feeling tricked is not
something we go for. We don’t have a design principle
about that but it is safe to say we don’t wat that. That is
something we had to put on the radar and go back and say what
is our story to always make sure people know where they’re in a
carousel. Sorry, there is some Japanese here too. Then you take
all these insights back to your office and turn them
into an uz — into a user experience design. There are more technical aspects
of this process that I don’t know want to talk about today. I want to talk about designing
for the developer experience. So, I said this before. AMP
makes stuff and then users have a better experience but we are
at a developer conference, essentially, so you may notice there is
something missing from this diagram. Who knows where it is?
We are at a developer conference. What’s missing? Its developers. AMP cares about
users but we are not really a user-facing product. None of the users that consume
the AMP websites out there don’t know they are using AMP and we
like it like that. They don’t need to know that because that
is a technical detail they don’t need to care about. AMP is
making stuff for developers to implement a user-friendly
experience. Everything I said about designing for the user
experience and understanding what the problems are and how we
will solve them and making sure we
solve them successfully that applies to developers too.
Really, we are here for you. We need to make sure that the
experience of actually using AMP, of developing with AMP, is
just as good as this user experience we are
trying to accomplish because really, we could make all these
cool components that have a really fantastic user
experience, and if developers are not successfully using them
in their sites, it doesn’t really help us. We have not improved the user
experience of the web by making components that developers can’t
use. How do we do this? We are not brand new to this
problem. We have road shows and go all over the world. It is
particularly interesting to go to places that don’t have a
strong tech community and talk to engineers and developers who
are using AMP about how that is going for them and what their
sort of unique issues are. ed wewe — we also have a
GitHub. AMP is an open source project. A lot of planning and
features folks are asking for and bugs folks are reporting and
are we going to fix them? Or not fix them?
All that discussion happens out in the open on our GitHub. We have a Stack Overflow page as
well. This is where developers say I am trying to implement a
thing, trying to use AMP to do that, and can’t figure out how
to do that. That gives insight into two things. It is really
hard for us to know what people are trying to make with AMP. We can go through the whole AMP
Cache and look at all the URLs on AMP and see what people did
make with AMP but it is very difficult for us to know like
what are people trying to make with AMP and are not able to
make with AMP? On Stack Overflow that is the
best way we have to figure it out. If someone is sort of
trying to make something and can’t figure it out then either
it is because we don’t have that feature yet and we can have a
discussion about do we want to add this feature so this
developer can make this user experience or it is just because
we haven’t explained how to use AMP
to make that thing well enough. Turns out the explanation is
really important as well. I want to modify the statement I made
before that AMP is here to improve the user experience of
the web. That is still true but from the developer side, AMP is
really here to allow developers to get to that good user
experience faster. We really want to increase the
speed that you guys can get to your
sort of final goal. Nothing about AMP is magic. AMP is just
sort of a JavaScript library. If you put in a lot of time you
could probably go home and write it yourself. We don’t want that.
We want to build these tools so you don’t have to write it
yourself and you could focus on the user experience you are
trying to deliver to your users. So,I want to come back here and
I want to just sort of reiterate all these steps apply to the
developer experience. What is an experience you have while coding
that could be better? We want to identify those things
and be very aware of what that is. Then we want to make
something that improves it. Hopefully the AMP library as a
whole makes that a little bit better, otherwise you probably
wouldn’t be here, but we want to make sure we improve this and
keep doing that over and over again until using AMP is
literally the best coding experience you could possibly
have. That sounds hyperbolic but that is actually our goal. Let’s
talk about what we need to know in order to figure that out and
make that happen. The first thing we need to know is what
are you trying to build? There is sort of this diagram
where there is stuff AMP is good at
and then there is stuff you care about and we hope there is
something in the middle of the diagram. AMP has been focused on speed. Two years ago, if you were a
publishing website that wanted to be fast, AMP was great for
you. Since then we expanded into e-commerce and we are sort of
going around and pitching folks and trying to get in the
conversation. Are you even considering using AMP? Does AMP
even sort of help solve any of the things that are important to
you? That is something we need to keep tabs on. Actually,
really interesting anecdote about this, we had folks from
Google go out and talk to the thousand biggest websites in the
U.S. and say Hey, use AMP, it is fast
and great at all these thing and many had large engineering teams
that have figured out performance and made an
investment in performance and they were like our website is plenty fast
and I think that is interesting. I would not expect there to be a
lot of particularly large companies that were done with
website performance. That reiterates we need to make sure
we are solving the problems that folks want to have solved. That
is the strategy question. Did we get our strategy right? Is AMP even in the conversation
to begin with. So the second thing is once you have decided
to use AMP, what’s standing in the way of you building the
thing you are trying to build with AMP? I mentioned these
use-cases before. If you are build agnews gallery, if you are
building a related product gallery, we are here for you. We
have got this. It is on our radar and we will
make this. We have this other sort of
similar diagram which is stuff that AMP provides and components
you need and up until an hour ago when you saw the amp-script talk it was very difficult to
integrate external code and anything AMP didn’t already make
for you into your AMP page. We really need to make sure we
have as full coverage as possible in this diagram. We
need to make all the components, all the pieces of your page that
are important, we need to make sure we have components that
support that. And so, one example of this is
we recently released docking in
amp-video. We went out there and thought
about what are the experiences it is hard to implement right
now and one of them was this thing you have probably seen
where you are playing a video, maybe
making a recipe, trying to grill eggplant
and as you scroll up and down the page, that video can stay with you and sort
of shrink itself and you can STIFL
still watch it. We saw there is no way to do
this in AMP. We had to go out and add support to the amp-video
component. We lunched this about a month
ago.watch it. We saw there is no way to do this in AMP. We had to
go out and add support to the amp-video component. We lunched
this about a month ago. That is the detail level
question. What is standing of the way of
building whatever design you need? Its components and if we
don’t have the components you need, we need to figure out how
to make them. The third question is what makes developing in AMP
a pleasure or a pain? We don’t want to stop at are we even in the conversation or is this tech technically possible. We need to explain the
customization wells and implement them with a syntax that makes sense and isn’t
leaving you scrolling through 15 pages of documentation and
scratching your head to figure out how to make the carousel do
the thing you want it to do. The sort of example is we added
infinite scroll to amp-list. When I hit the bottom, you can
see it automatically loads new options and you can see the
scrollbar is constantly becoming a different size. We actually worked really
closely. This website is Aliexpress and
we worked with them to figure out
how can we make this component really work. Not just meet the minimum bar of
functionality. We were working with them
closely while we were imp lementing this and they sent us
feedback every day. Working closely with developers to make sure this works for real folks
when they are at their keyboards coding is an important part of the process. We have the AMP team we want to
help you build this stuff. And we have you, who are the
experts on your own product and business, who need to be able to
decide what to build. In order to have this conversation where
you tell us what you want to build, and we sort of tell you
how we think you should build it, we need to be able to
communicate about these things. This is the biggest thing I want
to highlight today. If you are thinking about talking the AMP
team, we want to talk to you. We have a booth that is
somewhere over there. I don’t know what direction it is. We
will be standing there for the next two days and we would
really love to hear about what your experience with AMP has
been. What are the good things? What the are bad things? What
are you trying to build and were not able to build and how can we
help enable that in the future? We are also taking sign ups at
this bit.ly link or over at our booth. Leave your contact
information and we would love to get in touch with
you later. We are really here for you and this is a very
important part of the job that we do in making AMP. This is so important I am going
to turn this slide green. If anyone is asleep. This is. Come talk to us, please. And
then the sort of second part is how does the AMP team talk to
you; right? How does the AMP Team
communicate about how we think you should actually be building
these user experiences you are trying to build. The first thing is
documentation. If we made all the best components that had all
the greatest user experiences that wouldn’t help us that much
unless developers are able to use them to implement our
websites. If you ask people what the AMP project makes, they
might say a framework, they might say components, but
really, the documentation is as important a part of our product
as any of the other stuff that we make because we really need
to show you for a given design how to make that, what
components to use and how to successfully implement those
components. The second way we can communicate is using the component APIs
themselves. So, again, if we think back to
these customizations and let’s imagine there is eight of them.
Building a new AMP carousel and we have eight different things
we want to customize and just for the sake of argument we will
say each is true or false. Eight binary attributes on this
component. That gives us 64 possible
carousels we can make with this new component we are making.
That is great. Some of those are going to be a really great user
experience and those are the ones we want to push you towards
and encourage you to implement those carousels on your page.
Some of them are going to be a fine user experience. They might
be appropriate in some context. And some of them, just because
the options don’t always match up that well, some are just
going to be a bad user experience. We don’t want folks
to kind of implement on those pages but
because of the way the component design has worked they may be
possible. We want to steer you Iowa away
from the red and toward the green. We can do that by
providing strong defaults. We don’t want there to be a huge
ramp out or pour out the Lego set of AMP carousel and have to
stare at the pieces to figure out how to get the thing you
want. We want you to open the box and
have this Lego jeep come right out. It is important to notice
the Jeep on the right is not any less flexible than the thing on
the left. It is just already built for you. If you want to
customize it, build it a different way, you can take it
apart and do a new different thing. It is really important
that when we have attributes in our
components that whatever you sort of — when you just type in
I want an AMP carousel, we can get you to a reasonable
experience and then you can decide how you want to
customize. The other thing I would say is if we want
developers to move faster, which is what we had we wanted before,
that often means making things simpler and making things
simpler means fewer options and fewer options sounds scary.
Nobody wants fewer options particularly not engineers. Let’s talk about how this might
look in sort of a component framework. So, I have used this attributes
picture a million time. These are the sort of
customizations we want to go for. Let’s imagine that we are making
a component that is called AMP base carousel. It is pretty
focused. It is focused on making
carousels. It has all these customizations
and takes some learning. You have to do some figuring out
to get there carousel you want. The silly dot diagram shows you
can get good carousels, medium carousels
and bad carousels. This is the way we approached
component designing in the past. But we made an observation going
through all these use-cases, we really thought about what user
experiences we were able to enable, and we
realized there is two different types of carousels. There is one type we are calling
AMP inline gallery that folked on
one piece of consent. It is like the homepage or news
gallery slide. The second is more leisurely options you can
swipe through and chose what you want. I mentioned strong defaults. It is difficult to make a
carousel component with both of these ready to go by default. To
make a component that has options that are sort of easy to
understand that sort of enable both of these
use-cases. If we break these out into two
different component, we have two focused components that each
have some customizations but they are easier to learn because
in choosing the component you want to use you told us about
the experience you want to make and we can hold your hand and guide you
through making that experience easiererment you can see the dot
diagram on there bottom. It enables as many bad use-cases
while enabling all the ood use-cases. I think the continuum wouldn’t
be complete without talking about all AMP JavaScript. In contrast to the two
components I mentioned, all possible JavaScript has no
focus, right? You can make pretty much literally anything.
It has got infinite flexibility but take as really long time to
make those things. It is very difficult to learn,
to develop, to debug and do all
these different things but from a
developer perspective, all of these
options are available in AMP. Inline gallery and stream
gallery are coming in a few weeks. AMP is opinionated. We have opinions and we think
using the simplest component that is
relatively opinionated is a great way. We give you
flexibility to use the more flexibility but harder to learn
base carousel or to roll your own
carousel in amp-script. We are excited to see how developers
are going to interact with these things and whether or not the
simpler components are going lead the to fastest road to a great user experience. I want to end with how you can
help. I mentioned before it is much
more difficult than you might think for us to understand what
it is you are trying to make and how the decisions that we make
in AMP affect you. The more you talk to us, the more our
opinions going forward will be better for you. This is a
win-win for everybody. So, like I said before, we have
a booth, please, come and chat with us.
We will be standing over there for the next few days. Sign up to chat with us
afterwards. We have been sitting in the office and wondering about what frustrates
you and where do you find answers and how do you pick what
component you use. We want to hear whatever you want to tell
us. It is always the stuff you don’t anticipate or the
questions you didn’t have that are the most interesting in user
experience. Please sign up. This is the bit.ly link again. I was thinking about how you can
identify us at our booth and I wanted to make badges that said
do you hate AMP? Tell me why. My manager didn’t like that idea.
Look for me and we have other members of the UX team here. And
yeah, thank you very much. [Applause] CRYSTAL LAMBERT: Wow, thank you
so much, Andrew. And to reiterate, if you take
away anything from nis talk, it is to go talk with Andrew and
the design team over at the user experience booth and that is in
the room just behind us. It is labeled demos and
tutorials. Andrew will be there so you can
speak with him face to face. A couple things before we let you
go to lunch. I see some really great
questions coming in but all of them seem
to be in English. YUSUKE USTUNOMIYA: Yes, that is
true. In the previous session, also. We really want to talk
with everybody so post many questions. It doesn’t have to be
English. What I did was a slide view type
as you see. You can also put it in Japanese. You can just say you like AMP. We will check each one of these. We will translate to the
speakers and from them put them to the TSC
panel for the ones selected. Please keep rolling them in. With that, we will conclude our
morning session now. We will be back at 2:30.
We would like to come back at 2:30. We will go into a lunch
break. Lunch is at the far end of this
floor. There is a lunchbox prepared for you. Other than
that, if there are too many people and you can’t find your
place, there is an overfill area, or
overflow area, so you could also go there or also go to the demo and tutorial area
as well. Should we add anything?
CRYSTAL LAMBERT: To reiterate in English, lunch is two hours long
and if I have learned anything in my brief time in Japan, there
is a lot of food. You don’t need to rush over. Please spend the
time interacting with each other and going and talking with
Andrew at the booth over there and speaking with all of the AMP
Core team that is here and excited to learn from you as
much as you are here to learn from us. Thank you. Enjoy. See you back here at 2:30 in
this room. There is going to be a live coding session. It is going to be awesome. YUSUKE USTUNOMIYA: See you back
at 2:30. Thank you. Hello, everyone. Please take
your seats as our program will begin in 10 minutes. Hello, everyone. Please take
your seats as our program will begin in five minutes. Hello, everyone, please take
your seats as our program is about to
begin. Test test YUSUKE USTUNOMIYA: The afternoon
session is about to begin. Were all of you able to have lunch?
Were you able to take a rest? How many of you have spoken with somebody from inAMP team? Please
raise your hand. 50% of the people. The other 50% people, please,
leverage the breaks. We will be more than happy to
sync up and meet up with you. Amp.dev live. This next session is on live
coding. Some are successful, some are
not. It’s thrilling, isn’t it? You going to see it being done
live and see if it actually works or not.
It is interesting. Have a look. Let’s get on with it. Please welcome Crystal and
Sebastian. [Applause] SEBASTIAN BENZ: Hi, everyone. I
am Sebastian. I work at Google. We are going to do some live
coding today. I am super excited that Crystal
is helping me out here CRYSTAL
LAMBERT: Because friends don’t let
friends live code alone and I happen to be
wearing a code-mono today. SEBASTIAN BENZ: We will show you
a few of the cool new features but
show off a few oldies but goldies under the AMP
components. CRYSTAL LAMBERT: Have a little
bit of old world AMP meets new world AMP and how it fits together in the
ecosystem. SEBASTIAN BENZ: What are we
going to build? CRYSTAL LAMBERT: It is a
conference today and I am all about it in a
komono and I would love to live code something that can give us a central build
hub for the conference. SEBASTIAN BENZ: How about build
a conference page? We have prepared something. This is what
we will have so far and start with. We have a really nice blue
header and the agenda. CRYSTAL LAMBERT: And it is super
boring because this already exist on amp.dev.
SEBASTIAN BENZ: And it looks better. We want to make this
more interactive, more engaging, for example, we
want to show live tweets about AMPConf
that are happening right now. CRYSTAL LAMBERT: We want to know
what you are saying about the session but I want to know what
other people are seeing and going outing Tokyo and happening
at AMPConf. Do you think we could get some photos from the
AMP team? SEBASTIAN BENZ: We totally
should get photos. Oh, and the agenda needs a
little bit of improvement. Let’s take a look at the code. Before
we start, our app has three different parts. We have the agenda, tweets, and
photos. In order to navigate between these two we will use like a bottom
toolbar. I think that kind of works
really well in mobile and that is what we will focus on in this session because it is
so easy to reach with your thumb.
CRYSTAL LAMBERT: Most of you probably have your phones with
you today. SEBASTIAN BENZ: We have a node.
sj server in the background and use a template engine to render
this page. We have at the top the code that
you should already know, basic styling for the header and
fonts, and then here we are rendering the agenda, so it
looks a bit weird but these are
templates and the agenda object. I am using the square brackets
instead of the curly ones in order to
not conflict with the normal
templates inside the list. What we want to do is we want to
split this into three sections. Before we start, I am quickly
going to remove the agenda so that it is easier to understand
what is going on. So, we want to have three items.
The first one is the agenda, the second one is going to be tweets, and
the third one is going to be photos.
CRYSTAL LAMBERT: Whew. SEBASTIAN BENZ: So far, so good.
We want to have three buttons and each button select a
different tap. Whenever you hear in select in
an app, you should think app selector. It is a useful
component that keeps the burden of having to maintain the
selection state. Very useful. You should definitely check it
out. Let’s add an AMP selector component here. I am going to add a class
because we are going to have to style it later. So in here, I am going to add
three options. So, the thing is everything that
is inside AMP select and has the
option attribute is going to be selected. We going to have three elements. The agenda, tweets and photos.
So, here we go. That was a little bit too much. Oh, and of course, I forgot one
thing. Initially, the agenda should be
selected. I mean, we can take a quick look on what it looks
like. Pretty much like nothing. First of all, let’s style the
selector a bit. I am going to reuse our class
and I am going to put it to the bottom so
that is the first thing. Let’s check it out. It looks a little bit better but
still the button needs a little bit of
styling. I have a feeling the flex layer
out is going to work just fine here. I am going to use display flex. This means the bottom is all in
one corner and we need to
distribute. We can use justified content and spacer. CRYSTAL LAMBERT: When I was new
to CSS, space box was a real lifesaver for spacing. If you
don’t know much about it, check it out. It does want work because the
secret to AMP is always remembering to import the script for the component you are
using. SEBASTIAN BENZ: Here I am going
to include the amp-select unit and
we can actually select and outline
this. Let’s style this. Again, first I am going to use
opacity to style the active element so
by default all toolbars have an
opacity of .5. And the selected one should have
an opacity of one. The good thing about amp-select was that you can easily target your
CSS using the selected attribute.
Here you will set the opacity to 1 and set the outline to none as we
are not going to use it here. So, let’s take a look.
CRYSTAL LAMBERT: The opaucity is looking good but that outline is
still there. — opacity.
SEBASTIAN BENZ: The outline is added by default in the
amp-selector and we have to override this and make it a
little more precise by adding the
amp-selector element here. The outline is gone. We can
switch between our beautiful buttons.
CRYSTAL LAMBERT: Can we see what it looks like with the agenda in
there? SEBASTIAN BENZ: First we have to
actually implement the text. The different ways you can implement
text in AMP. The way I am going to chose is
to use a variable called taps that keeps
track of the coin selected taps. First thing we do is we hide the
photos and the tweets tab initially. Then we are going to add binding
to the hidden attribute which means
attribute will appear or disappear
depending on the value. So, tabs is not equal now, then
the agenda will be hidden. We are going to copy this. And add it it the others as
well. We see that initially the agenda
should be short. However, amp-state are not
initialized on page load, only after an
interaction like a user interaction. If AMP state change anything on
the page, even unrelated to the tab
value, tab relates to null and not is
not equal to 0. The current way to add a
statement and initialize the AMP state using a Ajay a JSON string.
CRYSTAL LAMBERT: And null is larger than 0.
SEBASTIAN BENZ: The next thing we have to do is actually changechange. We are going to set the tab
variable to the value passed in via the
event. There we go. And this looks pretty good, I
would say. The only thing we have forgotten
is to actually import AMP bind.
CRYSTAL LAMBERT: There is a funny little thing about AMP
bind. It is the only AMP component
that will not throw you a validation error if you don’t
import the script. I have lost way too much time to debugging
that and spent way too many emails to Sebastian about it.
SEBASTIAN BENZ: That definitely happens to everyone. Always
remember, import the component before you start working on it.
Not like I am doing. But tabs are working. I can successfully
switch between the different tabs. Now I am going to re-add our
agenda back in. So, let me quickly grab this
from here. CRYSTAL LAMBERT: Oh, awesome.
So, great. Now, it looks like we have something setup, we have some
sort of navigation. All of this is taking up screen
space and I am here to engage with the content. I want to see
what we can do about freeing up space from the header and
navigation bar and this is something I am really excited to
show all of you today because it was implemented
from a feature request I made when
trying to develop some guidelines around
animations in AMP. A lot of people ask for these
scroll away headers. It is something really hard to do in
AMP and hard to do even in pages that don’t use AMP. Now that it
has been implemented through one of my favorite
components which the AMP FX collection. This collection works by adding
a cute little attribute to whatever other component you want to have an
effect or transition to and that is AMPFX
and I am going to give it a value of float in top and that
is it.-FX and I am going to give it a value of float in top and
that is it. No, but wait. Just like that.
Here is what is so cool about it too. It tracks which direction
users are scrolling in. Often when users are scrolling down it is because they’re engaging with
our content. When they scroll up t is because the navigation is
at the top of the bar and if you have a hamburger menu up
there we know users are scrolling up and probably
looking for that. And it is floats right in. I also have my nav bar at the
bottom. My users don’t need to use that
while engaging with my content. I will copy this although it is
such a short bit of code I am not sure why and I am copy it on
the navigation bar at the bottom. I am just going to tweak
something really quick because guess what? It is at the bottom. Let’s take
a quick look. Wa-la. My page is now pure
content and pure navigation. So, now that I can see all this
lovely content I think it is time to add a little bit more to it.
SEBASTIAN BENZ: Definitely. Let’s do live tweets. The idea
is we want to show all the tweets that are happening at the
moment about AMPConf. Yeah, we want to display them
inside the tweets tab but they should be updated in real-time
so when new tweets are coming up, I want someone to tell me
new tweets, want to read them and when I click on them they
should appear. And in AMP there is this
fantastic little component which people should be using more. It is called AMP live list which
does exactly this. It is super easy to implement because you don’t need to do anything. You just let AMP Runtime take care of
this. It checks for changes and merges
them into page. Let’s take a look how it works. Let’s close
this one here and we will now work.
CRYSTAL LAMBERT: You guys can help us out by getting some
tweets ready but don’t send them out yet. Hang in there with us.
SEBASTIAN BENZ: I am going to use the AMP live test that
requires a little bit of conformation. The first thing is
how many items I want to display per page. Let’s just go with 50 at the
moment. We need an ID because there is an update button
required that will be displayed if there is now content. CRYSTAL LAMBERT: And that ID
links the on tab action which is put through AMP actions and
events. It was the select one. We recommend reading the guide
on AMP actions and event. It is what opens to the door for
all that engagement on your page.
SEBASTIAN BENZ: Cool. Every child of this div can be
updated. Each child needs an ID and a
time stamp that helps at run-time to
correctly sort the items. Now I am going to use
server-side templateing. It will make a request to the Twitter API, gets the latest tweet for
AMPConf, and then going to feed them into
this template so we can access the tweets array in here and the tweets
array contains — it is just a list of
tweets and each tweet is going to have an ID that we use here. You see them already mixing up
the templates. The sort time is just a
timestamp. CRYSTAL LAMBERT: And we should
slash that hash under the last tweets. SEBASTIAN BENZ: Oh, yes, thanks. And in here we are going to
print the text of the tweet. OK? I think that’s it.
CRYSTAL LAMBERT: Nope, nope, it’s not. This is why friends don’t let
friends code alone. SEBASTIAN BENZ: Exactly. I of course, need to import the
live notes component but let’s give it a try. Here is the page.
We see the tweets. They look really ugly. Give me a moment. What I am going to do is quickly
reuse the same class we used for the
agenda. It is still ugly but at least
readable. CRYSTAL LAMBERT: Send your
tweets now. SEBASTIAN BENZ: Yeah, send your
tweets and the AMP live list we will check every 15 seconds. There is a way to debug this in
the Chrome Dev Tool.
CRYSTAL LAMBERT: We have new tweets.
SEBASTIAN BENZ: You see? Live updates inside an AMP page and super easy to implement. Just
use the component. CRYSTAL LAMBERT: It is already
there. Now, we can see what sessions are going on and we
know what people are saying about them and thank you for
saying so many kind things, everyone. Let’s go ahead and see
what people have to say about it. So pane tweets. All right. Let’s get some visuals up here.
Let me go ahead and close some of these so that we can see what
is happening. In the photo section, I am going to use a component that is similar in
name but different in use. That is amp-list. It is going to use amp mustache
as well. They are best friends and they love each other and you
should always be importing them together. I am going to used a
fixed height layout but I am going to give the height a value of 80vh and that way the
height of the list can adjust to all my
user’s screen size and give me an idea of how large my list it. My source URL is going to be slash
photos. This is coming together really well. Then because I want my amp list
to render a bunch of photos from my
JSON back end at slash photos, inside the template I need to
use an image tag. Now, AMP does require some
specific replacements to classic HTML tag and any AMP developer can tell you amp-img is one of those. Amp-img requires a layout and I
will make mine responsive. And then it requires a width.
From my JSON object. I don’t know have to know exactly what
the width and height is. I think just at it in here. SEBASTIAN BENZ: Which
conveniently all back ends provide. CRYSTAL LAMBERT: And responsive.
Live coding hands. They are basically jazz hands up here that are trying to type. And for my source URL, can we
guess what is going in there? That’s right.
URL. What is so cool about amp-list
and why we want to use it especially for
photos is it has this amazing ability
to do infinite scroll because it renders on the client side. It
is so easy to implement. We add this attribute. What does
infinite list do? It loads more and I am going to set it to
auto. What auto does is it means as my
user is scrolling through whatever it
is I put into my amp-list JSON it
knows what the next set of objects is and
makes a customized request. It is so easy to do from this
side. SEBASTIAN BENZ: The back end
needs support like page nation. Amp-list tells me give me page
one, give me page two, and gave me page three.
CRYSTAL LAMBERT: Before I forget, I am going to import the
scripts for these two things. Import custom element and
amp-list. Import custom template and it
will auto do it to amp mustache since ach
mustache is the only AMP template system we have
available. Let’s see what lovely photos our AMP team has provided
us with. Look at that wonderful photos of
Tokyo. See more? This one I think is our favorite one. This
is Ben. He is on the same team as
Sebastian and I and running the tutorials over there. Please go
talk to him. He is as fun as he looks.
So, these photos look really great. I am so excited to see that I
can scroll forever but I think we can make them look just a little bit
better and since I have already imported
the amp-fx collection I should utilize another option. Since I am scrolling into the unknown abyss I would like my
photos to float in. Amp-fx and I am going to do fade
in. Let’s see what a difference that
makes. And it does. Here they are fading in.
SEBASTIAN BENZ: Beautiful. CRYSTAL LAMBERT: That makes it
look so much nicer and the amp-fx
collection has so many things to implement. They can fade in and
out, fly in from the top, the bottom, the side, everything on
the page can fly in — we don’t recommend doing it but you can.
And you can customize at the rate the effects do it. One of the engineers on the Core
team, Kathy, wrote a really great
document on it on amp.dev in the example guide. One last thing to
highlight. Your users can scroll forever
and ever and ever and because we added that float in top and
float in bottom they don’t have to scroll all the way back to
the top to access your things. We are looking really good. We
have a lot of great things to look at. We have a lot of great things to
read. SEBASTIAN BENZ: The agenda needs
a little bit more work. It says at the top AMPConf Live but this
agenda is as static as it gets. Instead, what I want to do is it
needs to have a little banner at the
top that tells me which section is currently going on.
The question is how do we implement this in AMP? One approach would be using amp
live list pulling for an updated
session but that feels wrong because it will
waste user’s bandwidth. Unfortunately, amp bind doesn’t
support these type of collections. Thankfully today we
learn about amp-script and you can run JavaScript inside our
AMP page and I think this a pretty good use case for this.
Let’s use amp-script. We are going to go to our
agenda. Here I am going to add the
amp-script element. It is supposed to have layout
modes. I am going to use the
fixed-height layout and I think a height of 64 is going to work. The advantage of the
fixed-height, the script is going to change its height so we can
modify on page load which is what we want do to. Page loads,
we calculate the transactions and we will display it here. And then, of course, we have to
provide a JavaScript file inside our file. We are going to
implement that. One thing you should add is a placeholder and
I am going to give it an ID. Let’s call it session. I am also going to add a little
bit of styling. Better make the color pop out a
little bit more. CRYSTAL LAMBERT: And Sebastian
is adding inline style which is not super new in AMP but it is new to this
AMPConf. This was not available last AMPConf. We have a couple
exciting things happening. Inline styling happening inside
amp-script. It is an exciting moment.
SEBASTIAN BENZ: Yeah, and it is not going to do anything except
display loading. The next step is to actually
implement our JavaScript file. I will put it in the right folder. I hopefully give it the right
name. CRYSTAL LAMBERT: I know you all
are looking out for us. SEBASTIAN BENZ: We be use the
normal DOM APIs like you would do if using JavaScript. We can get a label from the
document using gget-element by ID. We can modify it because we are
in the fixed-height mode. I will just say because we have nothing more to say besides loading but
we can say this time amp-script loads this. This part is called
hydration. There is initially a render on service side that is being displayed,
then our JavaScript launches and swaps this element out by the
element that is generated by our amp-script here. Let’s now take a look. Let’s not
take a look. First I have to import
amp-script. I feel better. I don’t know. It happened quite quickly at the
top. You see loading and then
amp-script. This means hydration is finishes
and amp-script took over control. CRYSTAL LAMBERT: We just
witnessed JavaScript in an AMP file. That is pretty exciting.
SEBASTIAN BENZ: Now let’s do the last bit real quick. Now we have to get our sessions.
I am going to implement a function called updateSession which is just
going to calculate the current session. You can do fetch
requests inside your amp-script. I am going to get the response. It is asynchronous. The only downside of amp-script is YOUFR to use absolute — you have to use sessions.
Then I can get the actual sessions array by unpacking the JSON
response from our element. Now we can calculate the current session by getting the current
time. unpacking the JSON response from
our element. Now we can calculate the current session by
getting the current time. We have the new time. Sessions is an array so now we
want to get the current session. We are going to find it inside
our array, hopefully. There we will have a session. And then the session is active
if the current time is bigger than the
start date of the session and if the time is smaller than the end date of the
session. OK? Once we have this we can update
our label and we say, OK, the session might be now if AMPConf
is over so we have to check that first. If it is not now, we say OK, it
is a title. Otherwise, it says no active
session. Sorry. And that’s it. And let’s take a
look. We load our page. CRYSTAL LAMBERT: And it looks
like it is time for next generation. We went over on time.
SEBASTIAN BENZ: We hope to get you excited about trying new
features we just released. CRYSTAL LAMBERT: Thank you so
much, guys. SEBASTIAN BENZ: Thanks. YUSUKE USTUNOMIYA: Did it go
well? I have only seen part of it but
amp list is not used much but it is a function that has been here
for a long time. You have to be careful whether you use the
cache or not. It was an interesting session I
believe. I made an announcement and what
I wanted to say is amp-scripts and
such pages to be using is now
possible but those involved are not just
developers. There are people who can not write code that may want to open a website
or a store, so we need to have a CMS for those type of people. What this next session is Open
Source CMS EC-CUBE. Japan is proud of. It is all in Japanese so if you
can put on your mic it will be
translated into English. If you could do that, that will
be great. Let’s move on to the next
session. Next generation UX of EC-Cube,
powered by AMP Please welcome Kiyotaka from
EC-CUBE and Mitsuhiro from SUNDAY SYSTEMS.
Hello, everybody. Welcome to conference. My name is Kiyotaka Oku and
Mitsuhiro Naganuma from SUNDAY SYSTEMS. We are going at a talk about the optization of AMP with the
EC-CUBE. Our relationship with AMP is what I would like to
start off with. EC-CUBE that we developed, which
is an open source CMS package for EC. It is mostly about 30,000 stores
are created with EC-CUBE and it is currently running. And last year in October, we had
a major version improvement which
was the EC-CUBE 4 upgrade. From February of this year, we didn’t
have package version in which to provide the value, we had a Cloud
version EC-CUBE. co has been introduced. As you can see the EC-CUBE is
growing, however, we have a back end development we had focused
on. EC-CUBE 4 release next step for
user experience, we have a front end which we would like to
improve. And what we did was this. Our endeavor with AMP is at the
Chrome Dev Summit we had a discussion
there. Our developer is the AMP plugin. By installing the AMP plugin
with EC-CUBE we will be able to bring
you the powerful app. We are able to release this in a very
short period of time. I would like to explain to you
some of the functions. We see the performance is
increased and we are able to provide AMP in a page like this. AMP page is responsive so we
also have desktop as well as mobile version can be providing the same user
experience. By adding this to the home page, we have a popular application and
it feels like that. Going on, this will be the
actually implementation to the plugin. I would like to ask Mitsuhiro to
take over. MITSUHIRO NAGANUMA: This is the
actual plugin. We want to see how it is creating the templates
and also how this plug is working. We would like to
explain to you about that. The major rule of the plugin are
the following. The first one, the template will
now be compatible with AMP which will
now be added. This is at the top of the list of the products as well it will be
called block. A search box which would be coinciding to this and setting additive function inward to
handle the interface. Using the tool AMP optimizer we
have the page we can distribute from
our own server which we have a temporary interface to handle
this. This optimizer setting is an
option so without doing optimization is
possible. Third point is automatic added
and installing and a PWA can be
made. These are are the three AMP
plugin functions. I would like to explain about the template. When we do the EC-CUBE, we have couple of components to be
incorporated which have an interactive UIA.
We have a component that is embedded to points we need to consider. One is the EC-CUBE user
experience interaction which needs be able
to handle with the AMP. What we have here is a
smartphone animation with a select box you
can get an amount for the code that can be converted as you can
see. EC-CUBE detail page you can see size and colors which can be
voluntarily set which can be made with the
select box and you can also interact in this way.
We can see the product price as well as code in the inventory and what
you cannot see here would be some
changes inside the form. In the Twig template we have a JavaScript code and this is just
an incerpt of that. As you can see, in AMP page you
cancannot use. Using AMP component we will be able do
this. You can see this using select
box. You have AMP list, and AMP bind
and mustache. Such components will be
necessary. This is source code we have. You can see the flow. You have an AMP list requiring
Ajay — a JSON list and the change in
the select box as a trigger would be brought to the following process.a JSON
list and the change in the select box as a trigger would be
brought to the following process. The src attribute, you can see
it is red in here. In a template tag, and the JSON
data has been loaded right in, it is
changed. Next, if you could look at the
select tag. On characteristics you can see
there is an interaction going on here. These kind of interactions
other than product detail page is also
loaded on too. Using AMP component can be
incorporated as necessary and to be able to provide the necessary interaction. Going on to the plugins role of the
management interface extended functions as well as see how it is interacted with
the front end. In EC-CUBE, is a CMS so they are
using the interface and various
settings can be made but including the AMP
plugin you can select above the site and
CSS editing can be made. Once the plugin installation is
completed, the list of the plugin can be confirmed here. From this screen if you proceed further, amp-first section items
will be displayed and AMP and the regular page will be produced as a pair. The cache is used for
distribution. As an optimization item, there
is a place to put it in the URL for
optimization. If you select the AMP first, it can only be used
when you select that but using AMP optimization you can
auto-optimize yourself. So in JCB Cloud function, you
create an APA and you connect it with that. You will be able to insert the optimization and be able to
implement the API. We see the EC-CUBE side and then that data will be brought from the
optimized EC-CUBE data to be optimized if
it is possible. You can do this all on your
site. An AMP plugin uses this as a
Twig template and next, the CSS of a
page that is AMP compatible looks like this. We are looking at and it looks
— so the CSS registration item tells
you what you can put in and each pages’,
the CSS size set on each page is shown
like this. And you have to make sure the
size does not exceed 50 kilobytes and you can do it
normalized CSS. You could set that. You can design a CSS that meets
your design. The third point, PWA is what I would like to touch on next. AMP plugin works like this. OK. Then you can see what’s at this
other end of the resource. And the PWA function at present
is very simple. Site owners may expand on this
but this will serve as a good working
basis, a foundation. Work box library is used for
this and the — we use a — we could register
all of these in the AMP plugin and web application manifest. You could change it like here
from this screen. This is the AMP settings page. You could register documents
here. Lastly, I will give you some examples using this plugin. This is an EC site selling sunglasses.
It is an AMP first setting. That is what they use. As you can see
here, you could run this from the home screen and the
user can go to the AMP compatible page, then
to the PWA page, and get resources from
a service worker to make the user
experience good. Thank you.
Next, lastly, we like to talk about what we plan to do next,
our next steps. We want more users to experience
AMP so we have a — we want AMP to
become more easier to use. To make that happen, we are
providing our platform, EC-CUBE. co and we want our platform to
be compatible with other service exchanges in addition. We gave you just one or two case
studies today but next time we would like to provide more case
studies test next opportunity. If you have any questions,
please, come to us and let us know what you
think. CRYSTAL LAMBERT: Thank you so
much for such a great presentation. I loved hearing about how AMP
can enable people without such a great background in web
development so that they can still have great performing
interactive pages. After seeing that merchant site, I am
thinking I might need to get a new pair of shades. It is a
little bright up here on the stage. Coming up next, we are
going to have a talk called Embracing a mobile
first approach and how retail giants can shift using AMP to embrace this mobile
first platform. Please join me in welcoming to
the stage Perry.>>PERRY LALLY: Hello. I am Perry Lally. We are honored to Japanese
international representing our city which is wonderful. So,
today, I am going to be talking to you guys about how George.com
embraced a mobile first approach and put everything you are
hearing today into context. This includes our initial
project statement, data to back it up, the adoption of AMP and
problems we faced on the way because not everything is rosey. Out of interest, who here knows
who Walmart is? Hands up? Keep your hands up if you know
who Asda is? And finally George.com? It went down every
time as expected. Hopefully, after the next slide,
everybody will go. We were founded in 1990 by a man
named George Davis. He also founded U K retailer
next. In 1999, Walmart acquired Asda.
In 2008, the George.com website went online and equates
currently to 10% of total revenue which is fairly
significant. As you can see, we have 540
stores in the United Kingdom of which George clothing and home
is present in every single one of them. We are live in 26 countries
across Europe and have plans this year to launch our rest of
the world project which you will see is going to
over 70 countries worldwide planning to take over.
There has been a lot of change in the last 11 years since we launched
online. Specifically the biggest change
is customers visitvisiting from desktop devices to mobile
devices. The huge shift in e-commerce
puts mobile at the top of the game. This is the George. com trending traffic over the
last four years seen on this slide. Our customers are mobile.
That means we must be mobile too. To do this, we had to focus on
three key things. First of all, we had to shift our colleague
mindset. Colleagues sat at their desk every day working on their laptops looking
at the desktop site because this is what is built into their
brains but our customers are not doing that. We needed to
encourage our colleagues to get their personal phones out of
their pocket at work and check the mobile website and test the
mobile website to make sure it was
worker for the customer. There was the awkward feeling of
colleagues getting out their personal work because managers
might think they are texting or using WhatsApp
but we need to shift this mindset. Secondly, the adaptive
website. We launched our desktop site on
to the mobile phones. There is not enough real estate for the
customers to use it. It is a terrible experience that needed
changing. We launched our mobile-friendly adaptive website which today is
our PWA. And finally, and last but not
least, site speed. It is all well and good having a great
user experience on mobile, the best in the whole world, but if
it takes 10 seconds to load, what’s the point? Customers can do a lot of things
in 10 seconds. They can go and put the kettle
on. They can start to read a book. One thing they will not do
is wait for your web page to load. They will
go elsewhere. Click in the URL bar and search
for another brand and off they are to another shop. Four years ago our site was
loading at eight seconds and four years on after 20% of total capacity investment
into site speed we were loading at 2 seconds which was a huge achievement for
us but people asked why? The board, the managers, why
invest so much time, so much money into site speed? Why is it
so important? Well, to put it simply,
customers expect, customers demand a
fast-loading website, or as I mentioned it is so easy for them
to go elsewhere they will do that. They will leave.
We discovered on George.com that one second of site speed could
be worth up to 5% of revenue for your business. This is an
opportunity we simply cannot miss. In summary, speed is king. So, we are now loading at 2
seconds on average, we have optimized as much as we can
without stripping away functionality and without making our images 1
pixel so they can’t be seen. We needed something else. AMP was the next logical step
for us. We were the first major retailer
in the United Kingdom to launch AMP on our site. We looked at
AMP to compliment our mobile site and increase page load time
and give customers the experience that they deserve. But the question was was this
the right thing to do? There was no research from
retailers who had adapted AMP on to their website. We needed to be bold, take a
risk and go for it. We launched a two-month
experiment to measure a guaranteed fast first impression from Google Search
results to George.com. We launched 250,000 AMP pages.
We were certainly bold. We have our homepage, category
landing page, product listing page, and
category listing pages that were using
AMP. So, it was critical that we had
the AMP pages are feature parity with a
non-AMP site. In no way are we going to compromise our user experience for site
speed. We set out for world class speed
and world class functionality. We required a couple AMP
components you have heard about today such as
amp bind and amp-list to load dynaming prices and determine
product availability. — dynamic. To power amp-list we needed an
API and a system to manage the cache to make sure products,
prices and availability were always correct in the amp
cache to avoid a mistake. We turned to one mobile, our AMP partner, for assistance and a special shout out to them.
Several time per day the George CMS pushes product data into the
mobile platform. The data is used in populating
AMP templates and in the API that
powers the AMP components. We use Google’s AMP updates API
to ensure fresh AMP pages are displayed to our customers. When customers add to cart,
perform a search or login the AMP page
integrates with the existing CMS. From analytics, we are using
Adobe analytics and Google analytics which makes measurements relatively
easy but I will come on to that soon. So, what did we find out?
We had our problem statement. We had a plan. We had the build
complete. But what did we see? Well, speed
made all the difference. Our users are both responding to
and valuing speed. We saw 75% faster page loads
across pages with the majority of pages loading in less than 1
second. This visual comparison brings that to life.
It is using web page test we were able to measure the canonical on a 3G connection loading visually
complete in 5 seconds. The AMP page from the Google
cache is visually complete and ready to interact with in just 1
second. A phenomenal speed. We saw a 12% click through rate
in improvement from Google Search results. Customers are
identifying and relating to the AMP icon. They know what it
means, they know the page will load fast and are more likely to
interact with it. However, with an increase in traffic, you are
not necessarily guaranteed an increase in conversion. You are
not guaranteed strong converting traffic. Therefore, you could
expect an increase in bounce rate too. However, with AMP, we saw a 14%
decrease in bounce rate. That simply has to be put down to the
speed of the pages. We saw a huge 56% increase in
pages per visit for customers in their AMP journey. Customers who
were on a mission, they know what they want to get, and they
want it fast. If our search result was present
in the customer search and they interact, the chances have
doubled for a customer likely to carry on shopping and browse
more pages on your website. So, I mentioned earlier, that
George. com were the first major
retailer in the UK to enable AMP and we were also the first major
retailer in the UK to turn off AMP. We saw great numbers. Hugely in favor of AMP, however,
the method of measurability was not
ideal. Usually, new features or
initiatives AB testing is the best approach. You AB test to
decide what is better. The control or the variant. However, you cannot AB test AMP
being enabled or disabled on any given
page meaning we were having to use the before and after approach to measure.
George.com is seasonal. We see peaks throughout the year in
different metrics. For example, at Easter or Christmas, but then there is also things we
do not plan for such as a tweet that has gone viral can really
spike our metrics, so it was really hard to absolutely
knuckle down what AMP did versus other growth around the
business. We decided to reverse test this. We measured before and after but
what about after-after? We disabled AMP for four months
for a fair test to split out those
numbers to really determine what AMP did versus the natural
growth of the business. As you can see on the slides, the
numbers were as expected. They flipped. We saw the increase with the
online of AMP and we saw the decrease in
our key metrics with the turn off. A 6. 6 lower click through rate, 17%
worse bounce rate. The numbers made sense and this
is where our decision was made that
AMP was successful for George.com. One of the challenges we faced
are when the AMP pages are viewed, we are still on
Google.com. Adobe analytics loads the
scripts in an IFrame and that source is Asa.com. Because they are running from
asda and we are on Google.com. Apple Brookss disregards new
users for analytics. Disregards new users for
analytics. Many of the metrics are correct
but if a metric such as bounce rate, we only look at Android
users. Google analytics has solved this
problem with the AMP client API. We also use Google analytics. This gives us two datasets to
use and compare against each other. We are currently working
on Signed Exchanges and are excited to see
that technology move into introduction. Signed Exchange
will allow all AMP pages to be served from the Google cache while retaining our URL in the
URL bar allowing our analytics and
cookies to work correctly. So, we had a problem, we had
AMP, we had no AMP, what’s next? George. com has just launched a
React-based website with a complete change in user
experience. Now we have had the trial of switching off AMP and
we want to reenable AMP on our new website and are aim to
get 250,000 pages live by the end
oof June. The next step is for George to
build a plump. A great word. Using AMP pages is the best way
to leverage our investment. The AMP pages, the AMP patterns,
and the AMP way to guaranteeing
speed. A unified, fast mobile
experience for search results on the main site.
I am not expecting you all to remember everything I have said
today but if you are going to take anything away, do not forget you do not give up
functionality to gain speed. You want both. And also, be brave.
We have to take calculated risks to see the rewards. With AMP, it was a big risk and
our board we was not too sure about it. We took the risk and we saw the
reward. So, that’s it from me. Thank you for listening. I am
around for the next couple days if you want to ask any
questions, just grab me and I will be happy to talk
to you guys. Thank you very much. [Applause] YUSUKE USTUNOMIYA: How was that? We had a mobile first and a
performance came into the theme. We have Google Search query
which is moving from desk to mobile and it has been recently
that it is more on the mobile side. How many users have been here in
Japan? Yeah, so in 2015 in May, is a
top contributor. Since 2015, the mobile traffic
has increased greatly since 2015. Theitate data I use often is 53%
user speed decrease. data I use often is 53% user speed
decrease. So, next, we will switch our
theme. It is a new web format. I am really looking forward to
this. The next session we have, which
we want to move on to now, AMP Stories
2019. Please welcome Jon and Wei. >>My high name is Juan and I am
the lead developer for AMP Stories.
I am work on AMP Story and Google surfaces. We are super
excited to be here today to walk you through what is new for AMP
Stories in 2019. Let’s start with something we use every day.
We do a diverse range of activities with our mobile
phones on a daily basis like chatting with our friends,
ordering food, navigating to new places,
watching TV and movies and shows and playing games.
Beyond all those basic activities we also find
ourselves spending more time discovering or consuming content
directly from the mobile devices. A lot of the traditional content channels, like newspapers or
magazines have been converted from the
print media to the digital media. Most is designed for desktop
access instead of following good guidance on mobile. So, therefore, we often face
challenges reading content on mobile screens. Your desktop
size decreases from this big to this but the amount of
content you need to consume stay the same. I know. It is really
painful because you get less time to read the content and you have to keep moving your page to
other part of the content instead of
simply glancing everything in one place. It is harder to track
and manage reading time. For myself, where find myself
opening a bunch of articles on mobile
screen ever day but I don’t find myself
finish reading them that often. Because of the software to read
traditional long form stories. We are hoping for more visual
storms of storytelling and a better consumer experience
designed for mobile first. We see the visually rich content
format with getting more and more popular in the native world but visually
rich content on web is still rare because it is difficult and expensive to
create. So to create a better open form
for visual storytelling on the mobile web we launched the
developer preview for AMP Stories last year in February.
With AMP Stories we deliver mobile first, byte size content to user
and imerse them with fast loading
experience. We help publishers do narratives
with engaging motions and Tappable interactions. What is
more awesome is the AMP Story format is free and it part of
the open web. It is open for anyone who wants
to try on their own site. It is also easy to be shared or
embedded across the whole web instead of being locked into a closed ecosystem
or platform. We are excited to say lots of
diverse stories each with tear own unique design on
storytelling. We see great stories made for news, lifestyle content, politics,
science, TV shows, celebrity stories, game
reviews, sports and many other cool topics. We are also working
hard to make the AMP Story formit Matt even
better. I will hand off to Jon to walk
you through the exciting AMP Story
updates. JON NEWMUIS: During AMP stories
origin trial we saw real interest in this type of
content. Publishers of all sorts joined
us and were able to build real stories
with the format, some of which you just saw. But the origin
trial was limited in scope and only focused on a
small number of use-cases. We on the core AMP Stories team have
been hard at work expanding the capabilities of the format so it
can work for everyone. Let’s walk through a few of the
features we have added to help out. First is localization. When we launched the origin
trial and developer preview last February it was in English only. We now support 21 different
locales and have built a general framework around AMP so that AMP
Stories system provided user interfaces can be
translated into any language easily. The framework not only includes
the ability to add these new translations but also includes the ability to
flip for left-to-right languages like Arabic. You can simply set
the lang attribute on the HTML tag of the document with your story to the locale code
for the language of the locale you would like to use. If you want to right to left
support you can set the direction
attribute to rtl. As an example, Rakuten is a major internet
company based right here in Tokyo, actually. They run one of the largest
recipe sites in Japan, Rakuten recipe which
has over 1. 5 million reciperecipes to
enjoy. Rakuten is experimenting with
publishing AMP Stories and you see one here which is the top 10
most popular sweets. They all look pretty good but as we get to the end of the story we see
the templated book end UI which
provides links, related articles, sharing options and so
forth. This templated UI is partially specified by the
publisher but also partially contained strings that
are defined by AMP Story itself. The strings provided by AMP
Story itself can be translated into
Japanese with this new localization
feature providing a consistent experience for the users. Next we wanted to provide a
richer more customizeable experience for
desktop displays. When we launched AMP Story 2
developer preview last year we included a default desktop user
interface and this user interface is good but the reason
we implemented this user interface is because it is actually easier
for publishers. As a publisher, you can simply
create your story for mobile and have
this automatically transformed to work on landscape displays as well but
what we have heard from some publishers is they are willing
to put in a little bit more work to make their experiences
better on landscape displays. So, earlier this year, we
launched a feature that allows publishers
to bring the full nature of stories on
mobile to desktop as well. On a laptop or a desktop
computer, or even a giant projection screen, this feels a lot more natural and
also brings this feeling of immersion of
stories you have on mobile to desktop. Although it requires a
little bit more work from the publisher to get this experience
just right, particularly in finding the right art direction,
the flexibility it affords
publishers and the benefit to the user
experience are tremendous. This experience was designed and
developed in collaboration with the top global news publisher of “The
Washington Post” whose story you see here. They worked with us to run
experiment on property where they set-up a
few test stories to determine the effectiveness.
Once we determined the effectiveness and value this
brought to users, we were able to implement and
productionize this. “The Washington Post” has continued
to publish a number of great
stories using this experience but the benefit
of implementing this into AMP Story itself is now all
publishers can benefit from this experience as well. We have seen
some publishers start to do that since launching this publically. For example, the top national
publisher, the San Francisco Chronicle has
started publishing in this new landscape experience as well.
Now, you are all probably wondering how do you enable this experience
for your stories as well? The short answer is just add
this one attribute. If you add the support landscape attribute
to your story then it will automatically enable the
landscape support for your story but the
slightly longer answer is that when you do that, things might not look quite
right, right? The top screen you can see the
assets are not cropped perfectly. This is because for
both portrait and landscape orientations we actually do a
center crop where we just take the center-most portion of the
asset and keep that in display. So, to correct this, we actually
recommend manually specifying a crop and you can do that by
specifying the object position attribute on your
images and videos. The object position attribute
works by essentially setting a focal point on the images and
videos that should stay as close to the center of the screen as
possible. Here we set the focal point to
75% along the X axis and 40% on the
Y axis which is roughly the most important part of this photo. The browser will then shift the
media over so that this focal point, again, is as close to the center of the
screen as possible giving you a much
better crop. You may notice that the
landscaped version of this remains
unchanged and that is because, well, the landscape version of the asset and the
landscape orientation of the screen are roughly the same size, and so the asset
does not need to be moved over. Actually the focal point here
cannot be moved any closer to the center
of the screen wile leaving the image
covering the story. Support for this attribute will
be rolling out over the next few weeks. Another piece of feedback
we have heard from publishers is they want to
have more control over navigation to other places from
the story. On a traditional site, you would
have a navigational menu and they would like to bring that to
stories as well. We have done just that by
enabling support for AMP sidebar which works like it does on a regular AMP
website. This let’s you provide
navigational experiences. To use AMP sidebar is relatively
straightforward. Just use the AMP sidebar tag as
a direct child of the AMP Story tag in
your story. It works just like embedding a sidebar in a regular AMP document with
one exception which is that stories will automatically add the templated
UI the open the sidebar. This hamburger icon menu you see in the top
right corner. Another thing we heard from publishers is sometimes you want to make
the editorial decision to allow users to explore content only if
you want to. Maybe you have a video that is very long and you are not cons
convinced all users want to watch the whole video, or maybe
you want to optionally allow users to get a deeper dive on a
particular topic you covered in your story,
this is where attachments come into play. To open an attachment, a user
can swipe up from the bottom of the page containing the attachment and
get this scrollable pane. As a publisher, you control the
content and can embed any attachment you
like. Attachments are used in story
forpats to provide this. An additional set of content
that isn’t critical to the story but we
have added this now into AMP Stories for
you to use as well. Just like sidebar, the AMP Story
page attachment tag acts as a
container and added the UI affordance. For the sidebar it was the
hamburger menu in the top right, for page attachment, it is this
arrow with the learn more text on the bottom.
For A. Story page attachment, you can
embed it into your story by setting the
amp story page attachment tag as a direct
child of your AMP Story page but not all
interactive content should be hidden away in an attachment. Sometimes you want to showcase
the content directly as part of your story. This is why we are
adding embeds to stories. The ability to embed content
directly within the story page. When a user clicks on an
interactive embed, they will be shown a tool tip allowing them
to bring the component into full focus. This allows the user to interact
with the content fully without
breaking the navigational flow through the story. Each of the
embeds we support, is an AMP component so embedding them in
the story is as simple as using an AMP component. In this
example, we are embedding a tweet so like on any other page,
all we do is use the AMP Twitter tag. Support for AMP Twitter is live
today but much like the localization feature I mentioned
earlier, the exciting thing here isn’t specifically the use of
AMP Twitter. It is the fact we have built a generalizable framework and we
can expand this framework to support many types and we plan
to to that as we role out these components individually over the
next few months. We are pretty excited about
these new features and hope you will feel
the same way. I will hand it back over.
Thanks. I can’t wait to see upcoming AMP Stories with all
these cool features. Now I am going to put on my Google hat and talk about AMP Stories on
Google surfaces. After you building all these
amazing AMP Stories, the main question you might ask is how
can users see them? The great thing about AMP in general is those are just regular web pages
and accessible through publisher site, social channels or available
through search engines like Google. AMP Stories can show up
on Google Search in the web results and
top stories. In order to make the search experience more
visual and interactive, we are working on a dedicated placement
for AMP Stories on search and in queries
in space of categories. Let’s use travel as an example
and go on a visual journey together. Let’s imagine searching for
things to do in Tokyo. Here we have the search result
page. You start scrolling and exploring the content and then you find this
beautiful block serving you cool travel stories. Tapping on any
of them bring you riot into the story and now you can start
enjoy reading the story by tapping through the pages. If you want to browse something something else, you can swipe to
the next. You can get this experience by
continuously swiping to the next content. And of course, this is just a
teaser. There is so many cool places to go around the world
and by adding this new experience to the Google Search,
users will start getting more and more
immersive travel experiences. We start with travel because
looking at rich content experience like this can help user get a better
understanding of the travel destination and you can engage
more before you are physically being there. Also, the AMP Travel Stories
tend to be evergreen so they will still be
relevant months after being published. We also know that the story
format works well with other types of content categories. After travel, we experiment with
gaming, fashion, recipe, movies, TV shows, and even more categories. So, beyond the regular search
experience, Google offer you an experience in the Google
discover feed without having a query in mind.
A quick reminder on what’s Google discover. Discover is a
feature within Google Search that helps users stay
up-to-date on favorite topics without needing a query. Users can get to their discover
experience through the Google Search app. Go to the Google. com mobile home page or swipe
right on the home vene on a pixel phone. It has grown
significantly and now helps more than 800 million monthly active user get inspired and
expore cool content. The exciting news is that in the
past six months, we have been
featuring great AMP Stories in the Google discover feed as
well. We serve many high-quality AMP Stories based on a diverse rage of
topics and we saw great useruseruser
engagement. We plan on focus even more on
this platform moving forward. We also want to make it easier
for you to produce high-quality stories. We updated our story best
practice on amp.dev to help you easily understand what makes a
good story. We have talked to a number of
great story creation tools that allow you to have easier process
to create stories. We now also offer you good
monetization options. Let’s start with best practice. What
makes a good story? We all know that story is a new
and unique content format. If you are looking for ideas, or
inspirations, trying to figure out how to start making delightful
stories you can ref reference the best story practice on amp.
dev to ensure story quality. Let’s take a look at detailed
examples. When you make a story, always
make sure your story is complete and
self-content. You should keep your readers
engaged in your story. Don’t cause them to go to other
websites to get essential information. Always use text in
a clear and concise way. Try to keep your audience
engaged by avoiding putting large blocks of text on the
page. Stories is a visually driven
format. Try to use rich media to tell the story and add text
information to enhance it. Make sure your text is always
legible always using high contrast to make the words easy to see on every
single page. You should always take advantage
of the full-bleed screen. Always use full-bleed assets as much as
possible. Try to create a compelling and
more immersive content experience by
using the vertical assets. Another good thing about
vertical-base assets is they crop out the unimportant
information on your page. It will let your user easily focus
on one key subject. We all know that motion plays an
important role in the storytelling. Be creative with our animation
usage. You can always bring your static image to life with proper
animations. Keeping in mind animations
should enhance the visuling but not distract.
Animating different elements separate to the stage makes the
experience more engaging and playful. On the example on the
right, the animation fack facts on the
background image is fice and subtle and plays a nice balance.
Hopefully you find all those examples helpful. If you want to learn more,
please go to amp. dev and check out the full story
best practices. JON NEWMUIS: To make creating
stories easier without diving in the HTML, we have worked with a number of
partners to release creation tools for AMP
Stories. Make stories is a WYSIWYG editor
that allows you to create stories by dragging and
dropping. It comes with temptemplates,
gifts and illustrations. The best part is as we heard in the keynote, Make Stories is
launching for free. Check out makestories.io. Next Is Unfold. They offer easy story creation
directly from your Android or iOS device
with a number of beautiful templates and themes. They are
announcing their app will support AMP Stories as part of a
premium version coming this June.
Newsroom studio is a platform specifically engineered for
publishers looking to embed Tappable
formats into their editorial and commercial workloads. The platform includes a turnkey monetization system and provides unrestricted access to the entire getty images lie DAESH — library. We are seeing other platforms
like Jumprobe and Tick. We are excited to see more
platform providing ways for end users to
publish content on the web. And lastly, we on the AMP team have been working to get stories
support adding in the CMS starting with the work press
plugin. I am sure most of you know about WordPress but it holds 60% of
the CMS share and powers a third of all websites. We have been working to add a
WYSIWYG story editor to the AMP plus plugin to help bring more
AMP Stories to the open web. To hear more about our efforts
to bring stories to WordPress, check out
the AMP experiences in WordPress, the WordPress way talk tomorrow afternoon. As mentioned, we have been
trying to make it easier to publish stories by providing a wide array of
options. From new stories, to affiliated,
to sponsor stories there are a number of ways to get started with
monetizing stories. For more information on that, Vamsee will
give a talk first thing tomorrow morning, the advertising in AMP
talk. So, this has been a whirlwind
tour of what we have been up to for the past year. It is not
everything but it is a few highlights. Where are we going
from here? To name a few, we are going to
continue to rollout support for
additional embeds as mentioned earlier, we want to make creating animations easier so
that — by doing two things. We want to make animations
easier by expanding the existing preset library of animations as well as adding
support for functionality that will make creating more robust animations within
stories. We also want to support
reactions which are quick actions to provide quick
feedback to let the story’s author and other
users know how they feel. And we are experimenting with branching
allowing you as the publisher to control the flow with the
ability to jump from page to page and share a story
from a specific place of interest,
create a table of contents or create
quizzes even this feature amps up. You can check out the
stories landsing page on amp.dev. This has documentation
for stories as well as story ads. Another great resource to
check out is the full stories best practices
guide at go.amp.dev/best practices. You can check us out
in the demo booth or the tutorial room as well if
you are here live. >>>>hank you. CRYSTAL LAMBERT: Wow.
YUSUKE USTUNOMIYA: Was amazing. CRYSTAL LAMBERT: And Jon said
that was just a few of the thingsism
personally, I am so excited about that travel embed in the Google Search results.
personally, I am so excited about that travel embed in the
Google Search results. personally, I am so excited
about that travel embed in the Google Search results.
personally, I am so excited about that travel embed in the
Google Search results.. Personally, I am so excited
about that travel embed in the Google Search results. That would have been useful for
my time here at AMPConf. YUSUKE USTUNOMIYA: There are
many use-cases. I think I will be busy for the first half of
the year. CRYSTAL LAMBERT: Next up is a 30
minute break. We have a lot more content coming back at 4:30. Be back in these seats at 4:30
and we will be ending with the
Technical Steering Committee panel. YUSUKE USTUNOMIYA: We will have
break starting back at 16:30. It is the last break. If you could go out and talk
with people. Mitsuhiro Naganuma, SUNDAY SYSTEMS, Inc. WYSIWYG Embracing a Mobile First YUSUKE USTUNOMIYA: That was our
last break for today and we have the
last four sessions of the day.
EC-CUBE. That was interesting. Case study from Japan. EC-CUBE, we had a lot of
Japanese and over seas case studies. Cafe24. Next we will talk about what
they made.seas case studies. Cafe24. Next we will talk about
what they made. What they made out of using AMP
services. Please welcome Jinhyoung and Tommy. JINYOUNG KIL: Hello, everyone. I
am so excited to be here and have been able to meet all of
you. My name is Jinhyoung Kil and I am working as a project
manager at Cafe24. My job is to work closely with our partner to
build user-friendly marketing platform integration for helping
our customer growth and business. Firstly, I would like to start
telling you who we are and what we do. Anyone know of Cafe24
here? How about BTS? It they have started from K
drama but it affected and opened up a new
market for fashion and beauty. It has been booming all around
the world. Many of our Korean fashion
beauty sellers chose Cafe24 as our business partner and to tell
you why let me show you statistics of Cafe24. With
1.6 million online shopping stores and more than 5 million registered
users are using Cafe24 service. We support throughout more than
eight global offices to connect Korean
sellers with global markets. More than 76,000 shopping stores
have exhanded globely through Cafe24’s e-commerce platform. We strive to offer exceptional
services to provide merchant with easy and convenient selling
methods while offering global customers a fast and simple
purchasing experience. Moving on let’s talk about AMP
from an e-commerce platform perspective. This is the process of how
e-commerce works. E-commerce platform has a
merchant side which interacts with a back
office admin and customer who interact mostly with our
front-side store. From one end oo to another
service should run smoothly to meet satisfaction for both
sides. This requires an insistent
investment for back end and front end. I say 1.6 online
merchant stores are using it so we need to satisfy them
including their hundreds and thousands of
customers at the same time. Merchant side is in more
commerce area where most operations are done PC base by operators meaning from small
to medium business to large entity,
operators can be anyone and have all different levels of
proficiency on using our service. So, to fulfill merchant, we have simple support
to select the various activities. Customer side is driven toward
market where most interaction is depending on customers and
constantly changing. With the market trend shifting and technology continuing to evolve,
new services and channels are coming in every day and it cost
a fortune to keep with this if doing it manually. To fulfill customer side, it is
important for the front side store to provide user-friendly
functions to support the various shopping behaviors and engagement throughout
different channels. It is important that shopping
content shall maintain merchant and
branch image but deliver it in optimized format for each
channel to bring positive shopping experience. Who doesn’t
know that? But unfortunately, most marketing channels to reach now customers
are paid media. It isn’t the idea for every
business owner to have such kind of
things due to their different business volume and daily task
priority and maybe limiting marketing budget. This is where
AMP comes in. In recent shopping trends shows
mobile traffic is growing faster than every with search engine
optimization playing a huge role in driving organic
traffic growth. Our internal research shows that
49% of mobile search users are using
search engine to find something new and
our merchants are spending 10-15% of
revenue to reach new customers. AMP enables merchants to receive
search engine benefits to reach more
potential customers at lower cost. In our case, it’s free of
charge. Finally, here, let’s talk about
how we could bring positive business
change for Cafe24. We are happy to announce Cafe24
launched the emp service last week and already have more than
20 merchants using AMP service for their mobile shopping
service sites. We focus on our platform integration with AMP in
relation to our customer growth points to ensure that
merchants have the ability to provide the best user experience
in simple steps but to bring up higher performance in convergence at lower cost in a
highly competitive e-commerce market. AMP service will work as an
enabling for merchant global business in the three steps. Not
only keeping the global extent of your content but also
customizing your AMP page do is match your brand
for global target. Secondly, delivering the same AMP
experience regardless of your customer’s given network,
infrastructure, or various device specifications.
And lastly, providing an opportunity to acquire new users and improve
mobile convergence with AMP pages. It can help you grow your
business whether you are a smaller store or larger
marketplace. To continue more interesting
story of Cafe24’s practical AMP
implementation let me introduce Tommy who is the head of
director. TOMMY KANG: Hi, my name is Tommy
Kang. I am so glad to be here to share
how he amplified over 1.6 million online stores. Before we
dive into AMPifying on Cafe24, let’s take a closer look at how easy it is to customize on an
e-commerce platform. We believe it is one of the most
things for customers to be able to feel the color of online
store. We offer high flexibility to can
design your store using HTML, JavaScript, and CSS with no restrictions. We also believe it is one of the
most important things to feel the
color of the online store so we offer high flexibility to
customize your online store using HTML, CSS, and
JavaScript with no restrictions. Just design and publish your
online store as you want and then put
some code for Cafe24 modules such as product list and
shopping cart to give functions. Then you can have your own
online store. Based on this design
flexibility, a huge number of unique design
themes are produced on Cafe24 design center. When building an online store, a merchant can have a — can pick one of them or create
their own by contacting a design agent
through there design center. Highly flexible designed means
you can AMPify your online store effectively when you know AMP
well. If you don’t, it will be very hard to do so. When general
merchants are not familiar with AMP, how to make it easy
for merchant to apply AMP to their
own online stores? You may have noticed already we
provide non-AMP and AMP pages. It automatically generates AMP
pages based on non-AMP therefore a
merchant can have AMP features without
any extras. It was not an easy task to
implement for AMP features which is has practically no design
limitation. Every single online store in Cafe24 has a different design because of
the design flexibility at the level. If you
provided AMP pages with the same design for all online stores,
the customers would have very different user experiences between non-AMP and
AMP pages. We had to find a way providing
AMP pages that make it just look like
non-AMP pages. The solution is that we acquire
the list of Cafe24 modules and sequence of those and settings of each
pages, and then generate the AMP pages
based on the data. So, customers can get almost the
same user experiences on AMP pages. In addition, we provide various options to optimize AMP
pages. Implementing is important but it is also crucial to provide the
optimal environment to use AMP. There are many AMP features that requires HTTPS like video and iFrame and
more. You should use an HTTPS
protocolism we provide this using let’s encrypt
so an online store with run over
HTTPS. Here is an example of a
comparison between non-AMP and AMP. On the left, you see non-AMP
page. Then now on the right, you see
AMP pages. Well, it is not perfect yet. For
better user experiences, we are working on additional AMP
related product. First, a new design mode we code
it as DnD. We provide both non-AMP and AMP
pages but it is not the best user
experience in terms of AMP pages is not the
same with non-AMP and this provides
and certifies with CSS, HTML, and JavaScript that AMP
requires. It allows you to build an online
store with AMP features while keeping
design flexibility. Second as mentioned before, you
can make high-quality AMP pages on
Cafe24 by editing the HTML, CSS, and JavaScript directly when you decide to
apply it to support efficient implementation
of AMP we plan to add AMP validator on
e-commerce platform. We will support design centers. For example, we can provide amp-list on Cafe24 design
center. Cafe24 e-commerce platform is
expanding globally. We are already here in Japan and have been expanding to east Asia.
Some countries have well-established internet infrastructure, but
many countries, including southeast
Asia don’t have it. AMP will improve user experience
dramatically. Cafe24 e-commerce platform will
continue to strengthen PWA to provide the best services to merchant and customers. These
guys are key members of Cafe24. Thank you, again, for the
effort, and thank you. CRYSTAL LAMBERT: Whew. I cannot
tell you how excited I am to see AMP appearing in more and
more e-commerce platforms. So, give a big round of applause
for that. It is so exciting.
[Applause] CRYSTAL LAMBERT: Switching gears
just a bit. I have the absolute pressure and privilege of traveling around
with the AMP road show which does a one-day developer event
for places all over the world. We like to go reach developers
where they’re at and understand what is going on in their
country, in their cities, and what struggles their users
face and the struggles they have trying to meet those users. So I
am just so excited to introduce your next speakers which is
going to be Balla and Levi. It is going to be called no
power, no internet, no support how AMP
bridges the app gap in Iraq and war-impacted
regions. It will talk about how AMP ispeting these user’s needs
and how exciting that really is that the developers can focus more on the users and not on all
this implementation. Please join me in a round of applause as we welcome them to the stage. LEVI CLANCY: Hello, everyone in
English. And in Turkman. My name is Levi Clancy. I am coming here from Erbril,
the capitol of the Kurdistan region
of Iraq. My co-presenter, Balla Khadang,
who despite the great invitation of the AMP team to be here, was
designed a visa by the Japanese government, will be joining us
digitally. Let’s start by hearing her say
hi. That is how we say high in
Kurdish. I am from Koya, a small town in Iraqi Kurdistan. I have
been working here and living in Erbril for over three years. I work as a qualitative
researcher and an interpreter. I am a total self-taught developer
and an artist. I love to create. I love to design, to develop and
build things. That’s why I got into coding in the first place specifically web
development. Today I will be joining forces
with Levi to tackle out AMP, help bridge
the gap in the war impacted areas
starting with our home the Kurdistan area of Iraq.
You will hear me again shortly. Bye.
LEVI CLANCY: Thank you, Balla. We want this talk to energize
you and to develop better experiences for war impacted and other vulnerable
people. We want you to use AMP to do it
and we will tell you why. First, let me introduce why AMP
is an amazing laboratory to explore
all of these issues. A sindosh for all these reasons. Erbril, behind me is a photo of the oldest inhabited place in
the world. Christians, Assyrians like the
woman above, Turkman’s, Jews such as
myself, Arabs, Kurds, YazidisYazidis, call the
Kurdistan area home each with their own specific mothertongue, dialect, and
needs. The Kurdistan region and in the disputed territories are
achingly and mesmeriingsmerizingly gorgeous.
Our home is not what you might be assuming. We have shopping
malls. We have high-rises. We have a great urban core with
suburbs, highways, you go beyond that, and we have mountains with
rivers and waterfalls, and flowing green
hills. Kurdistan is so diverse that we actually celebrate four
different new years. There is the Kurdish new year. There is the Yazidis’ new year
which is taking place today. An amazng act of resilient after
azidis faced a genocide by the Islamic.
And there is the regular new year. There is a fifth one if you
count rashShanna at my home. We are also a region of refugee
camps filled with families mostly from
Syria who are too poor to rent their own home. Often arriving from cities you
may have heard in the news Kobani and
other places. They come with absolutely nothing except counting on both hands
the number of loved ones who they have lost
in the Syrian war. War impacted people who
experience deep misery and from digital experiences are a
lifeline. These people are at the core of our talk. At the extreme margins of the demdemographics that tech is
usually optimized to serve. Now, before we dive in, I want
to address the elephant in the room that I am sure some of you are
thinking. You may wonder why bother? Why
bother? OK. Let me tell you why. You ask that because you have
never been given an answer but, yes,
you should put Iraqi Kurdistan and
other war impacted regions on to your
development roadmap. Aside from it being polite,
consider the acquisition of Egyptian
ridesharing app by Uber recently for more
than $3 million. Precisely because it is not just
work in perfect Dubai. It also works in places like
Baghdad, for example, where business will always continue even in the darkest
times. Iraq alone has tens of millions
of people. Opportunities to connect with
and between. The GDP of Iraq is almost $200
billion U.S. dollars. Imagine a product that works
well there, which very few do. Iraqi people and Iraqi
opportunities including Kurdistan are kept on the far side of the technology ecosystem
by what we call the app gap. The systematic exclusion of users
due to false assumptions and
incompatible choices about application design. The app gap happens when you
developer and you chose that content will not load in the
background when the user goes to need it their signal has been
lost. They can’t get it. It happens when you add an
Arabic translation to your site but it is horrible. It is done
poorly. It is difficult to access. Then you just skip Kurdish and
Aramaic. We will focus on these issues, internet, electricity, language,
and how you can overcome these problems
with AMP but I want to emphasize one thing. When we talk about
all these issues, back home I am not living with bombs exploding
overhead. The Kurdistan region is totally
safe. Behind the border of the
peshmerga, the area of Iraq. Despite being surrounded by
Syria on one side, federal Iraq on the other, turkey, Iran and for years the
Islamic State as well. But because we are a safe haven
we are in a special place to understand
war-impacted people’s needs. Our neighbors, our friends, our
peers, the home next door, or the
refugee or IDP camp up the street, equal to
us, and to you, in all manners of the
soul. Unequal only in the prejudice
that they experience that extends to everything from finance, to travel, and to
technology application design too. The reason why Balla was banned
by the government for being at her own presentation today, and whose
knowledge, wisdom and capability, would have been silenced if it were not for the
support of the AMP team in having her
here digitally. A lot of these issues I am going to talk about
are going to be familiar for some of you. There are people in
America, homeless populations woo suffer from some of these
issues. In India, in Kenya, there is
issues of limited bandwidth there also. There are issues
that some of you probably face of political
persecution. Now, all of these issues
intersect for war-impacted people. The sorest losers are not the
educated yupies and people in Kurdistan who can behind behind a VPN and are
already fluent in English. It disinfranchises people who
are already disenfranchised. They are threats for IDPs, for refugees, for Iraqis, trans
women, minorities, these amazing communities that we have in the region,
content creators with voices. After showing these AMP
solutions to these issues, we are going to
show some examples of how we use it in
Erbril and why AMP has become our preferred toolkit for myself, Balla and other
members of our narrative.fyi collective team including a
feminist icon whose Kurdish and Iraqi and
people like NorMatti. These are people doing on the
ground challenging work that requires digital integration and
we have decided to use AMP first. Now, back to Balla. BALLA KHADANG: Hello, everyone.
I am back again. You might ask why start off with
language instead of addressing how simple and straightforward
building an AMP page is or all the flexibility you get once you
adopt the AMP format. All of this is amazing but I would like to talk about issues that are
relevant to my hometown and can be solved with AMP. I will start
with a real life example. My mother’s native language is
Kurdish and this is the only language she speaks. This
creates issues for her whenever she goes online. It takes ages to switch
languages and even with she finally succeeds in switching
between languages the translations get all messed up
or the translation itself is not really that good. We need make
switching between languages easier and smoother for both
users and developers without any distortions of the text or the
meaning of the words. One way to do this is by putting
all translatable elements in a Jensen file and Levi will talk about that in
more detail. LEVI CLANCY: The problem of
language switching that Balla described
is actually huge. It is neglected and so obvious. We found a great easy fix with
AMP. So the main thing as Balla said
is that translations are often unavailable or just bad.
Switching languages is difficult or forces a hard refresh. Now, using AMP you can make an
easy JSON file translatable elements that then loads for the
user to swap versions without even needing to reload the page.
Now, you may be thinking that sounds difficult but it is a lot
easier. You can have all your navigation copy in one JSON
file. It is great for collaboration. You don’t have to open your
codebase. You can store it in a separate
reposrepository. You can see it anything is missing. You can run
it for quality control. You can add new languages. It is going
to look something like this when you have it ready. We are going to load it into an
amp state component and then we will keep that same JSON around as an
array because we have to initialize
the initial state. It is going to look like this when it is all
loaded. You are going to make some buttons. You can put these in an
amp-light box at the top. As you can see it is just an
issue of using amp-set state and the code itself. You will have
the initial value, then you will bind with the text. Now, with
this, you can be sure there is a consistent experience across all versions and any updates to
translations propagate out seamlessly. Now, we are going to see an
example here. We have English and we have
Arabic. When you tap just changes
effortlessly like that. One thing I recommend is that
you can set a default text direction but also let your
users containing it themselves. You can see that in the corner.
We have two buttons for text direction. The usefulness of that is if a
lot of places people use a mex — mix
of scripts and languages. I have not seen any web application, or
any type of application, that allows users to set their own
text direction so easily but it is very important
for legibility. Now, back to Balla. BALLA KHADANG: Now on to the
second issue. It is true that world class
internet is not available in the Kurdistan region but as you can guess many cannot
afford expensive internet services and you won’t be able
to view photos or watch videos since they will take up so much of your gigabytes and you will
have to refill your phones in a few days or even a few hours in case you are
interested inning watching a video. Purchasing cheap bundles limits.
Internet can be so slow it will take years to low. We call this
connection syndrome. Poor loading systematically
blocks many ref gees in particular. AMP
helps create web applications that a faster to load and lighter in
a sense they won’t use too much of your internet data or even
with a slow connection the web pages will load smoothly and
almost instantly. This is all possible since AMP is designed to be a very accessible framework for curating fast mobile pages.
Levi, show us how. LEVI CLANCY: The key thing here
is design your web page to degrade gracefully. One of our
favorite tools for this is amp-list. First of all, with an amp-list
less is sent over extremely limited
bandwidth. Your page can also give solid
error messages if something fails to load. A simple request goes out, gets
reply of JSON with the list elements,
that is all it sent over the web after the page loads. This allows major improvements
in accessibility and areas where connections drop or lag. Also,
the list can automatically check for updates and even concatenate
to the end. This example that we are going
to show, something we built for folks to
set-up their own CV website. You need a few thing for the
Iraqi context. We fit as much as possible into a single web page to minimize page
loads and use amp lists with form
inputs. We decided to silo them. You
save. The form goes out and the amp
list reloads with a new content at the origin. With amp-list you
can even set conditionals. You can check if something changes,
you can check if something is
missing, and using CSS you can do a nice
delete function. Save. That’s it. This is actually a pretty
standard AMP impimplementation. I want to emphysical the impact
is majorlymajorly — I want to
emphasize the impact is major. Use it affectively and
creatively. Use it for tables. Use it for forms and especially
take advantage of meaningful error loading and success
messages. Even if your user goes offline they will know you built
your product with them in mind. Now, back to Balla.
BALLA KHADANG: The third issue on our list is electricity. The Kurdistan region suffers
from chronic electricity shortage.
Power cuts happen all the time. Even in the best places. It would be awesome to solve our
electricity issue but I don’t think this is going to happen.
At least not at the moment since the region has been struggling
with electricity for decades and I would say it will take a few
more decades to overcome it. Whenever there is a power
outage, the web signal in the home or office is lost, the
worst part is when you are almost done writing an email and
the power cut happens. Four — your precious data can disappear
in seconds. That is just one part of the issue. Let’s not
mention how long it will take for the Wi-Fi to work properly again. I am going to hand it over to
Levi because he is going to explain how we can store content
in the background to avoid loosing data.
LEVI CLANCY: So, as Balla said, the power cuts unexpectedly all of
the time in the Kurdistan region. With AMP, developers can
really easily make forms that save in the background so that content is saved up
until the minute of the cut and gives them a response to let
them know the connection has been lost. By using amp-form you could
implement graceful forms more easily than every before and
standard operating practices are built right in. Now, I am not the world’s like
best developer but using amp-form I
can build something for a wide range of devices and a wide range of use-cases
with a single effort. I never thought I could see easily build forms with autoic
saving graphs with a single and largely off the shelf component.
It let’s me build products that work where I live. I am sure all of you are
familiar with amp-img. I want to point out it is extraordinary useful in areas like the
Kurdistan region. It loads in a graceful manner and even if the
connect is not strong enough to load the full picture they can
still get everything else on the page. I also want to touch on building
progressive web apps. Using AMP, this is something we
are exploring to deliver specific services in the lightest, quickest
possible manner using available AMP
components. You may say, OK, that’s just
optimization. It is not just optimization.
Think of it this way. You could say a camera drone is
the same thing as just a quadcopter
with camera strapped to it. What differentiates the two is
quality, accessibility, availability, documentation, support, and
timing with one framework. I think that is essentially what separates using AMP in war
impacted areas from just using maybe
jQuery or something else people are familiar with. The optimization, the effort,
the responsiveness, the user experience is already so embedded into AMP,
but ultimately, I think maybe one of the most vague but overlooked
things, that is also very important with AMP,
is simply put community. On that note, I want to show some
examples from our community in Erbril of how we have used AMP. Behind me is a woman who is
Kurdish and Iraqi. She uses social media, radio,
television, every available technology to rally support with
her hundreds of thousands of followers for human rights and femminism
but she faces challenges on many
platforms. The app gap I was describing.
And getting her content out to everybody. What about people who
can not afford any data package? So, she, and narrative. fyi, including myself, developed
the 100 women street gallery to share
the stories of 50 Kurdistani and
international icons and bring it to physical places around Erbril
and around the broader Kurdistan region to
provoke and to challenge. There are some figures who are
widely respected like sheffe guardy who
was martyred by an explosive device. What about someone like Don Wilcox? What response would we get about
her? Dawn — What about layla? The first ballet dancer from the
Middle East and a Kurdish woman who to
this day faces backlash for expressing herself as she choses
to through her art. We were struggling with this and sitting
around talking. I showed dashne the AMP website. I said listen, we can use these
components and we can build this really cool app-like experience. We finally opted to have
posters, messenger codes. You can scan it with your mobile
device and it pops up a messenger pot
and opens up with the bio and rich content. You can tap on the
message and open an AMP page that delivers an app-like
experience within messenger itself. It is a cool integration
of different platforms together. You can see the final artwork on
display yesterday actually. It just launched yesterday. You can
see the women. The names. The messenger codes in the upper
corner. We could share content that was rising and
controversial and challenging. We had a great turnout at the
opening reception. Content that is really
challenging but within the safer culture context
of a digital space using AMP. Normatea is a radio and
television host in Erbril for Babylon media. He is Assyrian and he pretty
much runs almost all of the shallma foundations efforts to
empower and support the resilience and survival of
Assyrian villages and towns in Kurdistan, the plains and Iraq. He has been developing a
database of Assyrians and other villages in
Iraq. We were talking and by showing
him AMP components, we have decided to migrate his database
over to AMP. It is going to be both for
visitors and the public who can access it easier and it will
also be for administrators by using AMP features we spoke
about they can do data entry directly right
there in the field even in challenging and network and
electrical conditions. It is not just about people who are
creating things. It is about users. Users like Shada, this amazing
human being, a beacon for light and equality from Iran living in Erbril but
who faces threats for her life standing up for human rights off and online. Mustaffa who is Kurdish. Naheed to leave school to work
but when the barber shop where he was was targeted by a terrorist attack,
the bomb rendered his right arm largely
weak and he could no longer work. He rebuilt an identity
using social media as an influencer. Melinda who does tireless work
organizing the Assyrian community in Australia and
America and Canada and everywhere to come back to Iraq.
The country of youth who have experienced things like
multiculturalism like Ivan online. I just want
everybody here to become comfortable reaching out. You
can go to our website and reach out on facebook or WhatsApp. Ask
any questions you have about any issues we brought up and if I
don’t have an answer, myself, me, Balla one
of us will get you in touch with
someone who will. Thank you. YUSUKE USTUNOMIYA: Was a very
good talk. I think it was a very good talk. The web is very open
so everyone should be able to access it and we want to build an environment where
everything is open and if AMP can play a big
role there that would be wonderful. Next, we have a panel section
directly after this and that is the last session of the day. The session speaker is AMP’s PM. His name is Rudy.
What’s next in AMP is the talk. He is going to talk about the
future of AMP we always have Rudy speak about
the future at the end of day one and
that’s next. RUDY GALFI: Hi, I am the product
lead for AMP at Google and a member of AMP’s Technical
Steering Committee. I am here to provide you with a few peaks at
the future. We have done this talk for the
past few years at AMPConf and it is really thrilling to be back
with you in Tokyo for our third addition.
This year we thought we would do things a little differently because the
other TSC members and they are eager to come out here.
Momentarily they will be up here on stage for the panel, but
before we do that, I thought it would be helpful if I came out
and framed things up for that discussion. Earlier in the keynote, you
heard about AMP’s vision and mission. These statements are
important for us woo work on the project to get aligned and have
a good common sense of the North Star vision that we have and how
we get there. AMP s vision is a strong user first
open web that stays with us forever and benefits people and enables the freedom
of expression, the exchange of ideas and a pursuit of
opportunities. Just as importantly, we need
some basic agreement about how we will get there and that is
what our mission statement does. We want to provide a user-first
format for web content that supports
long-term success of each player in the
ecosystem. That is how we as a Technical Steering Committee and
as a community figure out how to do new cool things with AMP. As
we look ahead to what is next, I thought it was useful to take a
look at where we were coming from and recognize many of the same themes that
guided us are the keys to understanding how I think 2019
will look. There is three major themes. The ninety-first is — the first
is we have been exploring new frontiers. We are starting to think about
the long-term view of the projects. Along with this, we
have thought about how the web platform is going to
evolve and how AMP will help lead that
revolution. And with new applications of AMP and thinking
about the long-term vision, we have thought how do we best
accommodate collaborative approaches and contribution and
engagement within the project. Let’s take a closer look at
each. To begin, I told you we think
last year was a big one in terms of establishing new frontiers
for the AMP projeck. At the beginning of AMP back in
2015, our focus for AMP was on websites. We observed the
performance and usability problems we saw across the web were pretty common and thought
the solutions needed were established. Asynchronous loading resources. But a lot of the stuff is easier
said than done. There has been lots of books and blog posts
written about these things and they are things you need to
constantly reinvest time to do. And even as a developer, even if
you get them all right, often your experience can be affected
by third party things long ads and
analytics. As we moved into 2016, we found another which is
AMPHTML ads. This idea we could put this on rails and provide a format for
advertising that is needed to run business but ensures they
are really use-first and safe. And an AMPConf last year we
introduced AMP for stories and AMP for
epails epails. All four of these things are really super excited fronts for
web-base content in the AMP. I want to spend quite a bit of
time talking about AMP for websites but let me cover updates about AMP for
ads, stories and e-mails. AMPHTML ads, first up. The first
thing we would like to do with AMPHTML ads is related to
coverage and expand the number of places where AMP ads can appear and one big
one is within mobile apps. There is work happening in the
coming year to support that. Even looking at the web, there
is a bunch of ad creatives that are
not explored so a key think is about capabilities. This is
support for canvas API. Of course, as we are doing this
we want to make sure the Runtime is getting thinner and the performance for
AMPHTML is improving. I invite you to the talk
tomorrow to learn more about AMP and
advertising. Stories is next. Embeds for
social posts and we want to explore making it possible to do
live updating content within a story. We want to introduce more
animation capabilities so you have the tools you need to make
storytelling more engaging with motion and stories should evoke
emotion. We are in the early stages of
planning out how it would look to enable people to do things
like reactions in stories. And stories may not be linear. We want to explore how we can
include a way to do things with branching
and AMP Stories. You can imagine this being
useful for quizzes and other narratives. Next up for email,
as the email system begins to grow, one theme is to focus on compatibility making sure all
the emails created look and behave the same way even as they
are served up with different clients. We are looking at video support
taking the same playbook and starting a small number of capabilities and
looking to broaden out over time and that is true of video and a whole host of
components in the core of AMP that we could look to bring to email as long as it
makes sense and we can bring that in a safe way. We have a whole section on email
in the afternoon tomorrow. I want to focus most of this
talk on AMP website so let’s dig in there.
There is a lot of different things I could cover when it comes to AMP
for websites but I will just call out a few. We continue to
focus on e-commerce experiences for AMP. It is now possible to
build almost everything piece of the upper funnel using AMP.
Things like category page and product detail pages. We want to
make it easier to build out the payment part of AMP experiences
so you can build a full AMP base
website from the top of the funnel down. The next thing I call out is the
50 KB limit for your CSS. We identified a technical approach
we think will work well for solving
this. We will introduce an adaptive
approach to handling the CSS limit. As long as your utlization of
CSS is high you can go beyond the limit. We think this will improve the
developer experience and allow us to maintain a good user
experience. To build a nice cohesive AMP
based website, we wouldn’t to think about going from
individual pages to offering nice fluid transitions between
the pages. We will focus on transitions as a goal of how to make AMP feel more
app-like as a whole. Then lastly, we want to focus
more on statefulness. Continuing on from the theme
around transition, you could for example, be on a filtered produck listing view
and then click and go to a detail page. It is natural as you are in a
browsing mode on an e-commerce site to go back to the view of
the filtered list. If you go back you want to make
sure you were in the same state and that is what we mean. This
is an area we will work on improving AMP in the coming year
as well. Much OCH the — much of the
ongoing work is how we can best build
out AMP. of the ongoing work is how we
can best build out AMP. He Why do we think about AMP as a
service? It goes back to the themes at the beginning. That is
thinking about AMP in the long term sense. Let’s look at how we
are investing in AMP and the web with a long term view. As we
built out AMP over the last couple years, enabling AMP-first
websites has been a priority. That is a website that reflects
the long term view of AMP. It is one where the pages are
using AMP to deliver the core site.
The amp.dev is an example of this. It is built using AMP. AMP first
contrasts with the paired mode of AMP. This is where you have
the AMP page but it is paired to a non-AMP
version. If you go directly to the site you will
not get AMP. It is an important model for
publishing to AMP. You will be able to experiment and get going and it is one we will
continue to support. We hear about the ongoing maintenance
which of course is not the point. It bears emphasizing we
think AMP first is the destination to reach. A lot of
new advancements we are putting into AMP is about making AMP
first more viable and easier to achieve. For instance, one insight we
have gathered watching sites striving to go AMP first is getting maybe 90 or
99% of the way there is possible. AMP’s components go a long way
to unlocking the core experiences you need but
sometimes there is that last mile that is tough. You will
need custom capability and custom JavaScript to do. You heard the exciting news
about amp-script goal to trials. We would like to have cases that
are not blocked. Some may remember we were
excited to preview amp-script last year. You might wonder what is in
score this year. We see amp-script filling the
role of getting the last bit into ramp
but what about getting going with ramp? Can we create a
better on ramp? With you use AMP the mindset is you build the
page and it needs to pass the AMP validator. Why is this the
case? AMP is like a tightly assembled
engine with the core and components we expect to work
together. The assumptions can be broken
when it is invalid. We don’t know if the pieces will work
together in the way we expect. There is no guarantees.
This all or nothing approach makes for a steep entry. It is
reasonable to wonder if I am not sure if I will be able to get
there the way there should I try? One of the big new undertakings
for AMP in the coming year is something we are calling Bento AMP. You can pick
and chose the parts of AMP you want to use and it will work.
You can use AMP as a web component library. This means the AMP components
will work outside and non-AMP components and be able to
interact with each other and you will be able to use them with
client-side rendering frameworks. As you can imagine, this is
going to require quite the re
architecture but it is one of the most audacious
things we have lined up. We are just getting started and hopefully have more to tell you
at next year’s AMPConf. Bento AMP allows you to deliver
component level wins offering great usability and a starting
point toward getting to full AMP bit by bit and over time you can
work toward getting to a place where it is fully valid AMP that
gets the full advantage of AMP like instant loading and
embedability. Bento AMP represents the
opportunity to take something that came from
ramp, easy to configure image carousels and
extend it across the whole of web
content. We spent the year thinking about how to take ideas cultivated in AMP and
take advantage of them as web platform features. Web packages
is an example of this. It solves the idea of scalable
web wile protecting someone’s personal information. We are excited about a new
upcoming technology called portables that takes the idea
something can be embedable and this is what we use to drive the
AMP experience or have emails that
are secure across the web. Suffice to say working on these
things and making sure we can bring
them to the web platform is relevant in AMP
in the coming year. Another area we are looking to
grow out the web platform is in metrics.
There was a time we asked what were the core user benefits? It is fast
loading and preventing content from getting shipped around and making sure it is ready for your
interaction so you can tap or scroll and not have weird jank
and delay. We found metrics that exist were not good at capturing
the user experiences we were going for.
There has been a lot of work building on new metrics that will capture
the user experience benefits. The last theme for the year has
been around how do we set-up models to contribute with the
product and engage with it more effectively. One of the big things has been
the updated governance. We have a Technical Steering Committee
that is responsibility for setting AMP’s product and
technical direction. Right now we have seven people. There is an advisory committee
that helps the TSC do their job by
contributing varied viewpoints. It is about 50 people
representing news publishers, to e-commerce sites,
CDNs, and open web advocates but the working groups are really
where it is at. We have a dozen different working group spinning
many of the technical and community segments of the
project. This is the key place where the
project roadmaps are getting set, featured figured out and
built out and the work is happening. You can join a working group and
get engaged. We had our first contributor summit this past fall and we will do
the same thing year. I am hoping we will see you this fall at the
next AMP contributor summit. I would like to thank you for
listening and joining me in welcoming Crystal back to the stage as we move on to
the TSC panel. Thank you. CRYSTAL LAMBERT: Rudy, so many
exciting things about what is next in AMP. Thank you for
taking us through that. Coming up next is the Technical
Steering Committee panel. We have a chance to answer all the
questions you guys have about the new governance model. Just a quick thing about the
Technical Steering Committee is they are
comply comprised of developers that
have a significant contribute. They have a great vested
interest in the future of AMP and making sure it
keeps the web open and engagng for
everybody involved. Developers with users a like. Welcome on to the stage Chris of Pinterest, David of panth theon, Paul of Twitter,
Rudy up here and Saulo of Microsoft and that is me up there again too.eon, Paul
of Twitter, Rudy up here and Saulo of Microsoft and that is
me up eon, Paul of Twitter, Rudy up here and Saulo of Microsoft
and that is me up there again too.eon, Paul of Twitter, Rudy
up here and Saulo of Microsoft and that is me up there again
too. Well, hello everyone. Thank you
so much for joining us on stage. It has been a really excited
first day at AMPConf. Can’t believe we close off with
having a conversation with all of you. Thank you so much. My first question is what are
the Technical Steering Committee members excited about coming up
on AMP’s roadmap? One of the most exciting things
for me is the introduction of Signed Exchanges because it addresses one of the
hardest problems around the actual delivery of the page URLs for the sites so
that publishers can actually have URLs that represent their
own content and their own brands as part of the
delivery of content going through AMP.
I would like to add AMP for email. I am very excited about
it even though it has been out there for a while. Just now
publishers are getting to it. It adds such a nice retention to
emails we have never had before. Because it is standardized way,
other email providers are onboarding to it. I am very,
very excited to see what publishers are going to do it
about. >>
>>CRYSTAL LAMBERT: I would like to
Echo with email. One of the biggest things in
years is dynamic content coming in. What about the governance
model? It is a big shift for AMP? What is going on with that?
>>I think it is going pretty well. We have been meeting regularly
and have adopted a model of delegating
the actual technical decision making to the working group model to the
actual technical experts. I think that is the correct model
and we will continue to do that. As a decision making body we
have operated on a consensus basis
and that is going pretty well. I think overall it is going pretty
well and hopefully it will continue. I am going to add a bit of
perspective because I mean from Google’s
perspective is there was a big shift because there are all
these other people who get to make decisions. I have
personally really appreciated how this is actually going. We have these meetings and I
think people are always really prepared. They do provide more perspective
and different viewpoints that are valuable and make decisions
better than we would have been ourselves. I think it really adds very true
value for me personally which is really nice.
Yeah, I would like to add Microsoft’s perspective on these
because before the open governance model there was
a lot of hesitancey around the company to adopt AMP, invest in AMP, work with
Google because Google was the owner, maintainer and soul
decision maker. When that shift came and we were part of the
community, the whole company started seeing AMP with a
different set of eyes and we could integrate with search product and other
products inside the company. It has been great for us and great
to partner with Google and other companies.
CRYSTAL LAMBERT: It is great to hear. It sounds like the
governance model shows we are really truly
embracing the community and that leads to the next question. Is
the opening of the governance a really great first step in the
correct direction but it seems like the project is still
formally owned by Google. Can my fellow Googlers raise
their hands. There is a couple of us still
here. Has there been any discussions on what the next
step is going to be like? Yeah, let me get into the that
and give background. You just saw three hands going up. It is definitely the case that
as Chris mentioned we make decisions as a
group and try to find consensus. There
is a method to force a decision when consensus can’t fee found
and in that case the majority gets to decide and obviously
Google doesn’t have the majority on this panel. The question what
it comes down to is there is the ownership of the
copywrite which is owned by Google and you have to sign a contributor
license agreement where you are assigned
your own copy write. It is incredibly annoying but
sets up intellectual property to be easy to be understood and
straightforward so all of you who use AMP can be sure it
is in good working order and you can use it under the lines it is
published. That gives Google the
perspective of the copy write owner meaning little because the software is open
source but I think it is important from a point of view
to change that. We have actually had for a long
time looked at transferring the copy
write over to a foundation which would be the institution from
which, let’s say the governance eminates. That is definitely
something we are looking at. Moving to a foundation means a
lot of bureaucracies so we want to
change the governance and at some point
when we see that is working well maybe the copy write over to a
foundation as a more ceremonial step at that point.
CRYSTAL LAMBERT: That is super excited to hear there is so much more to
come with keeping this open. Speaking of keeping it open,
what does the panel have in mind for efforts to broad n the diversity of the
Technical Steering Committee membership?n the diversity of
the Technical Steering Committee membership?en the diversity of
the Technical Steering Committee membership?
I think AMP is open to content creators and consumers
worldwide. If you look at our panel right now, we are not very diverse and Frankly
geographically very similar. One of the things about the TSC that
was envisioned from the start was to have at least nine
members and currently we are at seven. We are looking diversify the representation across the panel
with at least two more people and,
hopefully, geographically as well. I know that makes a big
difference in terms of what we are looking at.
CRYSTAL LAMBERT: A couple AMP-specific questions. Can we
use AMP partially? And Rudy, that sounds like it
has to do with Bento AMP when you just
presented. RUDY GALFI: As you saw in the
talk I gave, we see this in the community where people are using
AMP but add invalid things and there has been a lot of interest
in this so that has been the inspiration behind Bento AMP and
we are excited to take the step to
figure out architecturally how we will achieve this. Dina, you
have been working on this. Want to add what it will
require? I think we expect composition
will be the most difficult problem you
will have to solve here. Those parent-child relationships are
critical to create high-quality components.
Ironically, with web components APIs themselves address this
very little. That’s where initially AMP stepped in and we defined the APIs between
parent and child components to be able to do things like effectively create
elements when they are needed, in many cases, user may never
see the component so there is no reason to over ax
the platform. From the UX point of view, or functional, we have to start
playback and pause playback and start animations and stop as the
user goes from one part of the UI to the other.
Again, these kinds of relationships are really, really
important to have a high-quality component and AMP does it by
layering its own API layer and controlling the document
environment which of course in open web case
we no longer can do as easily. Web communities actually started
looking for this a little bit. For instance, there is a display
lock in the API in the works but we have other work ahead of us.
CRYSTAL LAMBERT: Isn’t that always true? All right. So, this was a question
originally asked in Japanese, so thank you, so much for our team
for translating it for me. We have talked a lot about
publishing and media but there are so many
advertisers here working with AMP and in the audience. What
are the things the Technical Steering Committee is thinking
about to do in the future to satisfy
these advertisers? Any representatives here today
for the advertisers side? Or any plans to include them as well? Yeah, so, I think I talked about
AMPHTML ads. We are super excited about that. That is our
vision in terms of the ad space. We want to remake that space by
thinking about how we can go at it from a
user-first and secure approach from the get-go. There is a
number of things we have done in terms of monetization
inside AMP pages and running regular
display ads. I would be interested to hear if there is more specific feedback around things we could going but in
terms of AMPHTML ads we are excited. In tomorrow’s talk you
will hear about case studies and stuff that has been happening in
that space. On the representation point, I think it is pretty valid to call out that
our advisory committee, for example,
could have more representation of the
many different constituents. There would be a lot of
complexity and different viewpoints to accommodate and I
think that is one thing we could look at better. How do we bring that into the AC
and balancing that we want the AC to be a reasonable size. We
do have publishers in the AC who are pretty advertising and
monetization minded. CRYSTAL LAMBERT: And the AC is
the advisory committee? That is correct. I want to add one point which is
there is an AMP ads working group. This is where, like, people do
focused work on this topic. It is where people who really
care can come together. As a model this has been working
particularly well for folks who are financially interested in
something and the ad space comes with that field. For example,
companies like Adobe who are working with tooling, that
is the place for them to come together.
Maybe better to go to the ads working group. You can check
more about that at the governance and find out there is
a specific person leading that group and you can go to them and
discuss more with them. CRYSTAL LAMBERT: There is a page
on amp.dev under community for governance which discusses all
this and breaks it down and we will help you find where you
want to go for working group and stuff like that. This is a question I would also
love to know the answer to. Why is amp.dev no longer an AMP-only
website. AMPproject.org used to be AMP-only. What happened here?
What switched? This is a great question. You
will hear more about the answer to this tomorrow. Basically, there is an AMP
toolbox optimizer. We have a tool where if you are serving
AMP from our origin we suggest you use this tool and it will
make it better than the default AMP out of the box. However,
right now, when it applies all these optimizations it causes
the page to be invalid and so because of that, adopting that,
which we suggest, puts you into a state where you have to use
the paired AMP model. So one of the things we are going to be
working on in the coming months is to support the optimized
version being considered valid as well. So, once that happens then we
will be able to actually have amp.dev work the same way you
are used to seeing ampproject.org work which
is you go there and you see the green light up and it
shows it is valid. CRYSTAL LAMBERT: Thank you so
much. Next one is in this Oscar’s
opinion, the fast majority of webmasters
can’t implement Signed Exchange and they wouldn’t use Cloudflare either.
How do you think you can make Signed Exchange more available?
This is a great question. I mentioned earlier that Signed Exchange is confronting a rather
challenging problem of presenting the original URL
rather than the URL for the AMP Cache or specifically the
domain. We are still in the very early
stages of Signed Exchanges. We are looking at following some of Cloudflare ‘s example on this
implementation where they have made it extremely easy to
implement Signed Exchange. We don’t expect everyone to use Cloudflare as the only way to
implement Signed Exchange but the — but
still need to be putting out a better brightly lit path for the implementation
of these technologies. At the same time, we are trying
to carefully balance the security implications of this
rather substantial change to the way domains get
displayed in a web browser which is disconnected from the actual
server that is delivering the content for the page. We just
have to be very careful. We are interested in making this
as easily available as possible without actually introducing risks to
users. CRYSTAL LAMBERT: Sometimes
change and moving things forward has little bumps in the road. A
follow-up to that is currently Signed Exchange is only
supported in Chrome. Is that going to to be brought
to other browsers such as iOS and Safari? I will answer for Safari. There is no one from Apple here
and if they were they would say they don’t comment on future
changes. That is just the reality. I
think one year ago when we first talked about supporting Signed
Exchange we committed as the AMP team to actually, as PUCH h as possible support other
browsers and doing the Signed Exchange implementation. That is
work that is already going on. On the other hand, it is
important to recognize Signed Exchanges do
present a change in the web architecture. It is deeply
in their interest to investigate it. This is not like where we are
trying to engage. When I say we, that is including
the AMP team and more importantly
folks on the Chrome team who work on the
standardization and implementation side who want to
get this done. And the standardization organization who
is handling this complicated detail but because it is a
networking layer thing, it is not the W3C that
usually does web standards. There is lots of moving parts. We optimistic but have to
realize it is up to the browser vendors to make the decision on
which vendors they want to ship. CRYSTAL LAMBERT: Today we
unleashed the Kraken of amp-script and there has been
tons of questions rolling in. One of those is what is included
in the 150 kilobyte limit? Do I need to consider time
frames in React? This is what we talk about when
we talk about performance budgeting a lot in my world as
well as with the Chrome performance dev team. Yes,
everything is included. That is the short and easy answer. Very
much keep that in mind when you are using something like react
which is my go-to. You are talking about 109 KB uncompressed meaning you have
about 41 left for the rest of the application. Put that into perspective and
use your tools wisely. See what is available.
Something you could switch out for that is maybe a little too
large. It never hurts to shave off bits
here and there. CRYSTAL LAMBERT: That is all we
have to say about amp-script. CSS still tends to be hard in
AMP. What do you think is the best way to use CSS? As the
Technical Steering Committee is there anything you would want to
do to make CSS better in AMP development?
Yeah, so, I talked about this. I am assuming this question is
kind of getting at the 50 KB limit.
Yeah, as I said, we are taking an approach we want to think about
CSS like adapting the threshold. So, it will be based on the idea
of ut utilization. We have been
successful about getting people to think about this and
it is successful. We don’t want user do is
download stuff they will never have to use. That is the
approach we have defined. We have actually had this design
laid out for a little wile but I think this is the year where we
hopefully make it happen. I have a follow up question. With Bento are we able to use import from CSS?
Yes. CRYSTAL LAMBERT: That must be
important for of us to hear. When AMP was first announced to
the world it was built on the notion the web is not very fast.
AMP is based off its speed. Of course, we want to know will AMP
become faster? And how? And how do we measure this
speed? >>Will AMP become faster? Yes.
How? We have several projects ongoing in particular, I think,
we really want to get AMP’s JavaScript size down especially the part that blocks
page rendering. There is a few things going on but I think that
is the main one. The measurements, so we rely on
the same kind of metrics that
browsers expose, and adding a few on top. One of our key metrics, that is application layer for AMP, is
what we call first viewport complete. That is a metric that measures
for all AMP components on the page with the exception of ads.
We don’t care when they come. Sorry. We wait for every
component in the first viewport to load and that is the key
moment we want to achieve as fast as possible. That is something we measure and
track and has been remarkably stable
over the life of AMP. AMP has gotten more complex and
those numbers have basically stayed
flat but also reflected a little bit that
infrastructure is get better over time which is nice to see.
Overall worldwide the web is getting a little bit faster.
CRYSTAL LAMBERT: Speaking of speed, what is going to happen to AMP when
we reach 5G? So, you, I would like to try to
answer this one. I don’t think it changes so much
because you are still going to have people with limited access
to high speed bandwidth and limited hardware
capacity in some places. As AMP was built for everybody,
I don’t think we, as a community, see
that changing in the near term. A short answer is nothing
changes but, of course, this can be changed
in the future, but I think I truly
believe AMP’s purpose is still going to
be there even with higher speeds.
I think this comes back to the last question as well. What happens when we get to 5G
is we keep making AMP faster. We have to realize not everyone
has access to 5G. There are many parts of the
world just emerging on to 2G. We are not a single-serving
different marksismmarksism nt marksism etetsesmarkets. Also with the latency we need to
make sure 5G is faster. I think the other thing is with
AMP we were really going after a differentiated user experience.
Not just fast but instant. So, there is a lot of stuff around
AMP that we have just done in service of that mission and how
can we get more content across the web to be instant so Signed
Exchange — really excited about that space because it let’s us
do this in a way where you still have like the URLs and things like that that
are from the publisher. So, you know, yes, 5G is great but instant is this
different experience of quality. We will always be thinking about
how to invest in AMP to make sure it is something we have
being more ubiquitous. Even places with the most
advanced infrastructure, once the 5G is widespread in
availability, there will still be widespread impacts to
people’s user experience even walking
down the street to the actual connection quality they have.
Slow or lower quality connection is going to be a persistent problem
or challenge in the space for loading web pages.
And I think one final point that we are bound by the speed of light and
— well, I mean if you calculate how far away from here a server in the United
States is, around trip it is about 200
milliseconds. It will not get faster than
this. Worm holes and blah blah blah
but 200 milliseconds quickly gets
into large numbers. The same design minimizes the number of
round trips you need to do meaningful progress I think it
is here to stay. It is forward compatible.
Earlier we were joking about going to Mars but we will and
then we will have the right technology for it.
CRYSTAL LAMBERT: I find it really funny you say we are
bound by there speed of light and I mean this with all pun
intended that the lightning speed of AMP is quite shocking
when you consider I believe in everybody’s lifetime in this
room we all experienced dial up. I am very excited to see what
the next couple of years will bring. So, let’s give a big
round of applause for our panelists for giving us
such great time and such great
questions. I want to thank all of the audience members here for
submitting such great questions for everyone. I am so, so, sorry if we didn’t
have time to get to yours in today’s panel. You may have
another chance at the Google panel tomorrow. Please keep
submitting questions for that. We will be back in this room
tomorrow at 9:00 a.m. I know we started at 9:30 today
but there is no registration today. Please stick around
because across where we were serving food there is going to be a fantastic party
and our Panelists will be available for you to speak to
and maybe get the questions answered. Thank you so much for
coming and giving such a wonderful day one of
AMPConf. [Applause]