Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

15 months of AMP

239 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
  • Login to see the comments

  • Gehören Sie zu den Ersten, denen das gefällt!

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