Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

15 months of AMP

237 vues

Publié le

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

Publié dans : Internet
  • Login to see the comments

  • Soyez le premier à aimer ceci

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