English version: https://medium.com/@ger86/4-tricks-for-developing-with-the-amp-framework-47af5caf71f9

Durante estas semanas he estado trabajando en mejorar la página web de una empresa organizadora de eventos que he desarrollado completamente sobre el framework AMP.

Este framework, que nos permite la carga prácticamente instantánea de páginas web y que es promocionado por la propia Google (que cachea aquellas páginas desarrolladas con AMP o con una versión de este framework) tiene sin embargo una serie de limitaciones:

• El tamaño de la hoja de estilos no puede superar los 50 KB.
• Es necesario emplear determinadas etiquetas especiales en vez de las habituales de HTML (por ejemplo, img es reemplazada por amp-img .
• Es obligatorio el uso de HTTPS.
• Los formularios (que son enviados mediante peticiones XHR) han de ser compatibles con CORS de modo que cuando Google cachee la página sigan funcionando
• Y… no se puede usar Javascript 😱😱😱

Esta última restricción implica que debemos ceñirnos a los componentes proporcionados por AMP para trabajar y desarrollar nuestra página web. Y si bien, hay bastantes y hay pocas cosas que echemos en falta, a veces esta limitación es un quebradero de cabeza.

Por eso me he decidido a recopilar unos cuantos trucos de cara a facilitaros la vida a la hora de desarrollar mediante AMP. ¡Espero que os sirvan!

Mostrar mensaje mientras se envía un formulario

Ya sabéis que siempre es necesario mostrar una reacción a las acciones llevadas a cabo por los usuarios. Y una de las cosas más frustrantes es pulsar el botón de “enviar” un formulario y no saber si se está enviando o no.

Por eso creo que este truco os resulta muy útil dado que además es muy sencillo de implementar.

Basta con añadir el mensaje que queremos mostrar mientras nuestro formulario se envía, por ejemplo

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

Y aprovechar que AMP modifica las clases de la etiqueta form a medida que el envío se realiza para mostrar dicho mensaje mientras los datos se envían:

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

Cambiar textos y valores de inputs

Este es uno de los trucos más útiles que he descubierto a medida que profundizaba en el desarrollo con AMP.

Básicamente el problema al que me enfrentaba era el siguiente: un formulario mostrado dentro de un componente amp-lightbox cuyo texto de introducción cambia en función del botón que lanza el lightbox. Esto con Javascript son apenas unas líneas, pero claro, como dice el refrán:

no valoras algo hasta que lo pierdes 😅😅😅

Por suerte, no es complicado replicar este comportamiento con AMP. Lo primero que tendremos que hacer es incluir el componente amp-bind dentro de nuestro proyecto:

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

A continuación, modificaremos nuestro botón para que no sólo lance el lightbox:

<button on="tap:formLightbox">

Sino para que también añada una propiedad al estado del documento (representado en forma de objeto JSON):

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

De modo que ahora en el objeto estado del documento tendremos una propiedad formLightboxTitle que podremos emplear.

❗❗❗. Esto nos deja una enseñanza más y es saber que al evento tap podemos añadirle varias acciones.

Ahora ya sólo queda emplear esa propiedad formLightboxTitle dentro de nuestro lightbox. Para ello, el componente amp-bind nos permite emplear el atributo [text] donde podemos bien emplear directamente esa variable:

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

O incluso concatenarla:

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

Modificando el valor de un input

El componente amp-bind nos permite también modificar el valor de un input prácticamente del mismo modo.

Supongamos que ahora queremos que el botón que lanza el lightbox no sólo establezca el texto que encabeza el formulario sino que modifique el valor de un input de tipo hidden que almacenará qué botón lanzó el lightbox. Para ello basta con añadir lo siguiente a nuestro botón:

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

Y aprovechar la propiedad service que hemos añadido al estado del documento para permitir que el componente amp-bind se la asigne al input de tipo hidden:

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

Resetear un formulario

Siguiendo con el caso anterior, también se me planteó el siguiente problema. Dado que el formulario era el mismo para todos los botones y sólo cambiaba el encabezado, desde el punto de vista del usuario quedaba un poco raro esta situación:

1. Abre el primer formulario
2. Lo deja a medias cerrando el lightbox
3. Abre “otro” formulario desde otro botón
4. Ve los datos que dejó rellenos del anterior formulario (es el mismo)

Para resolver esta situación la solución más sencilla es limpiar el formulario cada vez que se cierre el lightbox, algo que es tan sencillo como añadir lo siguiente a la acción tap del botón que cierra el lightbox:

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

Como veis, hay muchas situaciones que podemos resolver tirando de AMP, sus componentes y algo de ingenio.

Mostrar una modal tras hacer scroll

Creo que este es el truco más fácil de los 4 que estoy comentando en este artículo sobre trucos para desarrollar con AMP.

El objetivo es conseguir mostrar un popup lateral cuando el usuario hiciera unos cuantos scrolls para invitarle (sin invadirle mucho) a suscribirse a la newsletter.

Con Javascript es fácil, fácil. ¿Lo será con AMP? No.

Sin embargo cuando planteé esta funcionalidad sí que pensé que iba a ser relativamente fácil pues conocía de la existencia del componente amp position observer:

https://amp.dev/documentation/components/amp-position-observer/

Por tanto, en teoría bastaría con colocar el componente <amp-position-observer> allá donde quería forzar la aparición del lightbox y por medio de su evento on="enter:accion" lanzar el lightbox:

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

El problema es que no es posible, debido a que el componente amp position observer sólo permite ejecutar acciones de tipo low trust. Por tanto, si lo intentamos usar para mostrar el lightbox veremos el siguiente error:

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

Vaya… Igual estaréis pensando que podemos probar a añadir una clase CSS al lightbox aprovechando el componente amp bind de modo que lo podamos mostrar nosotros, pero tampoco se nos permite emplear esta acción en el evento enter (salta el mismo error). 😡

Sin embargo tras pensar un poco encontré con la siguiente solución que involucra también al componente amp animation:

Básicamente se trata de olvidarnos del component amp lightbox ya que no hay ninguna forma de mostrarlo empleando el evento enter y recurrir a una animación por medio de este componente para lograrlo.

Para ello lo primero que hay que saber es que el componente amp animation sólo permite modificar las siguientes propiedades:

• opacity
• visibility
• transform
• offset-distance

Creo que de no poder modificar las dos primeras no se me hubiera ocurrido ninguna solución. Por suerte sí que podemos, por lo que inicialmente tendré el siguiente CSS asignado al div que contiene al popup lateral de la newsletter:

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

Siendo su HTML el siguiente:

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

A continuación añadiremos nuestro componente amp animation :

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

Y declararemos la siguiente animación:

Se trata como veis de una animación muy básica:

• su id es newsletterLightboxAnimation (lo necesitaremos para lanzarla),
• dura 0.3 segundos,
• la ejecuta sobre el elemento del DOM con id newsletterLightbox ,
• y lo que hace es modificar las propiedades opacity y visibility del elemento para mostrarlo

Ahora sólo queda ejecutarla cuando queramos. Por suerte ahora sí que el componente amp position observer nos lo permite, por lo que bastará añadir lo siguiente:

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

para ver el popup apareciendo tal y como quería.

Nota. He añadido la propiedad once a amp-position-observer de cara a que el evento se ejecute una sóla vez.

Conclusiones

Como decía en medio de artículo desarrollar con AMP, sobre todo si nos toca hacer alguna tarea compleja de las que estamos acostumbrados a implementar mediante Javascript, requiere conocer bien este framework, tanto sus limitaciones como las posibilidades de sus distintos componentes, de modo que con un poco de inventiva podamos conseguir tener una página con algo más de dinamismo.

Espero que os haya resultado interesante este artículo sobre AMP y que si os apetece me enviéis algún truco que conozcáis para compartirlo también con el resto de la comunidad.

Apóyame en Patreon

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇