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.

15 months of AMP

102 views

Published on

Google introduced the AMP ecosystem 15 months ago. In symbolic 15 points, Robin introduces the technology, sums up the development and reception since, and sneak peaks its future revealed on the recent AMP Conf.

Recording: https://www.youtube.com/watch?v=74eg0wgSIuQ

Published in: Internet
  • Be the first to comment

  • Be the first to like this

15 months of AMP

  1. 1. 15 months of @robinpokorny
  2. 2. ⊊ HTML5 <img>, <video>, <script>*, …banned <html ⚡> HTML inlined CSS < 50 kB
  3. 3. <script async src="https: //cdn.ampproject.org/amp-v0.js"> </script> runtime Components <amp-img> <amp-carousel> <amp-analytics>
 <amp-social-share type="twitter">
  4. 4. cache @ Google https: // www.google.cz/amp/s/ robinpokorny.github.io/git3moji/
  5. 5. Static layout system
  6. 6. 1st year 1.7 B 870 K AMP pages published domains Huge development – but where?
  7. 7. Web Components <script async src="https: //cdn.ampproject.org/v0/amp-carousel-0.1.js"> </script> <amp-carousel width=300 height=400> <amp-img src="my-img1.png" width=300 height=400> </amp-img> <amp-img src="my-img2.png" width=300 height=400> </amp-img> <amp-img src="my-img3.png" width=300 height=400> </amp-img> </amp-carousel> <amp-youtube>, <amp-iframe>, <amp-sidebar>, <amp-font>, …
  8. 8. Dynamic data <form method="post" action-xhr=“https: //…”> <input type="email" name="email"> <input type="submit" value="Subscribe"> <div submit-success> <template type="amp-mustache"> Thanks {{email}} for subscribing! </template> </div> <div submit-error> <template type="amp-mustache"> Oops! {{message}}. </template> </div> </form> <amp-list src=“https: //…"> <template type="amp-mustache"> <div> {{title}} </div> </template> </amp-list>
  9. 9. amp-experiment <amp-experiment> <script type="application/json">{ "button-color": { "variants": { "A": 50, "B": 50 } } } </script> </amp-experiment> body[amp-x-button-color="A"] .button { background-color: red; }
  10. 10. Breaking the web? AMP isn’t encouraging better performance on the web; AMP is encouraging the use of their specific tool to build a version of a web page. https: //timkadlec.com/2015/10/amp-and-incentives/ Tim Kadlec The good news is that it’s open source and the project owners seem receptive to feedback. https: //medium.com/@adactio/amped-up-4e000e4b4886 Jeremy Keith Personally, I dream of future, still-to-be- invented web standards that would allow us to get there — to move beyond cache models https: //medium.com/@pbakaus/why-amp-caches-exist Paul Bakaus, AMP Developer Advocate
  11. 11. amp-parallax https: //ampbyexample.com/components/
 amp-fx-parallax/preview/ AMP Conf AMP Start https: //ampstart.com/
  12. 12. amp-bind <p [text]="'Hello ' + foo” [class]=“products[currentProduct].class" >Hello you </p> <button on=“tap:AMP.setState({ foo: ‘Frontendisti’, currentProduct: 'pj68' })"> https: //ampbyexample.com/samples_templates/product_page/
  13. 13. AMP + PWA AMP with PWA features manifest.json AMP as data source for PWA Shadow AMP API: AMP.attachShadowDoc(container, doc, url) AMP as entry point into PWA <amp-install-serviceworker>
  14. 14. For whom?
  15. 15. @robinpokorny

×