New Feature on AMP, amp-script is Live!

New Feature on AMP, amp-script is Live!

Earlier this year, at AMP Conf, we presented the developer preview of <amp-script>. We are now announcing the general availability of <amp-script>. It's an AMP component that runs your own JavaScript in a separate thread. This allows you to add custom JavaScript code to your AMP page while maintaining its ultra-fast speed!

<amp-script> allows you to cover use cases that you could not use with existing AMP components. It also allows you to share code on your AMP and non-AMP pages. You can even use a JavaScript framework. Here are some examples developed by the team working on <amp-script>:

• Todo MVC using Vue,
• A password checker,
• Visualizing data in an article using D3.js,
• Multi-page forms where each section must be validated before proceeding to the next section, as shown below.

If the examples above interest you, try <amp-script>. Keep in mind that to preserve the MPA performance guarantee, there are certain constraints:

• Skip Content: To avoid an unexpected jump in content, <amp-script> usually requires user gestures to change the content of the page.
• Page loading: <amp-script> does not modify the content of the page without user intervention, nor does it modify the content when the page is loaded.
• Script size: The script used in a single <amp-script> must be less than 150 KB. Note that you can use your preferred JS framework, but it must respect the 150 KB limit.
• API support: Not all APIs are supported in a Web Worker and WorkerDOM has a list of allowed APIs. In addition, some DOM methods and properties are not yet implemented. The complete list is publicly available in WorkerDOM compatibility. Please report a problem if you want to see an added API.
• <amp-script> is compatible with frameworks you may already be using, such as React, Preact, Angular, Vue.js, jQuery and D3.js.

This was one of the most important requests from developers using AMP. The AMP project is pleased to be able to help solve this problem while retaining the AMP speed value proposition. You can learn more about how <amp-script> works here and try <amp-script> by following this guide. This is a great way to unlock a lot of use cases that were not possible before!

Repost from: https://blog.amp.dev/2019/08/21/amp-script-amp-heart-js/