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

javascript html angularjs reactjs amp-html
Thank you picture Thank you · Oct 7, 2015 · Viewed 8.7k times · Source

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

kzap picture kzap · Oct 8, 2015

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.

Related questions

AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?

Using AngularJS if I set a simple input text box value to something like "bob" below. The value does not display if the ng-model attribute is added. <input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40"/&…

Read More
Can one AngularJS controller call another?

Is it possible to have one controller use another? For example: This HTML document simply prints a message delivered by the MessageCtrl controller in the messageCtrl.js file. <html xmlns:ng="http://angularjs.org/"> <head> <…

Read More
Way to ng-repeat defined number of times instead of repeating over array?

Is there a way to ng-repeat a defined number of times instead of always having to iterate over an array? For example, below I want the list item to show up 5 times assuming $scope.number equal to 5 in addition incrementing …

Read More