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

JavascriptHtmlAngularjsReactjsAmp Html

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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.

Solution 3 - Javascript

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMulanView Question on Stackoverflow
Solution 1 - JavascriptkzapView Answer on Stackoverflow
Solution 2 - Javascriptsuraj naikwadeView Answer on Stackoverflow
Solution 3 - JavascriptprostiView Answer on Stackoverflow