There are four main components to AMP: AMP HTML, AMP JS, AMP styles and AMP cache.
AMP HTML
Similar to regular HTML but with some significant changes. Some of the standard HTML tags have been replaced with an AMP specific version. For example, to display an image on a web page with regular HTML, you would use the <img> tag. Contained within, you would only need to place the source for the image and the alt attribute of the image. However, to display an image on a valid AMP page you need to use the <amp-img> tag which again requires you to include the source and alt attributes for the image but you must also include a width and height for the image as external style sheets are not supported. Here is an example of a regular image vs an AMP image:
Regular: <img src="/images/example.png" alt="example image"/>
AMP: <amp-img src="/images/example.png" alt="example image" width="500" height="500"/>
AMP JS
Similar to how AMP HTML is implemented, this is a stripped-back version of JavaScript that is used to create basic interactivity on the page. Due to this reduced functionality, there are a only a limited number of ways in which you are able to add elements such as animation as these come built in to AMP ready for you to configure and use.
AMP STYLES
Not as much as a change to AMP and more a change to how styles are implemented due to the restrictions and limitations imposed. The difference here is that AMP pages cannot reference an external CSS file so all of the styles have to be coded inline. Certain features such as media targeting and font-face are not supported.
AMP CACHE
The AMP cache is a Google-based proxy service that performs two main purposes: the first is it will take the AMP page that you have created and it will use its inbuilt AMP validation to ensure that there are no errors on the page before allowing the page to be cached in Google; The second is that the AMP cache will take all of the required files such as images and store them so that they are all loaded from the same location rather than having to find all of the files separately. What this is doing is essentially pre-loading large sections of the website so that all that is left to do is display this information to the user. You can easily identify AMP pages in your search results - just look for the lightning bolt symbol next to the result.
So why use AMP?
The main benefit to creating an AMP version of a web page is that it greatly reduces the amount of time that it takes for the page to load on a mobile device. This results in a better mobile experience for the user, and as more and more people are using a mobile device for browsing the web, a page that takes too long to load will quickly lose its visitors.