Amp as a Web framework

Amp as a Web framework

Slides for my talk at the GDG IO Extended Ikorodu

678a2503a2995aa4815b2992a70d376c?s=128

shedrack akintayo

June 08, 2019
Tweet

Transcript

  1. AMP as a Web Framework Shedrack Akintayo coder_blvck

  2. About Me - Frontend Engineer at MurcuHQ - Twitter Rascal

    ( Some random person gave me this name ) - Lover of all Things Javascript - Community Manager, Facebook DevC lagos: React JS Clan. - Music Addict.
  3. What is AMP?

  4. What Is AMP

  5. AMP AMP(Accelerated Mobile Pages) is an open-source HTML framework that

    provides a straightforward way to create web pages that are fast, smooth-loading and prioritize the user-experience above all else.
  6. Use AMP to build great experiences across the web Whether

    you are a publisher, e-commerce company, storyteller, advertiser or email sender, AMP makes it easy to create great experiences on the web. Use AMP to build: - AMP Websites - AMP Stories - AMP Ads - AMP emails
  7. Why Should you use AMP? - Mobile is the main

    focus - Mobile suffers from slow, cluttered sites but AMP is here to fix this, it imporves the speed and performance of websites on Mobile. - User experience on Mobile is Enhanced
  8. Anatomy of an AMP

  9. Features of AMP

  10. How AMPs are written with HTML5

  11. HTML-AMP Declaration

  12. INTEGRATED STRUCTURED DATA

  13. INLINE-CSS

  14. AMP-SPECIFIC JAVASCRIPT FILES

  15. AMP ANALYTICS

  16. Key Elements of AMPS ❖ Uses standard HTML5 ➢ Will

    render in most browsers ❖ Limited external Dependencies ➢ Inline CSS, Limited Async JS ❖ Integrated Structures Data
  17. WHAT WORKS IN AMP NOW. • Analytics • Ads (limited)

    • Videos • GIF WebP Animations • Carousels • Social Sharing • PWAs • Basic Forms • Basic Paywalls • Iframes • Sidebars • Notifications • Live Updates • A/B Testing
  18. IMPLEMENTING AN AMP • Wordpress Sites ◦ AMP & PageFrog

    Plugins • Other Platforms: ◦ Manual Effort ( Visit : (https://amp.dev) to get started) ◦ Forthcoming Plugins/Extensions
  19. TOOLS AND RESOURCES FOR LEARNING AND BULIDING AMPS • AMP

    Official Documentation (https://amp.dev/documentation/guides-and-tutorials/) • AMP Validator (https://validator.ampproject.org/) • AMP Validator Plugin/Extension (https://bada.ms/ampvalidatorchrome)
  20. “Later this year, all types of sites that create AMP

    pages will have expanded exposure across the entire Google Mobile Search results page, like e-commerce, entertainment, travel, recipe sites and many more.”
  21. References and Further Reading. • https://amp.dev/documentation/guides-and-tutorials/ • https://github.com/ampproject/amphtml • https://groups.google.com/forum/#!forum/amphtml-discuss

    • https://stackoverflow.com/questions/tagged/amp-html • https://www.slideshare.net/Badams/google-amp-semrushlive • https://www.slideshare.net/greenido/amp-accelerated-mobile-pages
  22. Thanks! Follow me on Twitter/IG: @coder_blvck