15 months of @robinpokorny
A presentation at Frontendisti.cz in May 2017 in Prague, Czechia by Robin Pokorny
15 months of @robinpokorny
HTML ⊊ HTML5
<html ⚡> banned <img>, <video>, <script>*, … inlined CSS < 50 kB
runtime <script async src=”https:!//cdn.ampproject.org/amp-v0.js”>!</script> Components <amp-img> <amp-carousel> <amp-analytics> <amp-social-share type=”twitter”>
cache @ Google https:!//!!www.google.cz/amp/s/ robinpokorny.github.io/git3moji/
Static layout system
st 1 year 1.7 B 870 K AMP pages published domains Huge development – but where?
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>, …
Dynamic data <amp-list src=“https:!//…”> <template type=”amp-mustache”> <div> {{title}} !</div> !</template> !</amp-list>
<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-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; }
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. The good news is that it’s open source and the project owners seem receptive to feedback. Personally, I dream of future, still-to-beinvented web standards that would allow us to get there — to move beyond cache models Tim Kadlec https:!//timkadlec.com/2015/10/amp-and-incentives/ Jeremy Keith https:!//medium.com/@adactio/amped-up-4e000e4b4886 Paul Bakaus, AMP Developer Advocate https:!//medium.com/@pbakaus/why-amp-caches-exist
AMP Conf amp-parallax https:!//ampbyexample.com/components/ amp-fx-parallax/preview/ AMP Start https:!//ampstart.com/
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/
AMP + PWA AMP with PWA features manifest.json AMP as entry point into PWA <amp-install-serviceworker> AMP as data source for PWA Shadow AMP API: AMP.attachShadowDoc(container, doc, url)
For whom?
@robinpokorny
