Amp as a Web framework

Slides for my talk at the GDG IO Extended Ikorodu

Transcript

1. AMP as a Web Framework
   Shedrack Akintayo
   coder_blvck
   

   View Slide

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.
   
   

   View Slide

3. What is AMP?
   

   View Slide

4. What Is AMP
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. Anatomy of an AMP
   

   View Slide

9. Features of AMP
   

   View Slide

10. How AMPs are
    written with
    HTML5
    

    View Slide

11. HTML-AMP Declaration
    

    View Slide

12. INTEGRATED STRUCTURED DATA
    

    View Slide

13. INLINE-CSS
    

    View Slide

14. AMP-SPECIFIC JAVASCRIPT FILES
    

    View Slide

15. AMP ANALYTICS
    

    View Slide

16. Key Elements of AMPS
    ❖ Uses standard HTML5
    ➢ Will render in most browsers
    ❖ Limited external Dependencies
    ➢ Inline CSS, Limited Async JS
    ❖ Integrated Structures Data
    

    View Slide

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
    

    View Slide

18. IMPLEMENTING AN AMP
    ● Wordpress Sites
    ○ AMP & PageFrog Plugins
    ● Other Platforms:
    ○ Manual Effort ( Visit : (https://amp.dev) to get started)
    ○ Forthcoming Plugins/Extensions
    

    View Slide

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)
    

    View Slide

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.”
    

    View Slide

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
    

    View Slide

22. Thanks!
    Follow me on
    Twitter/IG:
    @coder_blvck
    

    View Slide