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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (8)

Semelhante a AMP for JavaScripters

Semelhante a AMP for JavaScripters (20)

Mais de Felix Arntz

Mais de Felix Arntz (7)

Último

Último (20)

AMP for JavaScripters