CodeTV ofrece programación en video para desarrolladores, desde sesiones de live coding hasta game shows. Necesitaban un framework que pudiera manejar una arquitectura de datos compleja y entregar una plataforma de streaming de alto rendimiento para suscriptores.
Cansado de que cada evento en vivo se sintiera igual, Jason Lengstorf se propuso crear contenido en video atractivo para desarrolladores. Los programas de CodeTV se enfocan en conceptos originales y alto valor de producción para ofrecer una verdadera alternativa tipo TV para quienes están cansados de ver otra llamada de Zoom subida a YouTube.
Con Astro, Lengstorf tenía las herramientas para construir toda una plataforma de medios que manejaba las necesidades de contenido y rendimiento y “simplemente funcionaba”, manteniendo su enfoque principal en crear programación original.
Desafíos
Cuando Jason Lengstorf encontró éxito con su serie web “Learn with Jason”, se dio cuenta de que quería producir más, y más variado, contenido en video. Soñaba con expandir su contenido educativo para incluir programas con guion y personajes en los que inviertas, y game shows donde los devs se enfrentan cara a cara.
Pero para moverse en esta nueva dirección, necesitaba un nuevo tipo de sitio web. Lengstorf se dio cuenta, “Estoy haciendo TV. ¿Cómo se ve la TV?” Notó que plataformas establecidas de streaming de medios como Netflix, Hulu y Nebula seguían una arquitectura consistente con características específicas: navegación intuitiva a través de varias series, seguimiento de contenido visto, notificaciones de contenido nuevo, así como controles de suscriptor autogestionados para pagos e información de cuenta.
CodeTV necesitaba hacer mucho, y hacerlo de manera confiable, para que el tiempo se dedicara a crear contenido y no a solucionar problemas de su plataforma de distribución.
Requisitos
Para ser una plataforma de medios completa, CodeTV necesitaba una solución que fuera fácil de integrar con una variedad de servicios: un sistema de gestión de contenido (CMS), streaming de video con Mux, autenticación, e-commerce, gestión de activos digitales, búsqueda en el sitio, así como automatización compleja de flujos de trabajo conectando todo.
Con todo eso en marcha, no había espacio para sobrecarga. CodeTV necesitaba ser ligero y performante. Y el código necesitaba ser fácil de organizar y mantener. El modelo de “opt in to complexity” de Astro era exactamente lo que se necesitaba.
Si quiero añadir algo de interactividad del cliente o si quiero añadir un server island, todo está sobre la mesa. Y es opt-in por componente. Eso se sintió muy bien.
CodeTV eligió Mux para proporcionar streaming de bit-rate adaptativo de contenido de video exclusivo para suscriptores. El soporte nativo de Astro para web components hizo que integrar el reproductor de video ligero de Mux fuera muy fácil. Lo siguiente sería integrar todo lo demás necesario para un proveedor completo de servicios de streaming de video bajo demanda basado en suscripción.
Solución e implementación
Las estrategias de renderizado de Astro fueron clave para mantener a los espectadores sintonizados. A pesar de que CodeTV ofrece a sus usuarios una experiencia dinámica y personalizada, la filosofía de static-by-default de Astro hizo fácil prerenderizar HTML estático para casi todas las páginas, mejorando los tiempos de carga y reduciendo costos. Los server islands de Astro permitieron a CodeTV diferir la carga de contenido dinámico personalizado sin bloquear el renderizado del contenido común a todos los usuarios.
Renderizar páginas rápidas y performantes y hacer streaming de video bajo demanda no fue problema con Astro. Incluso con jerarquías de contenido complejas que incluyen múltiples programas, temporadas, presentadores, invitados y más, navegar por CodeTV se siente tan rápido como cambiar de canal.
La extensibilidad de Astro significó que añadir las integraciones necesarias a CodeTV para construir la plataforma de streaming fue sin problemas: Mux para streaming de video, Clerk para autenticación, Stripe para procesamiento de pagos, Sanity para gestión de contenido, Inngest para tareas en segundo plano, y desplegado en Netlify. Todo se integró bien mejorando las páginas prerenderizadas con server islands. Pagos de suscripción, un panel de usuario, contenido personalizado para suscriptores… fuera lo que fuera que le lanzaran a Astro, “simplemente funcionaba”, dice Lengstorf.
Simplemente sigo añadiéndole más cosas, cada vez pensando, “Quizás esto es lo que me detenga.” Pero hasta ahora, no he encontrado los límites. Y, empiezo a dudar que siquiera existan.
El soporte flexible de Astro para frameworks de UI aceleró el tiempo de migración al permitir la reutilización de componentes de React existentes en el nuevo sitio. No fue necesario reconstruir una solución de búsqueda del sitio, porque Astro era totalmente compatible con el código de React del sitio original de Learn With Jason.
Resultados
Ahora, la mayor parte del tiempo de Lengstorf se dedica a trabajar en contenido, su objetivo original, porque mantener el sitio web de CodeTV puede ser casi algo secundario. Pero cuando es momento de añadir nuevas características, es fácil volver al código de Astro. El modelo mental y la organización del código de Astro tienen sentido, y no hay luchas optimizando llamadas a APIs o latencia de base de datos. El prerenderizado de Astro fue la solución casi cada vez que quisieron mejorar el rendimiento.
El resultado es un sitio rico en contenido que se siente dinámico y responsivo para los espectadores, obteniendo excelentes puntajes en dispositivos de escritorio y móviles en las métricas de Core Web Vitals.
El plan original había sido “haz que funcione, luego hazlo rápido.” Pero con Astro fue rápido desde el principio, porque como notó Lengstorf, “Esa es simplemente la naturaleza de cómo se construye con Astro.” Como una plataforma compleja, rica en contenido, de streaming de medios con varias integraciones y flujos de trabajo automatizados, CodeTV demostró que los límites de Astro podrían no existir.
Pensé, “Veamos hasta dónde podemos empujar esto antes de que se rompa.” Y simplemente nunca encontré el punto de quiebre.