What is AMP HTML and how does it fit in with framework/tool X?

Question

OK, so we've all probably heard about AMP HTML from Google by now.

What I'm curious is how this is going to fit in with our existing workflows. If you're writing a React or Angular app, how does AMP HTML fit in the development process? Each of these frameworks already has a way to define components and it seems like AMP is just adding to the stack.

Most of us are already using other tools like browserify or webpack, too. I'm not readily seeing how AMP fits in with the rest. Some of these tools already allow us to serve our site in an optimized fashion. How much is AMP HTML going to change all of this?

Answer 1

AMP HTML is basically going back to basics and serving up the fastest HTML possible. I am reminded of WAP and the Nokia 7110.

It's a strict set of rules for making a web page, that is open to grow and open to extensions by other companies and developers.

How this works with SPA (Single Page Apps) and other javascript front-end heavy frameworks is unknown at this point, that is for those developers to figure out.

At it's core its static HTML pages with custom elements designed to load as fast as possible on slow connections and small views. Anyone can optimise their site for mobile already and cut it down to a few KB if they really wanted to, AMP-HTML or not.

The main benefit is

1. Google will support it, think Android, Chrome and Google Search, Google CDN.
2. Pages will load really fast and can look pretty still.

The initial adoption like by Wordpress and other publishers may be a separate set of mobile friendly AMP pages. This is coming from Google who wanted you to make all your normal web pages mobile friendly or face SEO hits.

If you think about it in the long term its a spec for the mobile web that focuses on performance. If adopted, in 5 years, any web page may load in seconds on a mobile connection regardless of the quality of that connection. If we can't wait for technology and telecom companies to increase the speed, we can atleast decrease the size of our pages.

Answer 2

AMP is designed for static pages. Developers have to make two different pages: normal version and AMP version. The AMP page will have a link to the normal page and vice versa. Whenever a request comes to normal page from mobile it will load AMP page and vice versa. Google have its own AMP cache to load it faster. While developing AMP pages we just have to consider the AMP rules.

Answer 3

Things are more clear now via this URL

Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering.

So no more render blocking CSS.

Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on page before resources are loaded and the disabling of slow CSS selectors.

Hope this new link helps.