Why did I write this book? Back in 2006, I was working with a company called dotMobi. I had the wonderful opportunity of working with some super-smart people--Ronan Cremin, Jo Rabin, and James Pearce--who were trying to make the mobile web happen (every year, according to James, was going to be the year of the mobile web, until 2008, when it eventually was).
One of the things that the team at dotMobi was doing was working with the W3C to help draft the Mobile Web Best Practices (MWBPs). We had already built the mobiReady mobile web checker, and the W3C was building its own Mobile Web Best Practices checker that, with my experiences with mobiReady under my belt, I was able to help out with. It was around this time, too, that we launched mobiForge; this was an educational site for web developers getting into mobile web development.
The point of all these initiatives? To give web developers and site owners the tools and knowledge they needed to build sites that performed acceptably under the constraints of the devices and cell networks of the day. This was 10 years ago, pre-iPhone, and the challenges for mobile web developers were considerable. Slow devices, slow networks, and small screens were the order of the day.
When the AMP project was launched, the similarities with the W3C MWBPs struck a chord with me. For one thing, the general goal was the same: follow good development practices, make the mobile web faster, and deliver a better user experience. However, even more than this, the AMP restrictions echoed very much the MWBPs, and the rules we'd built into mobiReady, even if some of the exact details had changed during the intervening 10 years. These were things like not using JavaScript, limiting the number of external resources and HTTP requests, and keeping the page size down. I could be talking about AMP, or the MWBPs.
So, AMP was a project I could identify with, even if some parts of it (such as the AMP cache URLs) are controversial, and I embraced what--as Alex Russell described it at the first AMP conference--has become "the most successful component library in the world." I understand the criticisms of the project, but coming from a background where web performance and user experience goals are important, I believe that, right now, the benefits outweigh the drawbacks.
Even without the cache, AMP is a fast, easy-to-use, and versatile component library. I hope that this book will help you see it the way I do.
Chapter 1, Ride the Lightning with AMP, introduces AMP, why it's needed, and what it brings to the mobile web. It describes how performance affects user behavior on the web, and its effect on conversions. It explains, at a high level, how AMP solves the problem of performance. Basic AMP concepts are introduced, and AMP boilerplate code is demonstrated in this chapter.
Chapter 2, Building Your First AMP Page, builds on the boilerplate code from the last chapter. The reader will see how to build a simple blog/article content page, while highlighting the similarities and differences between AMP-HTML and regular HTML. It demonstrates what happens when you use HTML tags that aren't allowed, to introduce AMP validation. The reader will learn how to develop and debug AMP pages, making use of the AMP validator and browser console as indispensable tools. Also, custom elements are introduced in the chapter.
Chapter 3, Making an Impression - Layout and Page Design in AMP, improves on the article-style page we built in the last chapter. The reader will learn about layout support and responsive design in AMP, and styling using CSS.
Chapter 4, Engaging Users with Interactive AMP Components, looks at how to deliver better user experiences via enhanced interaction mechanisms available in AMP. Building upon the prototype from the previous chapters, the reader will learn how to develop a side-drawer navigation menu, collapsible accordion content containers, and dismissible user notifications, as well as other techniques designed to make the most of limited screen space on mobile devices.
Chapter 5, Building Rich Media Pages in AMP, shows how to add rich media to AMP pages by building out an e-commerce product page prototype, which includes product image galleries and lightboxes, as well as audio and video components.
Chapter 6, Making Contact - Forms in AMP, shows what support there is for forms and form submission in AMP. A signup form, a product search form, and a basic shopping cart are developed that will demonstrate client-side validation and error handling, as well as how to build an endpoint to process form submissions.
Chapter 7, Dynamic Content and Data-Driven Interaction, explains how to automatically populate AMP pages with data retrieved by the JSON API. The product page is improved by dynamically adding related content data retrieved this way, and the shopping cart is enhanced to allow removal of items.
Chapter 8, Programming in AMP - amp-bind, introduces a programming paradigm offered in AMP via the amp-bind component.
Chapter 9, When AMP Is Not Enough - Enter the iframe, talks about workarounds for the limitations imposed by AMP. While it provides many custom elements to provide extended behavior, there are times when AMP can't provide the functionality you need. In these cases, the desired behavior can often be achieved with iframes, using amp-iframe.
Chapter 10, Ads and Analytics in AMP, introduces the reader to the different ways in which ads can be integrated into AMP pages. Different ad types and styles are reviewed and implemented. Analytics solutions are also implemented, demonstrating how to track user visits and other trackable events.
Chapter 11, AMP Deployment and Your Web Presence, outlines a number of options to deploy your AMP pages, whether standalone or as part of a bigger web presence.
Chapter 12, AMP - Where It's at and Where It's Going, reflects on what has been achieved. It covers the recent and under-development features in AMP, and where the project is going.
Appendix A, AMP Components, provides a reference list of all AMP components.
Appendix B, Actions and Events, provides a reference list of actions and events that can be used for interactions in your AMP pages.
Appendix C, amp-bind Whitelisted Functions, provides a reference list of whitelisted JavaScript functions that can be used in amp-bind expressions
Appendix D, amp-bind Permitted Attribute Bindings, provides a reference of element attributes that support data binding
The requirements for this book are straightforward for AMP, and are similar for every chapter:
- Webserver such as Apache, NGINX, or NodeJS
- Web browser (such as Chrome or Firefox)
- Text/HTML editor (such as SublimeText)
- A web-connected mobile device, such as an Android or iOS phone, is recommended but not required
Additionally, some examples require the following. Where required, this is noted along with the example:
- HTTPS.
- Server-side technology--some examples require a server-side component to deliver data. PHP was chosen for its wide availability, but any server-side language could be used.
- Access to an alternative domain--this can simply be a domain alias that points to the same application directory on your server. For example, some files must be accessible at example.com, and another part of the example must be available at alt.example.com.
This book is for experienced web developers who are seeking to serve content to their end users in a rich and enticing way using Accelerated Mobile Pages. You need to be familiar with HTML5, CSS3, JavaScript, and JSON, and be aware of the impact of slow-loading web pages and performance on conversion rates and user engagement.
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Just add <meta charset="utf-8"> immediately after the opening <head> tag."
A block of code is set as follows:
<script async src="https://cdn.ampproject.org/v0.js"></script>
Any command-line input or output is written as follows:
npm install -g amphtml-validatorNew terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Select System info from the Administration panel."
Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
- Log in or register to our website using your e-mail address and password.
- Hover the mouse pointer on the
SUPPORTtab at the top. - Click on
Code Downloads & Errata. - Enter the name of the book in the
Searchbox. - Select the book for which you're looking to download the code files.
- Choose from the drop-down menu where you purchased this book from.
- Click on
Code Download.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
- WinRAR / 7-Zip for Windows
- Zipeg / iZip / UnRarX for Mac
- 7-Zip / PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/AMP-Building-Accelerated-Mobile-Pages. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/AMPBuildingAcceleratedMobilePages_ColorImages.pdf.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at [email protected] with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.