Hace algunas semanas lanzamos a producción nuestro desarrollo para TN en Accelerated Mobile Pages, una iniciativa de código abierto promovida por Google principalmente para mejorar la velocidad de carga de las páginas en celulares. Entre otros objetivos, AMP busca reducir las barreras entre los usuarios de internet y los contenidos, con un set de recursos de desarrollo que nos permite construir sitios web a los que se accede de manera casi instantánea.
Con nuestro equipo de desarrollo también construimos el proyecto AMP para mejorar nuestro posicionamiento en Google y a partir de la aparición en los carruseles de contenido de las páginas de resultados de búsqueda, haya un acceso más veloz a nuestros contenidos.
Los desafíos técnicos
La primera premisa fue construir un proyecto separado de lo que es el monolito que actualmente tenemos en Drupal. El concepto se basó en crear un frontend que se alimentara de los mismos servicios que tienen las Apps de TN para poder tener una evolución del producto y del proyecto AMP sin la necesidad de afectar en nada a las demás plataformas que se nutren de nuestro CMS. Haber elegido el camino desatachado quizás fue lo más largo -cerca de dos meses de trabajo- y significó un desarrollo más grande, pero nos aporta mucha autonomía.
Esa independencia del resto de las plataformas fue para nosotros es un valor desde lo técnico porque hoy tenemos un alto nivel de acoplamiento.
Luego de analizar los templates de proyectos y las sugerencias que nos daba el proyecto AMP, decidimos construirlo con React. ¿Por qué? Eso nos permitiría usar componentes, esos componentes manejan estados y además se pueden renderizar del lado del servidor.
Comenzamos a usar esa tecnología y TypeScript, un super set de JavaScript (ES5) que nos permite tener mayor prolijidad a la hora de escribir código, hacerlo de manera más legible y reducir el nivel de error. Ahí apareció la primera piedra en el camino: con el correr del desarrollo nos dimos cuenta que no funcionaba del todo bien esta combinación y volvimos a React con ECMA Script 6 para comenzar a hacer componentes. Al principio el equipo no tenía tanta experiencia en estas tecnologías, pero fuimos aprendiendo muchísimo en el recorrido.
Además, fuimos construyendo todo sobre Node, un entorno de ejecución para JavaScript que significó salirnos de Apache o NGINX que nos resultaba sencillo de levantar y mantener. Y también nos quedamos con KOA, un framework web que nos facilitó manejo de puertos, cross domain y además el uso de generators . En ese momento nos topamos con otro problema: AMP no permite agregar scripts del lado del cliente.
La tercera etapa del desarrollo inició con la solución a esa traba. En ese momento agregamos MOBX. Comenzamos a usar React Server que es lo mismo que mostraríamos desde el cliente, pero renderizado desde el servidor y a través de NodeJS se lo llevaríamos al cliente ya renderizado. Usamos MOBX y trabajamos con Observables para manejar asincrónismo entre los servicios y el cliente.
Lo más difícil estuvo en hacer el renderizado del lado del servidor, que en comparación con el mismo proyecto renderizado del lado del cliente nos ahorraba cerca de 200ms. Esto en React es algo bastante nuevo y nos llevó tiempo de investigación y pruebas para estar bien seguros de que funcionaría. Luego de completar la arquitectura, llegó el momento de los ajustes visuales y de diseño, esenciales para que los usuarios tuvieran la mejor experiencia de consumo posible de los contenidos creados por la redacción de TN.com.ar.
Las primeras sensaciones en producción
Con la salida del proyecto a producción comenzamos a medir algunas variables. En primer lugar, quisimos asegurarnos que las páginas se estuvieran indexando de manera correcta: en los primeros días encontramos errores en las páginas y gracias a la autonomía lograda durante el desarrollo pudimos hacer varios deploys diarios para solucionarlos.
Con el correr de los días incluimos las rich cards para las páginas de resultados de búsqueda y comenzamos a notar que los contenidos comenzaron a aparecer entre las sugerencias de AMP.
En la actualidad seguimos verificando el crecimiento de las páginas indexadas en AMP y, lo que es mejor: cada vez más usuarios llegan a los contenidos móviles de TN a través de sus búsquedas en Google y AMP. Si bien vamos a seguir mejorando este proyecto, podemos decir que cumplimos los objetivos técnicos y los desafíos que se presentaban al comienzo del proyecto. Cerramos mayo con 1.9M de browsers únicos en AMP.
