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?

AMP is an open source project started by Google that produces pages optimized to load instantly on mobile devices.

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

Mic articles are saved as HTML in our database. Since AMP has a different structure (let’s call it AMP HTML), we decided to build and open source a module that transforms HTML to a structured json format. At first we discussed transforming our existing HTML to AMP-compatible HTML, but decided on a json format so that in the future, we can easily reuse the parsing and normalization for other integrations.

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

As part of our work with AMP, we came up with a workflow that we will use to develop a lot of upcoming projects at Mic — for example, integrating with other third party services such as Instant Articles & Apple News.

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