Today at the JavaScript for WordPress Conference (#JSforWPConf), Felix Arntz and I gave a talk called AMP for JavaScripters about implementing interactive interfaces in AMP. Here’s the abstract we submitted for the talk:
As we all know, adding JavaScript to a web page allows for dynamic page modifications. However, with that flexibility comes great responsibility: When used excessively or independently of user interaction, JavaScript can seriously hurt performance and UX.
AMP has a somewhat curious relationship with JavaScript. Due to its restrictions on custom scripting, AMP may be disdained by JavaScript developers. In spite of this, AMP itself is an HTML framework written in JavaScript and powered by Web Components, so in no way does AMP consider JavaScript to be inherently bad.
The problem is that JavaScript is extensively abused on the web today, harming user experience in ways such as blocking page rendering, creating janky experiences, and reducing battery life. So AMP encourages developers to focus back on writing markup, using the large library of performant web components that allow pages to be created declaratively. Custom dynamic functionality is made possible through dedicated components and the usage of AMP actions/events and amp-bind.
This session dives into the paradigms for developing highly dynamic interfaces with AMP, while providing guidance to AMP’s approaches compared to traditional JavaScript. It also looks at the upcoming amp-script component that will allow developers to implement even the most custom interactions in a performant and developer-friendly way.
Here’s a recording of the talk on YouTube, also available on Crowdcast (requires login):
Also available are the slides:
The code examples are available on GitHub.
To learn more about AMP in general, please check out amp.dev as well as the AMP YouTube channel. For more about the official AMP WordPress plugin, see amp-wp.org.
To get an introduction to amp-bind, see this talk by William Chou at AMPConf 2017:
Also, to learn about amp-script, check out Kristofer Baxter‘s talk at AMPConf 2019:
One reply on “AMP for JavaScripters”
I am totally on the fence to use AMP or not use AMP and the official plugin has so many negative reviews (how I found you) I am skeptical. Even Kinsta, who used it and immediately took it down after a major drop in traffic (usually I give Google two weeks to pick things back up) immediately after activation. So the question is “to AMP or not to AMP”. Seems like a ton of hassle for a 1 second load time improvement. However, if it makes the Google gods happy, it is worth every second.