AMP is a Thing for Programmers

AMP was created to make simple websites faster. It's grown into a full-featured web components library that aims to make the web easier for users and developers alike! It restricts the use of JavaScript - so how might it be good for programmers?

Raghu and I discuss how AMP aims to bring the best of the web to everyone even before they write a line of JavaScript. But also:

• You can create user interactions using binding, JS state objects, and JS expressions
• AMP works well with PWA
• The just-released WorkerDOM library is part of an effort to allow multithreaded JS in AMP, using Workers
• Everyone is encouraged to contribute to the AMP open-source project.

Transcript

1. AMP is a Thing for Programmers
2. 2 Ben Morss - Ben Morss é um Developer Advocate no Google, onde trabalha focado em aprimorar a Web a ser mais rápida e mais bonita. Antes do Google, ele era um músico em tempo integral. - @benmorss
3. Raghu Simha Technical Lead (Infrastructure), AMP - Raghu simha é engenheiro de software baseado em NYC na equipe de amp do Google, que desenvolve as ferramentas e a infraestrutura usadas pelos engenheiros da AMP e pelos colaboradores externos. @rsimha on GitHub 3
5. 5 Accelerated Mobile Pages
7. 7 of consumers will abandon a site if it takes longer than 3 seconds to load. 53% (data from Google Analytics)
8. 8 19 seconds Average mobile web page load on 3G
9. 9 60% of mobile connections worldwide are 2G
10. Como faço meu site mais rápido?
11. 11 An open source initiative to enable a better web, with sites that are fast, easy to create, and mobile-friendly.
12. What is AMP?
13. A beautiful mobile experience... 13
14. … and a beautiful desktop experience 14 Built with
15. 15 AMP HTML AMP JS AMP Cache
16. AMP: Some Facts 16 *except in amp-iframe
17. <amp-iframe width="200" height="100" src="https://..." layout="responsive"> </amp-iframe> layout: Responsive Elements 17 <div class="sixteen-nine"> <iframe width="200" height="100" src="https://..."> </iframe> <div> .sixteen-nine { position: relative; } .sixteen-nine { display: block; content: ""; width: 100%; padding-top: 56.25%; } .sixteen-nine > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } Without AMP With AMP
18. 18 layout: Responsive Images <amp-img> width="1698" height="2911" layout="responsive" src="/img/narrow.jpg" srcset="/img/wide.jpg 640w, /img/narrow.jpg 320w" alt="this is a cool image" </amp-img> <img src="/img/image.jpg" width="100%"> <img> Without AMP With AMP
21. 21 JS Chunking Time chunks JS task Idle time
22. 22 Batching DOM Read (measure) DOM Write (mutate)
23. 23 Polyfills import {install as installArrayIncludes} from './polyfills/array-includes'; import {install as installDOMTokenListToggle} from './polyfills/domtokenlist-toggle'; import {install as installDocContains} from './polyfills/document-contains'; import {install as installMathSign} from './polyfills/math-sign'; import {install as installObjectAssign} from './polyfills/object-assign'; import {install as installPromise} from './polyfills/promise';
25. Sim! Meu site é melhor agora!
26. AMP is a Thing for Programmers
27. 27 <amp-bind> change page content in response to user actions using data binding and expressions
28. 28 <amp-bind> State. Bind. Mutate.
29. <!-- Define a state called "team" with property "star" --> <amp-state id="team"> <script type="application/json"> { "star": "Ronaldo" } </script> </amp-state> 1. STATE
30. 2. BINDING <!-- Bind text to the expression "'Olá ' + team.star" --> <p [text]="'Olá ' + team.star"> Olá Ronaldo! </p>
31. 3. MUTATION <!-- Tap to change the value of team.star. --> <button on="tap:AMP.setState({team.star: 'Ronaldinho'})"> Who's that other guy? </button>
32. <amp-state id="team"> <script type="application/json"> { "star": "Ronaldo" } </script> </amp-state> <p [text]="'Olá ' + team.star"> Olá Ronaldo </p> <button on="tap:AMP.setState({team.star: 'Ronaldinho'})"> Say hi to the other guy! </button>
33. <div class="tooltip" [class]="'tooltip' + (tooltip ? ' tooltip-show' : '')"> Great price! </div> <amp-date-picker ... on="select:AMP.setState({ tooltip:event.dates.filter(d => d.id == 'deals').length > 0, startDate:event.dates[0], endDate:event.dates[event.dates.length - 1] })"> <template type="amp-mustache" info-template> <span [text]="'You've selected ' + startDate + 'to ' + endDate"> </span> </template> </amp-date-picker>
35. 35 <amp-install-serviceworker> AMP ⇨ PWA
36. 36 1 2 3 User discovers content Service Worker installs in the background User is instantly upgraded to PWA
37. 37 AMP in PWA <script async src="https://cdn.ampproject.org/shadow-v0.js"></script> Shadow AMP
38. a DOM subtree that lives within another DOM element PWA AMP AMP AMP Shadow DOM
39. <script async src="https://cdn.ampproject.org/shadow-v0.js"></script> <script> function ampReady(callback) { (window.AMP = window.AMP || []).push(callback); } ampReady(() => { // things we want to do once AMP is loaded AMP.attachShadowDoc(container, doc, url); }); </script> Shadow AMP
40. 40 Code: https://goo.gl/kAhHGw amp.cards AMP ⇨ AMP/PWA
42. 42 const shadowDoc = AMP.attachShadowDocAsStream(hostElement, url, options);
45. 45 Main thread Worker thread MutationObserver postMessage() postMessage()
46. 46 Uau! Meu site é excelente!
47. 47 It isn't just for publishers anymore.
49. 49 Web packaging on the AMP cache
50. 50 AMP By Example (www.ampbyexample.com)
51. AMP Start (www.ampstart.com) 51
53. 53 Weekly public design review meetings
54. 54 github.com/ampproject/amphtml @ampHTML ampproject.org/latest/blog
55. Obrigado!