4 trucos para el desarrollo con el framework AMP
Descubre estos trucos para aumentar las posibilidades de las páginas web desarrolladas mediante el framework AMP
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 poramp-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:
- Abre el primer formulario
- Lo deja a medias cerrando el lightbox
- Abre “otro” formulario desde otro botón
- 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
yvisibility
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.
¿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: 👇👇👇