Кейс •

Публикуйте контент быстрее
Как Firebase сократил время публикации в блоге с часов до минут с Astro

Автор
Astro Team

Firebase — платформа для разработки мобильных и веб-приложений. Она позволяет пользователям легко создавать прототипы и масштабировать приложения, не заботясь об отдельных backend-сервисах. С поддержкой Google Firebase доверяют миллионы компаний, которые хотят абстрагироваться от backend- инфраструктуры и сосредоточиться на ключевых аспектах повседневного бизнеса.

Доступный блог важен для Firebase, чтобы пользователи могли быть в курсе последних новостей и анонсов. Astro помогла Firebase перестроить блог: производительность выросла на 71%, а время публикации сократилось с часов до минут.

Показатели Lighthouse для блога Firebase.

Проблемы

Команда Firebase из 10 разработчиков раньше размещала блог на Blogger. В этой CMS сначала нужно было написать пост в Google Docs, а затем преобразовать черновик в документ Blogger. Даже короткий пост легко мог занять около часа работы до публикации.

Редактирование в Blogger тоже создавало проблемы:

  1. Для изображений и других интерактивных компонентов разработчикам приходилось вручную писать HTML.
  2. В Blogger не было изображений профиля. Чтобы показать аватар, нужно было вставлять HTML и CSS прямо в пост.
  3. Иногда нельзя было исправить проблему, даже если ты точно знал, в чём дело! Например, улучшить доступность в Blogger было сложно. В итоге пользователи получали посредственный опыт.

Требования

По словам David East, ведущего инженера команды блога Firebase, им нужен был инструмент с современным developer experience. Они хотели поддерживать более производительный блог и публиковать материалы быстрее и с меньшими трениями в коллаборативной команде из 10 человек.

Частичная гидратация.

Решение и внедрение

С Astro новые участники команды могут настроить окружение за 30 минут — во многом благодаря документации.

Документация была феноменальной. Особенно помогло то, что Astro очень хорошо опирается на соглашения. Когда ты используешь его для задачи, для которой он предназначен, всё предельно ясно. Ты никогда не боишься, что стул выдернут из-под тебя. На этих допущениях всегда можно опираться при разработке.

— David East, Lead Engineer @ Firebase (Blog)

Разработчики Firebase также смогли реализовать сложные и доступные анимации с Astro — то, что было невозможно в Blogger из-за ограниченных шаблонов. Например, команде нужна была slice-анимация с главной страницы блога Firebase. Однако такую анимацию крайне сложно сделать в вебе сегодня. Приходится накладывать идентичные фрагменты контента друг на друга и убирать отдельные секции при анимации, словно занавес. Screen reader пытается читать и переходить по скрытому контенту, что сбивает пользователей с толку. Firebase смогла сделать эту анимацию доступной благодаря гибкости Astro.

Многослойная жёлтая slice-анимация.

Часть миграции, связанная с Astro, прошла быстро. Улучшения появились уже тогда, когда они смогли взять контент из Google Doc, конвертировать его в Markdown с помощью плагина и вставить в документ Astro. Большую часть времени проекта на самом деле ушло на доводку дизайна блога и создание proof-of-concept.

Результаты

После перехода с Blogger на Astro время публикации стандартного поста сократилось с часов до минут. Раньше полная сборка сайта через GitHub Actions занимала 6 минут. Теперь среднее время сборки — 1,5 минуты, то есть сокращение на 75%.

Backend-возможности Firebase.