CodeTV предлагает видеопрограммы для разработчиков — от live coding до игровых шоу. Им нужен был фреймворк, который справится со сложной архитектурой данных и обеспечит высокую производительность стриминговой платформы для подписчиков.
Устав от того, что каждый live-стрим ощущается одинаково, Jason Lengstorf решил создавать увлекательный видеоконтент для разработчиков. Шоу CodeTV делают упор на оригинальные концепции и высокое качество продакшена, предлагая настоящую TV-альтернативу тем, кто устал смотреть очередной Zoom-звонок на YouTube.
С Astro у Lengstorf были инструменты, чтобы построить целую медиаплатформу, которая закрывала задачи по контенту и производительности и «просто работала», оставляя главный фокус на создании оригинальных программ.
Проблемы
Когда Jason Lengstorf добился успеха с веб-сериалом «Learn with Jason», он понял, что хочет делать больше и более разнообразного видеоконтента. Он мечтал расширить образовательный контент сценарными шоу с персонажами, к которым привязываешься, и игровыми форматами, где разработчики соревнуются лицом к лицу.
Но для нового направления нужен был новый тип сайта. Lengstorf осознал: «Я делаю телевидение. Как выглядит TV?» Он заметил, что устоявшиеся стриминговые платформы вроде Netflix, Hulu и Nebula следуют единой архитектуре с определённым набором функций: интуитивная навигация по сериалам, отслеживание просмотренного, уведомления о новом контенте, а также self-serve-управление подпиской, оплатой и данными аккаунта.
CodeTV нужно было многое — и надёжно, чтобы время уходило на создание контента, а не на отладку платформы доставки.
Требования
Чтобы стать полноценной медиаплатформой, CodeTV нужно было решение, которое легко интегрируется с разными сервисами: CMS, Mux для видеостриминга, аутентификацией, e-commerce, управлением цифровыми активами, поиском по сайту, а также сложной автоматизацией workflow, связывающей всё это вместе.
При таком объёме задач не было места для лишнего веса. CodeTV должна была оставаться лёгкой и производительной. И код должен был быть простым в организации и поддержке. Модель Astro «подключай сложность по желанию» — именно то, что требовалось.
Если мне нужна клиентская интерактивность или server island — всё это доступно. И это opt-in для каждого компонента. Такой подход очень понравился.
CodeTV выбрала Mux для adaptive bit-rate стриминга видео только для подписчиков. Нативная поддержка web components в Astro сделала интеграцию лёгкого видеоплеера Mux простой задачей. Дальше оставалось подключить всё остальное для полноценного subscription-based VOD-сервиса.
Решение и внедрение
Стратегии рендеринга Astro были ключом к тому, чтобы зрители оставались на платформе. Хотя CodeTV отдаёт пользователям динамичный и персонализированный опыт, философия static-by-default в Astro упростила предрендер статического HTML почти для каждой страницы — это ускорило загрузку и снизило затраты. Server islands Astro позволили CodeTV отложить загрузку персонализированного динамического контента, не блокируя рендер общего для всех пользователей контента.
Быстрые производительные страницы и стриминг видео по запросу с Astro не стали проблемой. Даже со сложными иерархиями контента — несколько шоу, сезонов, ведущих, гостей и т.д. — навигация по CodeTV ощущается так же быстро, как переключение канала.
Расширяемость Astro означала, что добавление нужных интеграций для стриминговой платформы прошло гладко: Mux для видео, Clerk для аутентификации, Stripe для платежей, Sanity для CMS, Inngest для фоновых задач и деплой на Netlify. Всё хорошо сочеталось за счёт дополнения предрендеренных страниц server islands. Платежи по подписке, пользовательский dashboard, контент только для подписчиков… что бы они ни добавляли в Astro, «просто работало», говорит Lengstorf.
Я продолжаю добавлять новые возможности и каждый раз думаю: «Может, вот это меня остановит». Но пока пределов я не нашёл. И начинаю сомневаться, что они вообще существуют.
Гибкая поддержка UI-фреймворков в Astro ускорила миграцию за счёт повторного использования существующих React-компонентов на новом сайте. Перестраивать поиск по сайту не пришлось — Astro полностью совместим с React-кодом оригинального сайта Learn With Jason.
Результаты
Теперь большую часть времени Lengstorf тратит на контент — как и планировал изначально, — потому что поддержка сайта CodeTV почти не отвлекает. А когда нужно добавить новые функции, легко вернуться к коду на Astro. Ментальная модель и организация кода понятны, без борьбы с оптимизацией API-вызовов или задержками базы данных. Предрендер в Astro почти каждый раз оказывался решением, когда хотели улучшить производительность.
В итоге контентно насыщенный сайт ощущается динамичным и отзывчивым для зрителей и отлично показывает Core Web Vitals на desktop и mobile.
Изначальный план был «сначала заставить работать, потом ускорить». Но с Astro всё было быстрым сразу — как отметил Lengstorf: «Так устроена разработка на Astro». Как сложная контентная медиаплатформа со стримингом, несколькими интеграциями и автоматизированными workflow, CodeTV показала, что пределов у Astro, возможно, и нет.
Я подумал: «Посмотрим, как далеко можно зайти, прежде чем всё сломается». И так и не нашёл точки поломки.