Un estadio de futbol iluminado de noche visto desde la tribuna, con la afición desenfocada
Sky Sports

Sky Sports: Plataforma de Datos Deportivos en Tiempo Real para 11M de Usuarios

Plataforma de datos deportivos en tiempo real que reemplazó los marcadores en Flash, con 11M de usuarios activos soportados en web, iOS y Android.

Cliente Sky Sports
Sitio web skysports.com
Completado
Tecnologías y servicios
Real-Time ApplicationsHybrid App DevelopmentAPI ArchitectureiOS DevelopmentAndroid DevelopmentWebSocket Technology

Objetivos del proyecto

Reemplazar la tecnología Flash, ya al final de su vida útil, con una aplicación híbrida moderna, llevar los marcadores en tiempo real del estadio a millones de usuarios con latencia menor a un segundo, construir una infraestructura de API escalable para aguantar los picos de tráfico de los grandes eventos deportivos, y asegurar un diseño impecable en pantallas retina de iOS.

El Problema

Adobe estaba retirando Flash, y los marcadores en vivo de Sky Sports, su plataforma de datos deportivos en tiempo real, funcionaban por completo con él.

Millones de aficionados al futbol revisaban los marcadores durante los partidos, y todos estaban por quedarse sin acceso en cuanto los navegadores dejaran de soportar Flash.

El plazo era corto y había mucho en juego. Una caída en pleno partido de la Premier League no era opción.

Por si fuera poco, la API del backend se caía durante los partidos grandes.

Lo Que Construimos

Reconstruimos el frontend, el backend y las apps para celular mientras el sistema viejo seguía funcionando. Los aficionados que revisaban marcadores durante los partidos nunca notaron que estábamos recableando la plataforma por debajo.

El Nuevo Frontend

Flash no funcionaba en celulares, así que los aficionados de Sky Sports que usaban el celular no podían seguir los marcadores. Por eso esto fue una expansión además de un reemplazo.

Construimos una aplicación híbrida que funcionaba en todas partes. Un solo código servía a iOS, Android y la web, y todas las plataformas tenían la misma experiencia.

Usamos rendimiento nativo donde importaba y tecnologías web donde tenían sentido.

El diseño tenía que verse impecable en pantallas retina. Los directores de arte notan cuando algo se ve borroso, y nos aseguramos de que no tuvieran de qué quejarse.

El Sistema en Tiempo Real

Un marcador en vivo pierde su valor si llega tarde. El aficionado quiere saber qué pasa en el momento en que pasa.

Construimos un flujo en tiempo real que llevaba los datos del estadio a la pantalla en menos de un segundo. Recibía señales directas de las sedes, usaba varias fuentes de datos como respaldo y enviaba las actualizaciones por conexiones WebSocket, sin consultas periódicas ni botón de actualizar.

Cuando cae un gol, la actualización tiene que llegar a la pantalla de cada aficionado en segundos. Ese era el requisito.

La Reconstrucción del Backend

La API anterior trataba todas las solicitudes igual. Daba lo mismo si querías actualizaciones en vivo o los resultados de ayer: todo pasaba por el mismo proceso lento.

La reconstruimos como un sistema dirigido por eventos, así que las actualizaciones se envían solo cuando cambia el marcador y no cada cierto tiempo aunque no pase nada.

Los partidos en vivo usan conexiones WebSocket y los datos históricos salen de APIs REST, para que cada tarea tenga la herramienta correcta. La caché está donde tiene sentido, la distribución geográfica reduce la latencia y el autoescalado absorbe los picos de tráfico.

Manejar el Caos

El tráfico deportivo es un caos predecible. Sabes exactamente a qué hora empieza el partido, pero no tienes idea de cuánta gente lo va a seguir.

Un sábado normal trae tráfico moderado. El día de la final de copa, el tráfico pasa de la carga normal a millones en minutos.

El sistema tenía que aguantar las dos cosas sin intervención manual. Construimos un autoescalado que agrega servidores cuando sube el tráfico y los quita cuando termina el partido, así que el costo de infraestructura sigue al uso real y no a escenarios del peor caso.

El Lanzamiento

Algo de este tamaño no se cambia de un día para otro.

Corrimos el sistema viejo y el nuevo en paralelo, pasamos el tráfico a la nueva plataforma poco a poco e hicimos pruebas A/B con usuarios reales durante partidos reales.

Empezamos con partidos amistosos, con poco tráfico y poco en juego, y luego pasamos a los partidos de liga. La prueba final fue la más grande: las finales de la Champions League.

No hubo tiempo de inactividad, y la mejor señal de éxito fue que nadie notó que algo había cambiado.

La excepción fueron los usuarios de celular, que notaron que por fin podían ver los marcadores en su teléfono.

Los Resultados

11M de usuarios activos soportados. La plataforma sostuvo a la audiencia de marcadores en vivo de Sky Sports durante los partidos más importantes de la temporada.

Latencia de sub-segundo desde estadio a pantalla. Las actualizaciones llegaban al aficionado en menos de un segundo desde que cambiaba la señal de la sede.

Cero tiempo de inactividad durante eventos principales. Ni durante la migración, ni en los lanzamientos, ni en las finales de la Champions League.

100% de reemplazo de Flash. Todas las plataformas y todos los dispositivos pasaron a la nueva app.

Acceso desde el celular. Los aficionados que no podían usar la versión en Flash en su teléfono ahora podían seguir los marcadores desde cualquier lugar.

Detección de errores antes que el usuario. Nos enterábamos de los problemas antes de que los usuarios los notaran. Con el sistema anterior, eran los usuarios quienes llamaban para avisar que algo no funcionaba.

Lo Que Aprendimos

El tiempo real a escala depende de la arquitectura, no solo de la velocidad. Puedes escribir código rápido todo el día, pero si la arquitectura no escala, ese código no sirve de mucho. Diseño dirigido por eventos, comunicación asíncrona, distribución geográfica y caché son lo que aguanta a millones de usuarios.

Las apps híbridas rinden bien para contenido. En aplicaciones de contenido, un framework híbrido se acerca al rendimiento nativo y permite que un solo código atienda tres plataformas con las mismas funciones y las mismas actualizaciones.

El tráfico deportivo requiere una planeación especial. No crece poco a poco como en la mayoría de los SaaS. Pasa de la carga normal a millones en minutos, se sostiene lo que dura el partido y luego regresa. El autoescalado es la única forma de aguantarlo sin desperdiciar infraestructura.

Observar el sistema le gana a reaccionar. Saber de un problema antes que el usuario cambia la forma de trabajar del equipo. Pasamos de enterarnos de las caídas por llamadas a detectarlas en los tableros antes de que afectaran a alguien.

La migración gradual le gana al cambio de golpe. Las pruebas A/B con usuarios reales durante partidos reales nos dieron confianza, y si algo salía mal podíamos revertir al instante. Cuando no se puede parar el servicio, gana el enfoque cuidadoso.

Los aficionados de Sky Sports esperaban que los marcadores simplemente funcionaran. Durante la migración más grande en la historia de la plataforma, eso fue exactamente lo que pasó.


¿Necesitas construir aplicaciones en tiempo real a escala? Hablemos →

Ve más plataformas que hemos construido Ver casos de estudio →

¿Te gusta lo que ves?

Cuéntanos qué quieres construir y te decimos cómo lo haríamos.

Iniciar un proyecto