Mic’s Open Source AMP Integration

At Mic we believe that speed is an essential part of a good user experience. When Accelerated Mobile Pages was announced, it immediately caught our interest.

This blog post describes how we integrated our article page with AMP at Mic and the open source modules that we made available as part of it.

What is AMP?

It’s essentially a subset of HTML, but also includes a few custom amp tags that the Google team has included. For example, instead of using the <img> tag, you’d use the <amp-img> tag. In addition, AMP includes support for embedding content, making sure that embeds can be responsive, async loaded and able to implement custom components (see https://www.ampproject.org/docs/reference/extended.html for more information).

Implementing AMP at Mic

The module is called called html-to-article-json.

The snippet above exemplifies the normalization feature of html-to-article-json. There are two YouTube embeds, but one of them is sourced through embedly, while the other is not. The html-to-article-json module will parse then convert both to json objects that have the same structure:

The next step is to iterate through the json structure and make sure all required properties are set. For example, some of our images don’t have width & height set in the HTML — which is required for <amp-img> — so we needed to add that to the json.

After that, we take our normalized and enhanced JSON structure and generate AMP HTML. To do this we built and open sourced another module, called article-json-to-amp.

The example above will take article-json (from html-to-article-json) and render out AMP HTML. The article-json-to-amp module only renders the AMP article HTML. This HTML can then be used inside an AMP page that then includes the required js-files.

Future

We will continue to work on this and hope it’s something that other teams can make good use of!

Mic Product Blog

Updates and ideas from the product team at Mic

David Björklund

Written by

I like to run, drink quality coffee and complain about my allergies. Also engineer at mic.com #yolo

Mic Product Blog

Updates and ideas from the product team at Mic