Home de LATAM Airlines
Reconstruir la puerta de entrada de la aerolínea más grande de América Latina, y que marketing publique sin deploy
Una home antigua para un millón de visitas al día
La home de latamairlines.com es la puerta de entrada de la aerolínea: cerca de un millón de visitas al día. Cuando entré al equipo de Digital Marketing Engage en 2020, todavía funcionaba con la experiencia anterior, una aplicación en Backbone renderizada en el cliente.
LATAM decidió reconstruir el sitio desde cero con una nueva experiencia de usuario. Eso implicaba una nueva arquitectura de frontend, nuevos servicios entre el frontend y el backend transaccional, y una nueva forma de que marketing pusiera las promociones frente a los clientes.
Microfrontends renderizados en servidor sobre una capa de servicios
Microfrontends en Next.js
La home se construyó como microfrontends en React y Next.js, renderizados en el servidor. Pasar de Backbone en el cliente a SSR puso contenido real en la primera respuesta, algo que importa tanto para la velocidad percibida como para el SEO.
BFFs en Node.js
Servicios backend-for-frontend en Node.js y Express concentraban la lógica de negocio que necesitaba la UI y se comunicaban con el backend: capas transaccionales en Java, desplegadas en GCP como microservicios.
Caché en Redis
Las promociones, las tarifas y la propia home se cacheaban en Redis, para que una página con un millón de visitas al día no llegara al backend transaccional en cada request.
De una cáscara renderizada en el cliente a una home centrada en la reserva
En la home de 2020 archivada sobreviven el carrusel y los bloques de promociones con mucho texto, pero el buscador de vuelos es un marco vacío: en el sitio antiguo lo dibujaba el JavaScript en el navegador. La home de hoy pone el buscador primero, sobre la imagen principal, y convierte las promociones en tarjetas de tarifas con imagen, fechas de viaje, precios y filtros por tipo de viaje, sobre la arquitectura que construimos.
Promociones sin deploy
Los analistas de marketing creaban promociones en un backoffice que el equipo construía y mantenía, definiendo la fecha y hora de activación y los mercados donde debía aparecer cada una. Sin paso de aprobación y sin deploy: la promoción quedaba publicada en la home y en los minisitios de promoción y de mercado, gestionados en un CMS de Adobe, en unos cinco minutos.
Cada promoción se cacheaba en Redis, y al editarla o eliminarla se purgaba ese caché, así lo que veían los clientes siempre coincidía con lo que marketing había publicado.
De desarrollador a referente de la home
Entré en 2020 como Web UI Developer Semi-Senior Advanced a través de Globant, me promovieron a Senior en diciembre de 2021 y en julio de 2023 pasé a LATAM Airlines directamente como Senior Software Engineer, en el mismo producto.
En esos cuatro años me convertí en el referente del equipo para la home. Fui parte del cambio de arquitectura de Backbone a Next.js, lideré al equipo de desarrollo de la home mientras el tech lead estaba de baja e impulsé el trabajo de performance, accesibilidad y SEO. El sitio nuevo salió con cero problemas de accesibilidad reportados por axe y PageSpeed.
Métricas y resultados
- Tráfico
- ~1M de visitas diarias en la home
- Promociones
- Publicadas en ~5 minutos, programadas por fecha y mercado, sin deploy
- Accesibilidad
- 0 problemas en axe y PageSpeed en el lanzamiento
- Entrega
- Deploys diarios con un equipo de 10 personas