15 months of AMP
•
0 likes•349 views
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
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 15 months of AMP
Similar to 15 months of AMP (20)
More from Robin Pokorny
More from Robin Pokorny (13)
Recently uploaded
Recently uploaded (20)
15 months of AMP
- 4. ⊊ HTML5 <img>, <video>, <script>*, …banned <html ⚡> HTML inlined CSS < 50 kB
- 5. <script async src="https: //cdn.ampproject.org/amp-v0.js"> </script> runtime Components <amp-img> <amp-carousel> <amp-analytics> <amp-social-share type="twitter">
- 6. cache @ Google https: // www.google.cz/amp/s/ robinpokorny.github.io/git3moji/
- 8. 1st year 1.7 B 870 K AMP pages published domains Huge development – but where?
- 9. 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>, …
- 10. 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>
- 11. 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; }
- 12. 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
- 13. amp-parallax https: //ampbyexample.com/components/ amp-fx-parallax/preview/ AMP Conf AMP Start https: //ampstart.com/
- 14. 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/
- 16. 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>
- 17. For whom?
- 18. @robinpokorny