reveal

AMP Roadshow Taipei

AMP Roadshow

Paul Li

Agenda

Agenda

  • - Yahoo TW - Auction
  • - Suggestion
  • - Like
  • - What else can we do ?

Yahoo TW Auction

show chart

Yahoo TW Auction

The most popular and biggest e-commerce site in Taiwan.

10:21

tw.bid.yahoo.com

AMP i13n Dashboard AfterBefore

  • USERS
    39.56%
  • NEW USERS
    133.91%
  • BOUNCE RATE
    33.76%
  • TRANSITIONS
    26.24%
  • REVENUE
    34.34%
  • USERS
  • NEW USERS
  • BOUNCE RATE
  • TRANSITIONS
  • REVENUE

Case Share - Suggestion

Case Share - Suggestion

Case Share - Suggestion

AMP Components

  • - amp-list
  • - amp-mustache
  • - amp-bind
  • - Event - input-debounced
10:21

tw.bid.yahoo.com

Case Share - Suggestion

unfold 
※ HTML Structure:

<input type="search"
    [value]="status.search.q"
    on="input-debounced:AMP.setState({
        status: {
            search: {
                on: true,
                q: event.value,
                r: random()
            }
        }
    })">

<amp-list
    width="auto"
    height="180"
    layout="fixed-height"
    src="webService?action=init&_=RANDOM"
    [src]="'webService?action=query&q=' + status.search.q + '&r=' + status.search.r">
    <template type="amp-mustache">
        <ul>
            {{#suggestions}}
                <li>
                    <a on="tap:AMP.setState({status:{ search:{ q:'{{q}}' } }}),itemSearch.submit">
                        {{{content}}}
                    </a>
                </li>
            {{/suggestions}}
        </ul>
    </template>
</amp-list>



※ CSS Part:

<style>

input:placeholder-shown ~ amp-list {
    display: none;
}

</style>
10:21

tw.bid.yahoo.com

Case Share - Like

Case Share - Like

Case Share - Like

AMP Components

  • - amp-form
  • - amp-list
  • - amp-mustache
  • - amp-bind
  • - amp-access
10:21

tw.bid.yahoo.com

Case Share - Like

unfold 
※ HTML Structure:
									
<form id="likeForm" method="post" target="_top"
  action-xhr="webService.php"
  on="submit-error:AMP.setState({dialog:event.response});
      submit-success:AMP.setState({likes: {m100398791795:event.response } })">
  
  <input type="hidden" name="action" value="like" />
  <input type="hidden" merchandiseId="action" value="100398791795" />
  
  <a class="like-wrap" on="tap:likeForm.submit">
    <amp-list
      width="60"
      height="24"
      layout="fixed"
      credentials="include"
      items="."
      src="webSercice?action=fetch&merchandiseId=100398791795&_=RANDOM">
      <template type="amp-mustache">
        <p class="like-ens like {{#isLike}}like--on{{/isLike}}"
          [class]="'like-ens like' + ((likes.m100398791795.isLike) ? ' like--on' : '')"
          [text]="likes.m100398791795.likeCount">
            {{likeCount}}
        </p>
      </template>
    </amp-list>
    <p amp-access="NOT access" amp-access-hide class="like-ens like none-access"></p> 
  </a>
</form>
10:21

tw.bid.yahoo.com

After Componentlize

After

Auction Search

10:21

tw.bid.yahoo.com

10:21

tw.mall.yahoo.com

10:21

tw.buy.yahoo.com

What else ?

What ?

「What else can we do ?」

「Are there any limitation for AMP design ?」

Let's take a look what really happened.

Yahoo TW Auction

Yahoo TW Auction
frontpage

  • - Custom UI
  • - <amp-img> with object-fit
  • - Back to top
  • - Sound effect
  • - CSS Vars
  • - CSS Grid
  • - iX Design
10:21

tw.bid.yahoo.com

Progressive Web AMPs

Progressive Web AMPs

  • - manifest
  • - metadata & link
  • - Offline Storage

Love could be spread

Paul Li

  • Front End engineer
  • HTML / JavaScript / CSS
  • work @ Oath
  • facebook: mei.studio.li
  • #DoRightThings

thankful

Thanks, all of you.