SlideShare a Scribd company logo

15 months of AMP

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

1 of 18
Download to read offline
15 months
of
@robinpokorny
15 months of AMP
15 months of AMP
⊊ HTML5
<img>, <video>, <script>*, …banned
<html ⚡>
HTML
inlined CSS < 50 kB
<script async src="https: //cdn.ampproject.org/amp-v0.js"> </script>
runtime
Components
<amp-img>
<amp-carousel>
<amp-analytics>

<amp-social-share type="twitter">
cache @ Google
https: // www.google.cz/amp/s/
robinpokorny.github.io/git3moji/

Recommended

Prerendering with Nokogiri
Prerendering with NokogiriPrerendering with Nokogiri
Prerendering with NokogiriAlyss Noland
 
AMP in WordPress, the WordPress Way
AMP in WordPress, the WordPress WayAMP in WordPress, the WordPress Way
AMP in WordPress, the WordPress WayAlberto Medina
 
Rapidly scaffold your frontend with yeoman
Rapidly scaffold your frontend with yeomanRapidly scaffold your frontend with yeoman
Rapidly scaffold your frontend with yeomanSimon Waibl
 
Headless BDD & Responsive Test Automation
Headless BDD & Responsive Test AutomationHeadless BDD & Responsive Test Automation
Headless BDD & Responsive Test AutomationShashikant Jagtap
 
PWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - KeynotePWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - KeynoteChang W. Doh
 
PWA Roadshow Seoul - HTTPS
PWA Roadshow Seoul - HTTPSPWA Roadshow Seoul - HTTPS
PWA Roadshow Seoul - HTTPSChang W. Doh
 

More Related Content

What's hot

Desktop, Web e Mobile
Desktop, Web e MobileDesktop, Web e Mobile
Desktop, Web e MobilePaulo Moura
 
Automating Google Lighthouse
Automating Google LighthouseAutomating Google Lighthouse
Automating Google LighthouseHamlet Batista
 
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesSlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesreebalazs
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptChristian Heilmann
 
Wulin kungfu final
Wulin kungfu finalWulin kungfu final
Wulin kungfu finalJimmy Huang
 
BDD using Behat, Selenium,Sahi and SauceLabs
BDD using Behat, Selenium,Sahi and SauceLabsBDD using Behat, Selenium,Sahi and SauceLabs
BDD using Behat, Selenium,Sahi and SauceLabsShashikant Jagtap
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTimothy Oxley
 
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerResponsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerWalter Ebert
 
rendre AJAX crawlable par les moteurs
rendre AJAX crawlable par les moteursrendre AJAX crawlable par les moteurs
rendre AJAX crawlable par les moteursSerge Esteves
 
High Performance Images
High Performance ImagesHigh Performance Images
High Performance ImagesWalter Ebert
 
Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017
Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017
Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017Matt Raible
 
Going Node.js at Netflix
Going Node.js at NetflixGoing Node.js at Netflix
Going Node.js at Netflixmicahr
 
From Napkin to Network: Rapidly Design, Prototype and Leverage Network APIs
From Napkin to Network: Rapidly Design, Prototype and Leverage Network APIsFrom Napkin to Network: Rapidly Design, Prototype and Leverage Network APIs
From Napkin to Network: Rapidly Design, Prototype and Leverage Network APIsApigee | Google Cloud
 
Responsive images in 10 minutes
Responsive images in 10 minutesResponsive images in 10 minutes
Responsive images in 10 minutesJames Ford
 
What's New in JHipsterLand - DevNexus 2017
What's New in JHipsterLand - DevNexus 2017What's New in JHipsterLand - DevNexus 2017
What's New in JHipsterLand - DevNexus 2017Matt Raible
 

What's hot (20)

Hybrid app
Hybrid appHybrid app
Hybrid app
 
Desktop, Web e Mobile
Desktop, Web e MobileDesktop, Web e Mobile
Desktop, Web e Mobile
 
Automating Google Lighthouse
Automating Google LighthouseAutomating Google Lighthouse
Automating Google Lighthouse
 
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesSlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScript
 
Wulin kungfu final
Wulin kungfu finalWulin kungfu final
Wulin kungfu final
 
Introduction to QC
Introduction to QCIntroduction to QC
Introduction to QC
 
BDD using Behat, Selenium,Sahi and SauceLabs
BDD using Behat, Selenium,Sahi and SauceLabsBDD using Behat, Selenium,Sahi and SauceLabs
BDD using Behat, Selenium,Sahi and SauceLabs
 
Headless BDD
Headless BDDHeadless BDD
Headless BDD
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
 
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerResponsive Videos, mehr oder weniger
Responsive Videos, mehr oder weniger
 
rendre AJAX crawlable par les moteurs
rendre AJAX crawlable par les moteursrendre AJAX crawlable par les moteurs
rendre AJAX crawlable par les moteurs
 
High Performance Images
High Performance ImagesHigh Performance Images
High Performance Images
 
Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017
Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017
Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017
 
Going Node.js at Netflix
Going Node.js at NetflixGoing Node.js at Netflix
Going Node.js at Netflix
 
Angular js slides
Angular js slidesAngular js slides
Angular js slides
 
From Napkin to Network: Rapidly Design, Prototype and Leverage Network APIs
From Napkin to Network: Rapidly Design, Prototype and Leverage Network APIsFrom Napkin to Network: Rapidly Design, Prototype and Leverage Network APIs
From Napkin to Network: Rapidly Design, Prototype and Leverage Network APIs
 
Responsive images in 10 minutes
Responsive images in 10 minutesResponsive images in 10 minutes
Responsive images in 10 minutes
 
AngularJs advanced Topics
AngularJs advanced TopicsAngularJs advanced Topics
AngularJs advanced Topics
 
What's New in JHipsterLand - DevNexus 2017
What's New in JHipsterLand - DevNexus 2017What's New in JHipsterLand - DevNexus 2017
What's New in JHipsterLand - DevNexus 2017
 

Similar to 15 months of AMP

[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017Matt Raible
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"WebVisions
 
High Performance Webdesign
High Performance WebdesignHigh Performance Webdesign
High Performance Webdesign拓樹 谷
 
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Patrick Meenan
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
The Structure of Web Code: A Case For Polymer, November 1, 2014
The Structure of Web Code: A Case For Polymer, November 1, 2014The Structure of Web Code: A Case For Polymer, November 1, 2014
The Structure of Web Code: A Case For Polymer, November 1, 2014Tommie Gannert
 
Amp your site: An intro to accelerated mobile pages
Amp your site: An intro to accelerated mobile pagesAmp your site: An intro to accelerated mobile pages
Amp your site: An intro to accelerated mobile pagesRobert McFrazier
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Web Components
Web ComponentsWeb Components
Web ComponentsLoc Nguyen
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web DesignChristopher Schmitt
 

Similar to 15 months of AMP (20)

[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
 
Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
 
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
 
High Performance Webdesign
High Performance WebdesignHigh Performance Webdesign
High Performance Webdesign
 
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
 
The Structure of Web Code: A Case For Polymer, November 1, 2014
The Structure of Web Code: A Case For Polymer, November 1, 2014The Structure of Web Code: A Case For Polymer, November 1, 2014
The Structure of Web Code: A Case For Polymer, November 1, 2014
 
Amp your site: An intro to accelerated mobile pages
Amp your site: An intro to accelerated mobile pagesAmp your site: An intro to accelerated mobile pages
Amp your site: An intro to accelerated mobile pages
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design
 
Membuat slide show pada posting
Membuat slide show pada postingMembuat slide show pada posting
Membuat slide show pada posting
 
Web Components
Web ComponentsWeb Components
Web Components
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 

More from Robin Pokorny

Purifying React (with annotations)
Purifying React (with annotations)Purifying React (with annotations)
Purifying React (with annotations)Robin Pokorny
 
React, když odezní zamilovanost
React, když odezní zamilovanostReact, když odezní zamilovanost
React, když odezní zamilovanostRobin Pokorny
 
React a omyly jazyka CSS
React a omyly jazyka CSSReact a omyly jazyka CSS
React a omyly jazyka CSSRobin Pokorny
 
Co musí umět moderní „HTML kodér“
Co musí umět moderní „HTML kodér“Co musí umět moderní „HTML kodér“
Co musí umět moderní „HTML kodér“Robin Pokorny
 
Pokročilé responzivní obrázky
Pokročilé responzivní obrázkyPokročilé responzivní obrázky
Pokročilé responzivní obrázkyRobin Pokorny
 
O elementu picture v Ostravě
O elementu picture v OstravěO elementu picture v Ostravě
O elementu picture v OstravěRobin Pokorny
 
Jak nám responzivní web rozbil obrázky
Jak nám responzivní web rozbil obrázkyJak nám responzivní web rozbil obrázky
Jak nám responzivní web rozbil obrázkyRobin Pokorny
 
Organizace kódu v týmu
Organizace kódu v týmuOrganizace kódu v týmu
Organizace kódu v týmuRobin Pokorny
 
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready BeautyHow to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready BeautyRobin Pokorny
 
Thesis defendence presentation
Thesis defendence presentationThesis defendence presentation
Thesis defendence presentationRobin Pokorny
 
Tancuj, tancuj, konverguj
Tancuj, tancuj, konvergujTancuj, tancuj, konverguj
Tancuj, tancuj, konvergujRobin Pokorny
 

More from Robin Pokorny (13)

Purifying React (with annotations)
Purifying React (with annotations)Purifying React (with annotations)
Purifying React (with annotations)
 
React, když odezní zamilovanost
React, když odezní zamilovanostReact, když odezní zamilovanost
React, když odezní zamilovanost
 
React a omyly jazyka CSS
React a omyly jazyka CSSReact a omyly jazyka CSS
React a omyly jazyka CSS
 
React a CSS
React a CSSReact a CSS
React a CSS
 
Co musí umět moderní „HTML kodér“
Co musí umět moderní „HTML kodér“Co musí umět moderní „HTML kodér“
Co musí umět moderní „HTML kodér“
 
Pokročilé responzivní obrázky
Pokročilé responzivní obrázkyPokročilé responzivní obrázky
Pokročilé responzivní obrázky
 
O elementu picture v Ostravě
O elementu picture v OstravěO elementu picture v Ostravě
O elementu picture v Ostravě
 
Jak nám responzivní web rozbil obrázky
Jak nám responzivní web rozbil obrázkyJak nám responzivní web rozbil obrázky
Jak nám responzivní web rozbil obrázky
 
Organizace kódu v týmu
Organizace kódu v týmuOrganizace kódu v týmu
Organizace kódu v týmu
 
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready BeautyHow to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
 
Thesis defendence presentation
Thesis defendence presentationThesis defendence presentation
Thesis defendence presentation
 
Tancuj, tancuj, konverguj
Tancuj, tancuj, konvergujTancuj, tancuj, konverguj
Tancuj, tancuj, konverguj
 
Představení eMAMS
Představení eMAMSPředstavení eMAMS
Představení eMAMS
 

Recently uploaded

DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff HustonDNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff HustonAPNIC
 
ConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solution
ConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solutionConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solution
ConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solutionŁukasz Chruściel
 
Reactive programming with Spring Webflux.pptx
Reactive programming with Spring Webflux.pptxReactive programming with Spring Webflux.pptx
Reactive programming with Spring Webflux.pptxJoão Esperancinha
 
Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...
Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...
Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...Prometix Pty Ltd
 
Information Technology Project to Create a Business
Information Technology Project to Create a BusinessInformation Technology Project to Create a Business
Information Technology Project to Create a Businessmbowl010
 
Seagate HDD Firmware Repair Tool Datasheet 2024
Seagate HDD Firmware Repair Tool Datasheet 2024Seagate HDD Firmware Repair Tool Datasheet 2024
Seagate HDD Firmware Repair Tool Datasheet 2024Dolphin Data Lab
 
WAN-IFRA: World Press Trends Outlook 2023-2024
WAN-IFRA: World Press Trends Outlook 2023-2024WAN-IFRA: World Press Trends Outlook 2023-2024
WAN-IFRA: World Press Trends Outlook 2023-2024Damian Radcliffe
 
NANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff HustonNANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff HustonAPNIC
 
ConFoo 2024 - Need for Speed: Removing speed bumps in API Projects
ConFoo 2024  - Need for Speed: Removing speed bumps in API ProjectsConFoo 2024  - Need for Speed: Removing speed bumps in API Projects
ConFoo 2024 - Need for Speed: Removing speed bumps in API ProjectsŁukasz Chruściel
 
Biometrics Technology Intresting PPT
Biometrics Technology Intresting PPTBiometrics Technology Intresting PPT
Biometrics Technology Intresting PPTPraveenKumarThota7
 

Recently uploaded (10)

DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff HustonDNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
 
ConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solution
ConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solutionConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solution
ConFoo 2024 - Sylius 2.0, top-notch eCommerce for customizable solution
 
Reactive programming with Spring Webflux.pptx
Reactive programming with Spring Webflux.pptxReactive programming with Spring Webflux.pptx
Reactive programming with Spring Webflux.pptx
 
Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...
Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...
Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...
 
Information Technology Project to Create a Business
Information Technology Project to Create a BusinessInformation Technology Project to Create a Business
Information Technology Project to Create a Business
 
Seagate HDD Firmware Repair Tool Datasheet 2024
Seagate HDD Firmware Repair Tool Datasheet 2024Seagate HDD Firmware Repair Tool Datasheet 2024
Seagate HDD Firmware Repair Tool Datasheet 2024
 
WAN-IFRA: World Press Trends Outlook 2023-2024
WAN-IFRA: World Press Trends Outlook 2023-2024WAN-IFRA: World Press Trends Outlook 2023-2024
WAN-IFRA: World Press Trends Outlook 2023-2024
 
NANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff HustonNANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff Huston
 
ConFoo 2024 - Need for Speed: Removing speed bumps in API Projects
ConFoo 2024  - Need for Speed: Removing speed bumps in API ProjectsConFoo 2024  - Need for Speed: Removing speed bumps in API Projects
ConFoo 2024 - Need for Speed: Removing speed bumps in API Projects
 
Biometrics Technology Intresting PPT
Biometrics Technology Intresting PPTBiometrics Technology Intresting PPT
Biometrics Technology Intresting PPT
 

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
  • 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>