4 tricks for developing with the AMP framework

Discover these tricks to increase the possibilities of web pages developed using the AMP framework

During these weeks I have been working on improving the website of an event organizing company that I have completely developed on the AMP framework.

This framework, which allows us to load web pages practically instantaneously and which is promoted by Google itself (which caches those pages developed with AMP or with a version of this framework), however, has a number of limitations:

This last restriction implies that we must stick to the components provided by AMP to work and develop our website. And while there are quite a few and there are few things that we are missing, sometimes this limitation is a headache.

That is why I have decided to collect a few tricks in order to make your life easier when developing through AMP. I hope they serve you!

Show message while submitting a form

You already know that it is always necessary to show a reaction to the actions carried out by users. And one of the most frustrating things is to hit the “submit” button on a form and not know if it’s being submitted or not.

So I think this trick is very useful for you since it is also very easy to implement.

It is enough to add the message that we want to show while our form is being sent, for example:

<div class="alert alert-info">Sending...</div>

And take advantage of the fact that AMP modifies the classes of the form tag as it is sent to show that message while the data is being sent:

form .alert  display: none  border: 1px solid #bce8f1  color: #31708f  background-color: #d9edf7form.amp-form-submitting .alert  display: block

Change input texts and values

This is one of the most useful tricks I have discovered as I delved into development with AMP.

Basically the problem I was facing was the following: a form displayed inside an amp-lightbox component whose introduction text changes depending on the button that launches the lightbox. This with Javascript is just a few lines, but of course, as the saying goes:

You don’t value something until you lose it 😅😅😅

Fortunately, it is not difficult to replicate this behavior with AMP. The first thing we will have to do is include the amp-bind component within our project:

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

Next, we will modify our button so that it not only launches the lightbox:

<button on="tap:formLightbox">

But so that you also add a property to the document state (represented as a JSON object):

<button
on="tap:AMP.setState({formLightboxTitle: 'Nuestro equipo a tu disposición',formLightbox"
>

So now in the document state object we will have a formLightboxTitle property that we can use.

❗❗❗. This leaves us one more lesson and that is to know that we can add several actions to the tap event.

Now all that remains is to use that formLightboxTitle property inside our lightbox. To do this, the amp-bind component allows us to use the [text] attribute where we can directly use that variable:

<h3 [text]="formLightboxTitle"></h3>

Or even concatenate it:

<h3 [text]="'Esto es el título' + formLightboxTitle"></h3>

Modifying the value of an input

The amp-bind component also allows us to modify the value of an input in practically the same way.

Let’s suppose that now we want the button that launches the lightbox not only to set the text that heads the form, but also to modify the value of an input of type hidden that will store which button launched the lightbox. To do this, simply add the following to our button:

<button
on="tap:AMP.setState({formLightboxTitle: 'Nuestro equipo a tu disposición', service: 'button-1'}),formLightbox">

And take advantage of the service property that we have added to the document state to allow the amp-bind component to assign it to the hidden type input:

<input type="hidden" [value]="service">

Reset a form

Continuing with the previous case, I also had the following problem. Since the form was the same for all the buttons and only the heading changed, from the point of view of the user this situation was a bit strange:

To solve this situation the easiest solution is to clean the form every time the lightbox is closed, something that is as simple as adding the following to the tap action of the button that closes the lightbox:

<buttonclass="lightbox__close"on="tap:formLightbox.close,myFormId.clear">

As you can see, there are many situations that we can solve by pulling AMP, its components and some ingenuity.

Show a modal after scrolling

I think this is the easiest trick of the 4 that I am commenting on in this article on tricks to develop with AMP.

The objective is to show a side popup when the user made a few scrolls to invite him (without invading much) to subscribe to the newsletter.

With Javascript it’s easy, easy. Will it be with AMP? No.

However when I raised this functionality I did think it was going to be relatively easy because I knew of the existence of the amp position observer component:

Therefore, in theory it would be enough to place the <amp-position-observer> component where you wanted to force the appearance of the lightbox and through its on="enter:accion" event launch the lightbox:

<amp-position-observer
intersection-ratios="1"
on="enter.newsletterLightbox)"
layout="nodisplay"
>
</amp-position-observer>

The problem is that it is not possible, because the amp position observer component only allows executing low trust actions. Therefore, if we try to use it to show the lightbox we will see the following error:

“enter” event with “low” trust is not allowed to invoke “amp-lightbox.activate”.

Oops … You may be thinking that we can try adding a CSS class to the lightbox taking advantage of the amp-bind component so that we can show it ourselves, but we are also not allowed to use this action in the enter event (the same error occurs). 😡

However after thinking a bit I found the following solution that also involves the amp animation component:

To do this, the first thing to know is that the amp animation component only allows you to modify the following properties:

I think that if I could not modify the first two, no solution would have occurred to me. Luckily we can, so initially I will have the following CSS assigned to the div that contains the side popup of the newsletter:

.newsletter-lightbox  position: fixed  bottom: 0  right: 0  opacity: 0  visibility: hidden

Its HTML being the following:

<div id="newsletterLightbox" class="newsletter-lightbox"

Next we will add our amp animation component:

<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

And we will declare the following animation:

This is, as you can see, a very basic animation:

Now it only remains to execute it when we want. Luckily now the amp position observer component allows us to do so, it will suffice to add the following:

<amp-position-observerintersection-ratios="1"on="enter:newsletterLightboxAnimation.start"layout="nodisplay"once></amp-position-observer>

to see the popup popping up exactly the way you wanted.

Note. I have added property once toamp-position-observer so that the event executes only once.

Conclusions

As I said in the middle of an article, developing with AMP, especially if we have to do some complex task that we are used to implementing through Javascript, requires knowing this framework well, both its limitations and the possibilities of its different components, so that with a little inventiveness we can get to have a page with a little more dynamism.

I hope you found this article on AMP interesting and that if you feel like sending me a trick that you know to share it with the rest of the community.

Do you want to read more articles like this?

If you liked this article I encourage you to subscribe to the newsletter that I send every Sunday with similar publications to this and more recommended content: 👇👇👇

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store