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