AMP for JavaScripters

AMP for JavaScripters
Implementing Interactive Interfaces with AMP
Weston Ruter & Felix Arntz | #JSforWPConf

Agenda
The AMP Framework
AMP Components
AMP Actions and Events
01
02
03
AMP State and Bindings
AMP Script
04
05

AMP is a web component framework to
easily create user-first websites.

Interactivity in AMP
Developers using AMP
AMP Framework Technologies

• AMP is an open source project.
• AMP has an open governance model.
• AMP is built on the open web.
Democratizing Performance

A Minimal AMP Document
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="self.html">
<style amp-boilerplate>…</style>
<noscript><style amp-boilerplate>…</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
Hello world.
</body>
</html>

ValidatorWeb Components CDN & Cache

Types of Elements Used in AMP
Built-in
HTML Tags
Optimized
Replacements
Custom
Components
<p> <amp-img> <amp-accordion>

Optimized Replacements
<img> → <amp-img> / <amp-anim>
<iframe> → <amp-iframe>
<audio> → <amp-audio>
<video> → <amp-video>

Component Example
<amp-carousel>
<amp-carousel type="carousel" ...>
<a class="project-highlight" href="...">
<amp-img src="..." ...></amp-img>
</a>

</amp-carousel>

Component Example
<amp-image-slider>
<amp-image-slider width="300" height="200" layout="responsive">
<amp-img
src="https://upload.wikimedia.org/.../Whole_world_-_land_and_oceans.jpg"
alt="Earth at Day"
layout="fill"></amp-img>
<amp-img
src="https://upload.wikimedia.org/.../City_Lights_2012_-_Flat_map_crop.jpg"
alt="Earth at night"
layout="fill"></amp-img>
</amp-image-slider>

Component Example
<amp-image-lightbox>
<amp-image-lightbox id="lightbox1" layout="nodisplay">
</amp-image-lightbox>

<figure>
<amp-img on="tap:lightbox1.open" role="button" tabindex="0"
src="..." alt="Picture of a dog" width="300" height="246"></amp-img>
<figcaption>Border Collie.</figcaption>
</figure>

Component Example
<amp-list
layout="fixed-height"
height="100"
src="https://blog.amp.dev/wp-json/wp/v2/posts/"
items="."
>
<template type="amp-mustache">
<div>
<a href="{{link}}">{{{title.rendered}}}</a>
</div>
</template>
</amp-list>
<amp-list>

Mobile Menu: amp-sidebar
<button id="toggleNavMenu" on="tap:navMenu.toggle" aria-controls="navMenu">
Toggle Menu
</button>
<amp-sidebar id="navMenu" layout="nodisplay" side="left">
<button id="closeNavMenu" on="tap:navMenu.close">
Close Menu
</button>
<nav>
<ul>
<li><a href="...">...</a></li>

</ul>
</nav>
</amp-sidebar>

Component API
AMP Events AMP Actions
Triggered by the user. Triggered by an AMP event.
Abstraction of native DOM events. Similar to methods on DOM elements.
on="{event}:{elementId}.{action}[({arg}={value}...)],{event}:{elementId}…"
<button id="toggleNavMenu" on="tap:navMenu.toggle" aria-controls="navMenu">
Toggle Menu
</button>

Global Events and Actions
Events
● tap
Actions
● show
● hide
● toggleVisibility
● toggleClass
● scrollTo
● focus
amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events
#globally-defined-events-and-actions

Element-Specific Events and Actions
Events
● change (<input>)
● submit (<form>)
● slideChange (<amp-carousel>)
● sidebarOpen (<amp-sidebar>)
● ...
Actions
● submit (<form>)
● play (<amp-audio>)
● goToSlide (<amp-carousel>)
● open (<amp-sidebar>)
● ...
amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events
#element-specific-events

Mobile Menu: toggleVisibility
<button id="toggleNavMenu" on="tap:navMenu.toggleVisibility" ...>
Toggle Menu
</button>
<nav id="navMenu" hidden>
<ul>
<li><a href="...">...</a></li>

</ul>
</nav>

• State
• Expressions
• Bindings
amp-bind

<amp-state id="count">
<script type="application/json">0</script>
</amp-state>
Count: <output [text]="count">0</output>
<button on="tap:AMP.setState( { count: count + 1 } )">Increment</button>
Example: Click Counter

<amp-state id="cart">
<script type="application/json">
{ "quantity": 0 }
</script>
</amp-state>
Quantity: <input [value]="cart.quantity" type="number" value="0" readonly>
<button on="tap:AMP.setState( { cart:{ quantity: cart.quantity + 1 } } )">
More
</button>
<button on="tap:AMP.setState( { cart:{ quantity: max( 0, cart.quantity - 1 ) } } )"
disabled [disabled]="cart.quantity == 0">
Less
</button>
Example: Shopping Cart Quantity

<amp-state id="navExpanded">
<script type="application/json">true</script>
</amp-state>
...
<amp-state id="cart">
<script type="application/json">{"quantity":2}</script>
</amp-state>
...
<amp-state id="skus">
<script type="application/json">["123", "456", "789"]</script>
</amp-state>
Multiple amp-state elements

Mobile Menu: amp-bind
<amp-state id="navMenuExpanded">
<script type="application/json">false</script>
</amp-state>
<button id="toggleNavMenu" on="tap:AMP.setState({ navMenuExpanded: ! navMenuExpanded })"
aria-controls="navMenu" aria-expanded="false"
[aria-expanded]="navMenuExpanded ? 'true' : 'false'"
[text]="navMenuExpanded ? 'Close Menu' : 'Open Menu'"
>Open Menu</button>
<nav id="navMenu" hidden [hidden]="!navMenuExpanded">
<ul>
<li><a href="...">...</a></li>

</ul>
</nav>

• Script runs in Web Worker sandbox
• WorkerDOM library exposes DOM APIs
• Built for modern frameworks (e.g. React, Vue)
amp-script

Mobile Menu via amp-script
<amp-script src="https://example.com/.../nav-menu-via-amp-script.js">
<button id="toggleNavMenu" aria-controls="navMenu" aria-expanded="false"
data-open-text="Open Menu" data-close-text="Close Menu"
>Open Menu</button>
<nav id="navMenu" class="hidden">
<ul>
<li><a href="...">...</a></li>

</ul>
</nav>
</amp-script>
const button = document.getElementById( 'toggleNavMenu' );
const navMenu = document.getElementById( 'navMenu' );
button.addEventListener( 'click', () => {
const hidden = ! navMenu.classList.contains( 'hidden' );
navMenu.classList.toggle( 'hidden', hidden );
button.setAttribute( 'aria-expanded', hidden ? 'false' : 'true' );
button.textContent = hidden ? button.getAttribute( 'data-open-text' ) : button.getAttribute( 'data-close-text' );
} );

• Escape hatch
• Limit of 150KB
• Script limited to DOM in scope of container
• Not all DOM APIs are supported (yet)
amp-script: Restrictions

Canvas Drawing via amp-script
<amp-script src="canvas-drawing-with-amp-script.js" width="400" height="400">
<button>Start drawing!</button>
</amp-script>

Password checker via amp-script
amp.dev/documentation/guides-and-tutorials/develop/
custom-javascript-tutorial

w.org/plugins/amp
AMP
in WordPress

amp.dev
amp-wp.org
Learn More
github.com/westonruter/javascriptforwp-conference-amp-examples

Thank You
Felix Arntz
@felixarntz
Weston Ruter
@westonruter

AMP for JavaScripters

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Similar to AMP for JavaScripters

Similar to AMP for JavaScripters (20)

More from Felix Arntz

More from Felix Arntz (7)

Recently uploaded

Recently uploaded (20)

AMP for JavaScripters