tech.sunnyw .Net: Google AMP Hackathon 2017

Google AMP Hackathon

Recently got invited by Google to join their AMP Hackathon at the Sydney HQ. Very exciting opportunity to get my hands dirty with the engineers from the Google AMP team. Here are some prerequisite courses that we have to do before the day.

Hackathon

The performance of AMP is very impressive, it is not hard to see pages loaded in under 2 seconds, and here is the trade off for the speed.

No external JS (aka no React / Angular etc)
No external CSS (no bootstrap)
Inline CSS limit to 50kb

As we can see immediately why the site can be loaded at such lightning speed. As their engineer described, "it is very hard to make amp page to load slow".

During the hackathon, I went for a harder piece of work. I was trying to build the sorting filter in the product listing page by using amp-bind and amp-list, similar to one of this.

This is what a product listing page looks like on our site.

My attempt of our product listing page by using AMP.

Using amp-bind and json to render the sorting options in amp-list.

<select on="change:AMP.setState({
  src: '/json/related_products'+event.value+'.json'
})">

<amp-list class="items"
  width="600"
  height="900"
  layout="responsive"
  src="/json/related_products.json"
  [src]="src">

The last part is to assemble the json for the amp-list to consume and presented by amp-mustache. The json is exposed from our back end system.

PWA

In their presentations, we also briefly went over the PWA stuff. Seems like an interesting combo to use both AMP and PWA by using the amp-install-serviceworker component.