07/24/2016
NodeSummit 2016







06/15/2014
Node REPL

Accelerated Mobile Pages (AMP) 101

04/11/2017
Tweet about this blog entry:

Context

Back in March (7th/8th), I had the special privilege and honor of attending the first-ever AMP Conference. My current employer, HomeAway.com very generously paid for me to attend. This blog entry is the first of two, in which I will share my learnings and take-aways from that conference as well as from general research about the AMP paradigm. The current entry in here, will go over the basics of what AMP is. The next entry will will cover the main take-aways from the conference, in hopes of shedding some light on what the general community feeling was, as I perceived it.

Again, this entry will cover the basics of what AMP is.

Brief History of AMP

During a Digital News Initiative (DNI) session back in 2015, many frustrated publishers and ad vendors came together to figure out how to make the mobile web landscape friendly to publishers again. Furthermore, Google and other companies data-backed the general consensus that users did not like using the mobile web due to pestering, slowly-loading ads and pages, which increased the bounce rates for many mobile sites. After numerous discussions and working, collaborative sessions between Google and other technology and publishing companies like LinkedIn, Pinterest, Twitter, and Wordpress, they drew the line in the sand. In October 2015, Google announced AMP for "...for a faster, open mobile web"! During the months that followed, many of these collaborators began implementing AMP pages on their respective sites and deploying them to production. Finally, all of these efforts, discussions, and actual, production deployments culminated into March 2017's AMP Conference...and now, here we are!

AMP Paradigm

Like I alluded to above, AMP is a not just a technology or a language, it is also a new way of thinking about mobile web pages–a new mobile pages paradigm, if you will. Well guided by AMP's underlying design principles, there are three core components (AMP HTML, AMP JS, and AMP Cache) mentioned in the official AMP documentation. I believe, however, that there is, at least, a fourth, that needs to be addressed, when thinking about AMP in terms of what minimal, bulleted knowledge is required to get up and running with the implementation of AMP pages--that fourth component being AMP Validation. In this blog, I am supplementing the above core components with three AMP meta concepts: AMP as a paradigm, AMP as an infrastructure, and AMP as a programming language. Please be aware that these meta concepts overlap with and include the core components. Furthermore, the reason for doing this is that in my opinion, these meta concepts, along with the core implementation components, are extremely important in order for us to understand the whys and wherewithals of AMP. The melding of these core and meta concepts are shown in the following diagram. Incidentally, the last block in the diagram, "AMP as Saver of Truly, Mobile-Friendly (Open) Web--for Publishers and Users alike" is basically there to remind us of the reasons why AMP was created to begin with–mentioned in the Brief History section above.

Core Components for AMP Page Implementation

In the interest of not simply regurgitating what one can find in the official, AMP documentation, I am going to make the below sections succinct, but hopefully substantial enough for getting some insight into each component.

AMP HTML

I like to think of AMP HTML as an HTML 5.0 superset, that's used as a HTML 5.0 subset during AMP page authoring. Per the AMP mission, this HTML superset has some restrictions in an effort to make AMP pages reliably performant. Example AMP HTML tags include:

Usage: AMP HTML is the markup that AMP page developers use to build reliably fast, mobile web pages.

AMP JS

Simply stated, AMP JS is the open-sourced javascript that is the "engine" which takes in an AMP page and outputs a streamlined, performant page. Another way of describing AMP JS is that it implements the AMP HTML specification.

Usage: every AMP page contains a script reference to the latest AMP JS file. E.g.

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP page developers, the main audience of this blog, only need to worry about including the above script in their markup. Not even AMP Component developers (beyond the scope of this blog) need to worry about the intricacies of AMP JS, to a certain extent. Core contributors to the AMP Spec implementation, however, must be well versed in it!

AMP Validation

AMP Validation is basically the set of rules that get applied to an AMP page to ensure that it will pass muster and take advantage of AMP optimizations. Furthermore, an AMP page that does not pass validation will not get discovered nor stored in the AMP Cache (described below).

Usage: there are more than one way to validate an AMP page. These include: Chrome Dev Tools console, the web interface, a browser extension, and a command line tool.

AMP Cache

An AMP Cache is basically a content delivery network (CDN) that is also part of the infrastructure component in the AMP Paradigm diagram above. It is part of the overall mind set as well as the technology, which is AMP.

Who's Who in AMP

Paul Bakaus (@pbakaus) – Web Advocacy Lead for AMP

Malte Ubl (@cramforce) – Creator and Tech Lead of the AMP Project

David Besbris (@tweetbez) – VP of Engineering at Google

Resources

AMP Project Site

GitHub Repo

Getting Access to the AMP Slack Channel

AMP Conference Videos

Tutorial: Create Your First AMP Page

AMP Conference 2017 Take-Aways Blog Post


Tweet about this blog entry:

Comments/Discussion