Next generation UX of EC-Cube, powered by AMP (AMP Conf ’19)
Articles,  Blog

Next generation UX of EC-Cube, powered by AMP (AMP Conf ’19)


Hello, everybody. Welcome to the last AMF Conf
of the Heisei era. I knew you were going to laugh.
Thank you. I am Oku Kiyotaka from EC-CUBE. I am Naganuma from Sunday Systems. We would like to talk a little bit about the optimization
of EC-CUBE UX with AMP. First, we’ll explain
how we are involved with AMP. We are developing EC-CUBE, an open-source CMS package
designed for e-commerce. About 30,000 e-commerce stores
have been built with EC-CUBE, and are still in operation. In October last year, we released a major version upgrade, EC-CUBE version 4. In February this year, in order to offer valuable features
not available in the packaged version, we launched the cloud
service version, EC-CUBE.co. Thus, EC-CUBE keeps growing. So far, we have focused on the development
and optimization of the backend. And with the release of EC-CUBE 4, to proceed to the next step, we wanted to improve the front end, for a better user experience. And so, we decided to use AMP. Our utilization of AMP was featured at the Chrome Dev Summit last year. We developed an AMP plug-in for EC-CUBE. By installing the AMP plug-in in EC-CUBE, you can apply AMP’s powerful
functionality to your e-commerce site. In our development, thanks to the rich functionality
and ease of use of AMP, we were able to release the plug-in in less than a month. I’ll briefly introduce its functions. The plug-in allows websites to offer AMP pages, which perform
better than standard pages. AMP pages are responsive so you can provide users
with a similar experience on both desktop and mobile versions. It is also possible to provide
native app-like behavior by adding it to the home screen. Now, Mr. Naganuma will talk about the detailed implementation
of the plug-in. Regarding the implementation details
of the EC-CUBE AMP plug-in, I will talk about how the AMP plug-in
generates AMP templates and explain the role this plug-in plays. To start with, the major roles of the plug-in are as follows: Firstly, the usual version of EC-CUBE
has Twig templates. The plug-in adds Twig templates
adapted for AMP. This applies to top of page items like
product lists and details as well as to page components such as search boxes,
which are called blocks. Secondly, the plug-in adds a function
that links the management interface with the front-end executed AMP processing and settings. For example, using a tool
known as an amp-optimizer, the user can define the setting to publish an optimized AMP page
from one’s own server through the management interface. Since the setting of this optimizer is simply an option, it is possible to publish the site
through the Google AMP cache without any optimization. Thirdly, you can implement a simple PWA by automatically installing
a Web App Manifest and Service Worker. These are the three major roles
of the AMP plug-in. So, to start with, I will talk about
the first role, which is the Twig template
adapted for AMP. When AMP-enabling EC-CUBE, the AMP template that comes with the plug-in installation already includes some built-in
AMP components which enables an interactive UI. The components are embedded in the
base structure of the original Twig file, but there are several points
that must be taken into account. It is necessary to enable the
standard EC-CUBE page interactions even after AMP is added. I will take this product details page
in EC-CUBE as an expample. On this smartphone display animation, depending on what you choose
in the selection box you can see that
the product price and code change. In the product details page in EC-CUBE, customizable product features
such as size and color are implemented as selection boxes. As a result, these interactions occur in response to the changes
made in the selection boxes. The visible part is the change in product prices or codes, or change in the button design
depending on availability of inventory. And the invisible part is the change in form values. Here is a part of the JavaScript code written in the Twig template
within EC-CUBE. In the existing EC-CUBE,
behaviors related to the form are implemented using jQuery, but this obviously
cannot be used in AMP pages. So, the interaction has to be implemented using AMP components. AMP components such as amp-list,
amp-bind and amp-mustache are required in order to operate
the selection box you saw earlier and to implement the corresponding dynamic behavior. Here is the source code
for the implementation part. The general procedure involves using amp-list to get the JSON file, using amp-mustache to render
the data from the JSON file to the amp-list, and then using amp-bind
to enable the dynamic behavior triggered by the change
made in the selection box. Here, you can see how the src attribute
written in the amp-list tag and the JSON file generated
from the back-end are being read. Here, where it is
written in the template tag, the content displayed is modified
by the mustache method according to the JSON data that was read. Next, if you look at the selection tag: you can see that the change event
set in the “on” attribute is the trigger for the interaction. Such interactions are also implemented on pages
other than product details pages, and when using AMP, it is important that
you use the AMP components to install the alternative functions
so you can achieve the same interaction
as in the original EC-CUBE. Now, I will talk about the second role
of the AMP plug-in, how it extends the functions of the management interface and how it coordinates
with the front end. Since EC-CUBE is a CMS, various settings related to
AMP conversion need to be easily performed
through the management interface. The AMP plug-in will allow you to choose the AMP configuration for the site, and edit the source code and CSS. Once the plug-in installation
is completed, you can check its contents using the plug-in list
of the management interface. Proceeding from the plug-in list screen, you will see items related
to the settings for Paired AMP and AMP First. Paired AMP is used to create
a standard HTML page and a corresponding AMP page. AMP First is configured
to make AMP pages only. Both can publish pages through the Google AMP cache. Here, you input the optimization process and the URL regarding optimization. This can be used only
when amp-first is selected, and is a linkage function
that enables self-optimization processing using the amp-optimizer. For example, let’s assume you created
an optimization API and linked it with Cloud Functions
on GCP. The management interface sends
an optimization instruction which sends the Twig template
from the EC-CUBE server to the API. Then the EC-CUBE server
receives the optimized AMP page and then publishes the data
from the original EC-CUBE server as an optimized AMP. As many of you probably know, the amp-optimizer works like this. Thanks to this processing, the optimization performed
by the Google AMP cache can be done on your own website. The fact that the AMP plug-in
uses an optimized AMP document as a Twig template is a main characteristic. Next, regarding the CSS
of the AMP-enabled page, you can apply a style
to each page individually through the management interface. The CSS registration criteria shows the capacity of the input content, which is the total of the CSS
of the original AMP page and the CSS assigned to each page. This allows you to make sure
the total capacity of CSS does not exceed 50 kilobytes. For example, it is possible to set
a normalized CSS for the AMP setting page and set individual CSS
according to the design of each page. Now, I would like to talk
about the third role of the plug-in, that is, the PWA. When you install the AMP plug-in, Service Worker and Web App Manifest
are added automatically, enabling the site to function as a PWA. This allows you to use PWA functions
such as reading the boot resource from the home screen. The PWA functions
are very simple at this stage, but if site operators
want to implement app-like functions, they should offer a useful basis. And Workbox libraries
are used to generate Service Worker. When a CMS vendor
performs design customization it is possible to create a Service Worker
based on the actual situation and record it in the AMP plug-in. The Web App Manifest can be modified from the admin screen. You can record the document
from the previously mentioned AMP settings page
of the management interface. Finally, I would like to show you
an example using this plug-in. This is an e-commerce site
selling sunglasses and glasses. The top of the page,
product list, and product details are operated using amp-first. As you see, you can launch the site
from the home screen. And when a user searches and visits
a page that supports AMP, and then moves to a page
that is PWA-enabled, Service Worker delivers
pre-read resources, enabling a high-speed user experience. Thank you. To conclude, I would like to talk
about our future plans. In order to let
more users experience AMP, we want to make AMP easy to use, through our platform EC-CUBE.co. We will also improve the plug-in, like installing infinite scrolling, adapting to AMP Service Worker, Signed HTTP Exchange, and other functionalities. We showed you just one example today, but we would like
to develop many more examples. I hope together we can make AMP
become more and more popular. Please feel free to contact us
if you need anything. Thank you very much. Thank you.

Leave a Reply

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