Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
The AMP Framework
AMP is a web component framework to
easily create user-first websites.
AMP is an HTML Framework
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 Perform...
A Minimal AMP Document
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=devic...
ValidatorWeb Components CDN & Cache
AMP Components
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>
Custom Components
Component Example
<amp-carousel>
<amp-carousel type="carousel" ...>
<a class="project-highlight" href="...">
<amp-img src=...
Component Example
<amp-image-slider>
<amp-image-slider width="300" height="200" layout="responsive">
<amp-img
src="https:/...
Component Example
<amp-image-lightbox>
<amp-image-lightbox id="lightbox1" layout="nodisplay">
</amp-image-lightbox>
<!-- ....
Component Example
<amp-list
layout="fixed-height"
height="100"
src="https://blog.amp.dev/wp-json/wp/v2/posts/"
items="."
>...
Mobile Menu: amp-sidebar
<button id="toggleNavMenu" on="tap:navMenu.toggle" aria-controls="navMenu">
Toggle Menu
</button>...
AMP Actions and Events
Component API
AMP Events AMP Actions
Triggered by the user. Triggered by an AMP event.
Abstraction of native DOM events. S...
Global Events and Actions
Events
● tap
Actions
● show
● hide
● toggleVisibility
● toggleClass
● scrollTo
● focus
amp.dev/d...
Element-Specific Events and Actions
Events
● change (<input>)
● submit (<form>)
● slideChange (<amp-carousel>)
● sidebarOp...
Mobile Menu: toggleVisibility
<button id="toggleNavMenu" on="tap:navMenu.toggleVisibility" ...>
Toggle Menu
</button>
<nav...
AMP State and Bindings
• State
• Expressions
• Bindings
amp-bind
<amp-state id="count">
<script type="application/json">0</script>
</amp-state>
Count: <output [text]="count">0</output>
<b...
<amp-state id="cart">
<script type="application/json">
{ "quantity": 0 }
</script>
</amp-state>
Quantity: <input [value]="...
<amp-state id="navExpanded">
<script type="application/json">true</script>
</amp-state>
...
<amp-state id="cart">
<script ...
Mobile Menu: amp-bind
<amp-state id="navMenuExpanded">
<script type="application/json">false</script>
</amp-state>
<button...
AMP Script
• Script runs in Web Worker sandbox
• WorkerDOM library exposes DOM APIs
• Built for modern frameworks (e.g. React, Vue)
a...
Mobile Menu via amp-script
<amp-script src="https://example.com/.../nav-menu-via-amp-script.js">
<button id="toggleNavMenu...
• Escape hatch
• Limit of 150KB
• Script limited to DOM in scope of container
• Not all DOM APIs are supported (yet)
amp-s...
Canvas Drawing via amp-script
<amp-script src="canvas-drawing-with-amp-script.js" width="400" height="400">
<button>Start ...
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
AMP for JavaScripters
Upcoming SlideShare
Loading in …5
×

AMP for JavaScripters

125 views

Published on

Implementing Interactive Interfaces with AMP

Presented together with Weston Ruter (https://twitter.com/westonruter)

Published in: Internet
  • Be the first to comment

AMP for JavaScripters

  1. 1. AMP for JavaScripters Implementing Interactive Interfaces with AMP Weston Ruter & Felix Arntz | #JSforWPConf
  2. 2. Agenda The AMP Framework AMP Components AMP Actions and Events 01 02 03 AMP State and Bindings AMP Script 04 05
  3. 3. The AMP Framework
  4. 4. AMP is a web component framework to easily create user-first websites.
  5. 5. AMP is an HTML Framework
  6. 6. Interactivity in AMP Developers using AMP AMP Framework Technologies
  7. 7. • AMP is an open source project. • AMP has an open governance model. • AMP is built on the open web. Democratizing Performance
  8. 8. 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>
  9. 9. ValidatorWeb Components CDN & Cache
  10. 10. AMP Components
  11. 11. Types of Elements Used in AMP Built-in HTML Tags Optimized Replacements Custom Components <p> <amp-img> <amp-accordion>
  12. 12. Optimized Replacements <img> → <amp-img> / <amp-anim> <iframe> → <amp-iframe> <audio> → <amp-audio> <video> → <amp-video>
  13. 13. Custom Components
  14. 14. Component Example <amp-carousel> <amp-carousel type="carousel" ...> <a class="project-highlight" href="..."> <amp-img src="..." ...></amp-img> </a> <!-- ... --> </amp-carousel>
  15. 15. 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>
  16. 16. 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> <!-- ... -->
  17. 17. 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>
  18. 18. 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>
  19. 19. AMP Actions and Events
  20. 20. 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>
  21. 21. 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
  22. 22. 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
  23. 23. 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>
  24. 24. AMP State and Bindings
  25. 25. • State • Expressions • Bindings amp-bind
  26. 26. <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
  27. 27. <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
  28. 28. <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
  29. 29. 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>
  30. 30. AMP Script
  31. 31. • Script runs in Web Worker sandbox • WorkerDOM library exposes DOM APIs • Built for modern frameworks (e.g. React, Vue) amp-script
  32. 32. 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' ); } );
  33. 33. • Escape hatch • Limit of 150KB • Script limited to DOM in scope of container • Not all DOM APIs are supported (yet) amp-script: Restrictions
  34. 34. Canvas Drawing via amp-script <amp-script src="canvas-drawing-with-amp-script.js" width="400" height="400"> <button>Start drawing!</button> </amp-script>
  35. 35. Password checker via amp-script amp.dev/documentation/guides-and-tutorials/develop/ custom-javascript-tutorial
  36. 36. w.org/plugins/amp AMP in WordPress
  37. 37. amp.dev amp-wp.org Learn More github.com/westonruter/javascriptforwp-conference-amp-examples
  38. 38. Thank You Felix Arntz @felixarntz Weston Ruter @westonruter

×