Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
AMP: Building Accelerated Mobile Pages

You're reading from   AMP: Building Accelerated Mobile Pages Create lightning-fast mobile pages by leveraging AMP technology

Arrow left icon
Product type Paperback
Published in Oct 2017
Publisher Packt
ISBN-13 9781786467317
Length 370 pages
Edition 1st Edition
Languages
Tools
Concepts
Arrow right icon
Author (1):
Arrow left icon
Ruadhan O'Donoghue Ruadhan O'Donoghue
Author Profile Icon Ruadhan O'Donoghue
Ruadhan O'Donoghue
Arrow right icon
View More author details
Toc

Table of Contents (17) Chapters Close

Preface 1. Ride the Lightning with AMP FREE CHAPTER 2. Building Your First AMP Page 3. Making an Impression - Layout and Page Design in AMP 4. Engaging Users with Interactive AMP Components 5. Building Rich Media Pages in AMP 6. Making Contact - Forms in AMP 7. Dynamic Content and Data-Driven Interaction 8. Programming in AMP - amp-bind 9. When AMP Is Not Enough - Enter the iframe 10. Ads and Analytics in AMP 11. AMP Deployment and Your Web Presence 12. AMP - Where It's At and Where It's Going 13. AMP Components 14. Actions and Events 15. amp-bind Whitelisted Functions 16. amp-bind Permitted Attribute Bindings

Implementing a live leaderboard


Another nice feature of amp-live-list is that updates can be applied automatically, without the need to click or tap a button. This is very useful for live-updating of scores that you might find in sport, such as football scores, or leaderboard style rankings that you would find in racing and election results.

Let's implement a live Grand Prix position leaderboard. To get the list items to update without having to press the update button, we need to make sure that we do the following:

  • Don't change any item IDs after initial load: If you introduce new IDs, then the update button will be displayed.
  • Include the data-update-time attribute: If the latest server update contains a value higher than the current value in the DOM for any item, then amp-live-list will replace the item with the new content.

Note

Note that amp-live-list won't re-sort already rendered items, even if you change the data-sort-time; data-sort-time is only used for new insertions.

On the initial...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime