Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

15 months of AMP

238 visualizaciones

Publicado el

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.


Publicado en: Internet
  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

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: //"> </script> runtime Components <amp-img> <amp-carousel> <amp-analytics>
 <amp-social-share type="twitter">
  4. 4. cache @ Google https: //
  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: //"> </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: // Tim Kadlec The good news is that it’s open source and the project owners seem receptive to feedback. https: // 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: // Paul Bakaus, AMP Developer Advocate
  11. 11. amp-parallax https: //
 amp-fx-parallax/preview/ AMP Conf AMP Start https: //
  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: //
  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