AMP

Fetching and rendering made easy with the new amp-render

Websites

Today, we are excited to introduce a brand new component for AMP:  <amp-render>!

<amp-render> makes fetching and rendering data simple. First, it fetches data from either a URL, a state variable, or <amp-script> – your choice. Then, it applies this data to a mustache template you specify, showing the result on your webpage.

How does it work?

So – how do you use <amp-render>?

Let’s start with a basic example. This component requests the data containing the name of a city and its associated country using the “src” attribute, then displays that city and country.

<amp-render src="cities-lagos.json" layout="fixed-height" height="60">
      <template type="amp-mustache">
        <div>{{city}} is a city in {{country}}.</div>
      </template>
    </amp-render>Code language: HTML, XML (xml)

This example uses some more of amp-render‘s attributes. It uses the “key” attribute to access the subtree of the JSON at the node planets.earth.continents and render it.  It also uses the “template” attribute to render using a seperate template element with id “cities-countries”.

      <amp-render
        src="cities.json"
        key="planets.earth.continents"
        template="cities-countries"
        layout="fixed-height"
        height="105"
      >
      </amp-render>

      <template id="cities-countries" type="amp-mustache">
        {{#africa}}
          <div>{{city}} is a city in {{country}}.</div>
        {{/africa}}
      </template> Code language: HTML, XML (xml)

This final example shows how to fetch data with custom JavaScript using <amp-script>. Instead of locating our desired data subtree with the “key” attribute, we use our own code. This lets us massage data on the client side before applying it to the template.

      <amp-render
        src="amp-script:dataFunctions.fetchData"
        layout="fixed-height"
        height="52"
      >
        <template type="amp-mustache">
          {{#southAmerica}}
            <div>{{city}} is a city in {{country}}.</div>
          {{/southAmerica}}
        </template>    
      </amp-render>

      <amp-script id="dataFunctions" script="fetch-data-script" nodom></amp-script>
      <script id="fetch-data-script" type="text/plain" target="amp-script">
        function fetchData(index) {
          return fetch('cities.json')
            .then(resp => resp.json())
            .then(findContinentsData)
        }
      
        function findContinentsData(json) {
          return json.planets.earth.continents;
        }
      
        exportFunction('fetchData', fetchData);
      </script>Code language: HTML, XML (xml)

Similarly, you can use a helper <amp-script> to filter data, to sanitize data, to create infinite list functionality, and more.

Comparison to <amp-list>

You may ask – but doesn’t <amp-list> fetch and render data already?

<amp-render> takes its place alongside <amp-list>, the component AMP developers have used to fetch and render data since 2015, the year AMP was born. <amp-list> is great for rendering any kind of list-based content. It also supports features such as infinite scrolling or if you need built-in features specifically designed for handling lists. For a simpler interface, for data that’s not in list form, handle dynamic content sizing (coming soon), or for cases where you want to control behavior using your own JavaScript, we recommend <amp-render>.

Coming Soon

The AMP team is working to support layout=”container”, allowing the component to dynamically resize to fit rendered content. <amp-render> will also support a resizeToContents action; triggering this will resize the component to fit content as well. These features will be landing soon.

You can try <amp-render> out today! To learn more, check out the documentation. And as always, if you have feedback or feature requests, please let us know.

Posted by Ben Morss, Developer Advocate for the AMP Project and Dhruv Manek, Software Engineer, AMP Project