O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

AMP for JavaScripters

712 visualizações

Publicada em

Implementing Interactive Interfaces with AMP

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

Publicada em: Internet
  • Businesses pay you up to $25 per hour to be on Twitter? ■■■ https://tinyurl.com/rbrfd6j
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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

×