AMPConf 2019 acaba de terminar, ¡pero estamos empezando! En esta serie de artículos de blog, celebramos AMPConf destacando cómo el framework de React StoreFront y Layer0 facilitan la vida a los desarrolladores para admitir AMP en sus aplicaciones React.
Mantener sus amplificadores SECOS
Hemos sido relativamente primeros en adoptar el comercio electrónico tanto para las aplicaciones web progresivas (PWAs) como para las páginas móviles aceleradas (AMP). Con las PWA con tecnología React, los desarrolladores pueden ofrecer experiencias altamente atractivas en la web que rivalizan con las aplicaciones nativas. Sin embargo, cuando se trata de tráfico generado por búsquedas, AMP proporciona la opción más rápida posible.
De hecho, el recorrido recomendado por Google es entregar primero una versión AMP de tu aplicación a los usuarios de búsqueda y realizar la transición a la versión completa de tu sitio PWA en páginas posteriores. Y dado que casi la mitad del tráfico de sitios web de los minoristas proviene de búsquedas orgánicas, apoyar tanto AMP como PWA se ha convertido en una prioridad.
Desafortunadamente, las tecnologías PWA y AMP no podrían ser más divergentes. Las PWA utilizan bibliotecas modernas como React, Vue y Angular, donde JavaScript asume el papel central de renderizar HTML y CSS y entregar interactividad. Las páginas AMP, por otro lado, están completamente prohibidas de usar JavaScript y tienen restricciones estrictas tanto en CSS como en HTML. El resultado es que para admitir tanto AMP como PWA, los desarrolladores normalmente necesitan recodificar una parte significativa de su aplicación en AMP. Y la carga sobre el equipo de desarrollo no termina ahí. Cada corrección de errores, cambio de diseño, nueva característica, etc. puede requerir propagarse tanto a las bases de código AMP como a PWA.
Escribir una gran aplicación una vez es bastante difícil. Nadie quiere escribir la misma aplicación dos veces. Los desarrolladores odian este tipo de cosas tanto que le han dado un acrónimo popular, DRY (no te repitas). Como desarrolladores, invertimos desde el principio en agregar soporte AMP automático al framework React que creamos para las PWA de eCommerce. De esta manera, los desarrolladores pueden escribir su aplicación web progresiva en React y obtener soporte AMP sin esfuerzo adicional de desarrollo.
Y ha funcionado muy bien para nuestros clientes. En lugar de reconstruir su aplicación, implementar AMP con React StoreFront normalmente toma a nuestros clientes uno o dos días, y la mayoría de eso es simplemente verificar que todo funciona como se esperaba.
En esta publicación, cubriremos cómo React StoreFront hace el trabajo duro por usted para apoyar AMP y PWA desde una sola base de código. En la próxima entrega, compartiremos algunas características nuevas y emocionantes de Layer0 que ayudan a entregar AMP en un contexto empresarial complejo.
¿Por qué no todos los marcos React hacen esto?
Para una aplicación típica de React, derivar automáticamente contenido AMP es difícil. Esto se debe a que la mayoría de las aplicaciones de React están diseñadas para ejecutarse solo en el navegador, pero el contenido de AMP no puede tener ningún JavaScript (incluido React) antes de que llegue al navegador. En otras palabras, no puede simplemente apuntar la caché de Google AMP al mismo código de React que envía al navegador. Son formatos completamente diferentes.
Para superar esta limitación, nos beneficiamos de una decisión arquitectónica temprana de hacer que las aplicaciones de React StoreFront sean universales (a veces llamadas isomorfas) por defecto y soportar el renderizado del lado del servidor (SSR) en Layer0. Con SSR, el renderizado de la página se realiza en el servidor antes de que se sirva a los usuarios. Si bien nuestros objetivos principales al agregar SSR eran mejorar el rendimiento y el SEO, también nos permitió ejecutar una aplicación React StoreFront en el servidor y luego convertir automáticamente la salida HTML a HTML AMP válido en conjunto con las técnicas a continuación.
Notifica a Google que AMP es compatible
El primer paso para implementar AMP es notificar al rastreador de Google que existen equivalentes AMP de sus páginas. Normalmente, necesitarías crear versiones AMP separadas de tus páginas y luego configurar el router de tu aplicación para que sirva contenido AMP y PWA en URL distintas. Con React StoreFront, todo lo que necesita hacer es agregar un decorador @withAmp a su componente de página de nivel superior. React StoreFront renderiza automáticamente AMPHTML válido para cualquier página simplemente añadiendo “.amp” a la URL. El decorador @withAmp aprovecha esta convención para agregar la etiqueta de enlace necesaria al encabezado del documento.
En otras palabras, esto:
@withAmp
class Product extends Component {
...
}
Resultados en algo como esto en tu página de PWA:
<link rel="amphtml" href="https://www.mysite.com/p/1.amp"/>
Cuando el rastreador de Google ve un enlace a /p/1, descargará el contenido AMP y lo publicará directamente desde la CDN AMP de Google.
Tenga en cuenta que para un SEO adecuado, la página AMP también necesita incrustar una etiqueta rel=canonical de nuevo a la versión original de PWA de la página como esta:
<link rel="canonical" href="https://www.mysite.com/p/1"/>
Vale la pena destacar aquí la importancia de tener las páginas AMP y no AMP apuntando entre sí con las <>etiquetas de enlace apropiadas (pero diferentes versiones). Sin estas configuraciones correctamente, Google no servirá su contenido AMP, y peor aún, podría resultar en que sus páginas AMP canibalicen el rango SEO de sus páginas que no son AMP. React StoreFront hace todo el “contabilidad de entrada doble de AMP” por usted, por lo que no tiene que preocuparse de que esto suceda simplemente porque alguien olvidó actualizar las etiquetas correctas.
Componentes AMP Aware
Implementar incluso la interactividad más básica en AMP puede ser un gran dolor. Por ejemplo, un campo de cantidad simple en AMP podría verse así:
<amp-form>
<amp-state id="product">
<script type="application/json">
{
"id": "123",
"name": "Product",
"quantity": 1
}
</script>
</amp-state>
<input
type="text"
[value]="product.quantity"
on="input-throttled:AMP.setState({ product: { quantity: event.value } })"
/>
</amp-form>
Imagina escribir dos versiones de código como esta PARA CADA CONTROL INTERACTIVO en tu aplicación web progresiva. ¡Allí va tu fecha límite de lanzamiento!
Afortunadamente, hemos hecho ese trabajo duro para usted. React StoreFront le ofrece componentes amp de grano grueso como QuantitySelector que ocultan todos estos detalles sangrientos. En React StoreFront, simplemente usaría:
<QuantitySelector product={product}/>
El marco de trabajo React se encarga de representar la versión AMP del componente cuando Google solicita una página AMP.
Renderizado condicional
En la mayoría de los casos, los desarrolladores pueden simplemente utilizar uno de los componentes AMP-Aware dentro del marco de React StoreFront para proporcionar interactividad en AMP. Sin embargo, si encuentra que necesita renderizar algo específico para AMP, el framework expone un campo de amplificación booleano en el estado de la aplicación que puede usar para renderizar condicionalmente contenido específico en AMP.
Por ejemplo:
import React, { Component } from 'react'
import { inject } from 'mobx-react'
@inject('app')
class MyAMPAwareComponent extends Component {
render() {
if (this.props.app.amp) {
return (
// AMP content
)
} else {
return (
// PWA content
)
}
}
}
Analítica universal
La forma declarativa de AMP de definir los eventos de interacción es completamente diferente de la de React Por ejemplo, imagina que quieres realizar un seguimiento de los clics en enlaces de productos específicos enviando eventos a Google Analytics. En AMP, esto sería algo así como:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"triggers": [
{
"on":"click",
"event":"product_clicked",
"selector":"#product1",
"request":"event",
"productID": "1"
}
]
}
</script>
</amp-analytics>
<a id="product1" href="/p/1" alt="Red Shirt">
<amp-img src="/images/products/1" height="100" width="100"/>
<div>Red Shirt</div>
</a>
Te ahorraré la implementación de React, pero es probable que involucre un oyente onClick y algunas llamadas a ga(). Basta con decir que los dos no se parecerán nada.
React StoreFront proporciona una abstracción, el componente Track, que implementa ambos para usted:
<Track event="product_clicked" productID={product.id}>
<a href="/p/1" alt="Red Shirt">
<Image src="/images/products/1"/>
<div>Red Shirt</div>
</a>
</Track>
Transformar el servidor renderizado HTML en AMPHTML
Las estrategias anteriores nos permiten obtener aproximadamente el 80% del camino hacia la renderización de AMP válido. Sin embargo, hay que introducir cambios adicionales en el documento. React StoreFront transforma el HTML saliente antes de enviarlo, realizando varios cambios, entre ellos:
Añadir amp-boilerplate y ⚡
AMP requiere algunos elementos específicos para estar presentes en el documento. Estos incluyen un⚡ atributo “” en el elemento HTML raíz y un elemento de estilo estándar llamado el boilerplate AMP:
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal
Transformando y consolidando CSS
AMP requiere que todos los CSS se proporcionen en el cuerpo de un único elemento de estilo. El uso del atributo style y <link rel=”stylesheet”> están prohibidos. React StoreFront consolida todos los estilos de su base de código, incrustados dentro de varios <>elementos de estilo o incluso atributos de estilo en línea, en un único <>elemento personalizado de estilo amplificador. Para cada uso de un atributo de estilo, React StoreFront crea una clase CSS única que contiene las reglas correspondientes, aplica la clase al elemento, elimina el atributo de estilo y agrega la clase al elemento de estilo amp-custom. En otras palabras, esto:
<div style="font-weight:bold">Red Shirt</div>
se convierte en:
<style amp-custom>
…
.mi1 {
font-weight:bold;
}
</style>
<div class="mi1">Red Shirt</div>
Cuando se agrega en todos tus estilos, esta conversión automática de CSS elimina otro dolor de cabeza importante al escribir páginas compatibles con AMP desde tu aplicación React.
Limpieza de marcado
Hay varias otras reglas que AMP impone en el marcado. Por ejemplo, la forma en que ReactDOM renderiza los atributos booleanos produce AMPHTML no válido. Este JSX:
<script
async
custom-element="amp-sidebar"
src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
/>
Resultará en este HTML:
<script
async
custom-element="amp-sidebar"
src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
/>
Lo que resulta en que el validador AMP muestre un error como este:
Crux no puede rastrear el porcentaje de tráfico «Teléfono» para PWAs/spas
Si utiliza una biblioteca de componentes, algunos de los HTML renderizados por los componentes pueden entrar en conflicto con el validador AMP por varias razones. React StoreFront fomenta el uso de la popular biblioteca Material UI y proporciona reglas específicas para limpiar el HTML que produce. Aquí es donde el uso de un marco de aplicación web progresivo de React que cubre todo, desde la administración de estado hasta los componentes y el estilo realmente muestra su valor en términos de aumentar la velocidad de los desarrolladores.
Infraestructura para AMP y PWA
Como desarrollador que implementa AMP y PWA, puede implementar dos versiones de su aplicación y luego mantenerlas a través de cambios futuros (lo que significa que cada solución se convierte en un cambio de código en dos lugares) o usar la automatización para derivar contenido AMP de sus páginas. En Layer0 elegimos este último, que funcionó muy bien para nuestros clientes. Las características de React StoreFront que hemos descrito hasta ahora son solo una parte de la razón de ese éxito. En la próxima entrega, exploraremos cómo este framework se integra con Layer0 (Edgio) para dar soporte a AMP en un entorno empresarial. Mantente atento.
