Jumping On Accelerated Mobile Pages

Accelerated Mobile Pages

Transcript

1. Jumping On Accelerated Mobile Pages Forloop: Javascript Everywhere April 2017 Olutobi Adeyemi @thebigtobz Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 1
2. About Me Olutobi Adeyemi Frontend Developer @SMEMarketHub and Sendbox.ng Javascript | React | React-Native Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 2
3. A way to build web pages that render fast. AMP in action consists of three different parts... Accelerated Mobile Pages Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 3
4. AMP? Why? • Painfully Slow Loading Websites • Majority of websites built using frameworks aren’t optimized to full capacity • Component based Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 4
5. <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate> body {-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html> AMP HTML HTML extended with custom AMP properties Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 5
6. Google AMP Cache • Proxy-based content delivery network for delivering all valid AMP documents. • Automatically caches AMP HTML pages • Has a built in validation system Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 6
7. AMP JS • Implements all of AMP’s best performance practices. • Manages resource loading and creates provision for custom tags, all to ensure a fast rendering of your page. Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 7
8. The Role of Javascript • Plays a major role in the functionality of AMP components. • Simple components like • Amp-facebook • Amp-form • amp-carousel • Advanced components • User notification with server endpoint Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 8
9. <script async custom-element ="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js" ></script> Integrating a Sample Component Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 9
10. Gettting Started with AMP By Example on Node • Fork this repo by amproject • Install NodeJs • Install Gulp via npm $ npm install -g gulp • Setup the repo $ git clone https://github.com/YOUR_GITHUB_NAME/amp-by-example.git $ cd amp-by-example $ npm install • Build and run the site $ gulp • If everything went well, gulp should now be running the site on http://localhost:8000/ Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 10
11. Examples of Popular platforms using AMP Wired Washington Post BBC USA Today Ebay Wordpress Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 11
12. Pros • Open Source community effort • Google search engine prioritizes AMP projects • Awesome and Easy Documentation • It has responsive design baked in • Blazing fast pages • Available on all devices • Smart caching model • Pre-built and Easy to use components • Improved CTR (Click Through Rate) • Can be used with service workers Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 12
13. Cons • Only inline css are allowed • Styles are limited to 50KB • More tuned towards pubisher-based content • Requires all elements to have an explicit size set from the get-go • Pages using AMP usually have non-AMP pages to fall back on • AMP Pages can’t include any author-written JS except in iframes. • You will likely want to maintain a separate AMP view and a non-amp version of your pages. Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 13
14. Who should use AMP’s • Startups • Publishers • E-commerce • Adevertisers • Wordpress Developers • Magento Developers • Bloggers • Everybody should use AMP’s Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 14
15. Nuff Talk, Let’s build something amplify Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 15
16. Last Words Don’t stop improving Support the community Love JavaScript Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 16
17. Thank You For Having Me Jumping on Accelerated Mobile Pages - by Olutobi Adeyemi 17