Новый бэкенд на Ruby on Rails для медиа-портала

The Village — это городская интернет-газета, которая принадлежит бренду Redefine. Она рассказывает о важных событиях дня, культуре и развлечениях в Москве и Санкт-Петербурге. По франшизе работают редакции в других российских городах, в Республике Беларусь, Казахстане и на Украине.

Редакция старается делать The Village понятным и полезным для максимально широкой аудитории. Здесь интервью с чиновником будет опубликовано рядом с обзором нового ресторана и фотоотчётом с модного показа. Поэтому коммерческий отдел может привлекать для размещения рекламы самых разных клиентов.

К 2019 году у The Village уже были высокие требования к самим себе с точки зрения рекламных возможностей, а вот технически реализовывать их становилось сложнее и дороже.

Задача — полностью обновить сайт с учётом новых технологий и требований

Факты говорили о том, что сайт пора переделать. Над ним в разное время работали разные люди. Из-за этого накопился технический долг, в продукте появлялись части, созданные очень давно и требующие рефакторинга существующего кода. Кроме этого, мобильная версия сайта была адаптирована под маленькие экраны — на больших сайт выглядел плохо. Коммерческий отдел хотел новых рекламных возможностей и более удобного управления ими.

Для обновления The Village искали команду, которая поможет разработать новый универсальный бэкенд на Ruby. Работа предстояла большая, а времени на детальную проработку ТЗ не было, какие-то требования могли измениться в процессе, как часто бывает в медиа-проектах. Поэтому искали тех, кто готов к гибкому управлению.

Команда Evrone отлично подошла — у нас уже был подходящий опыт, мы работали над спецпроектами издания. The Village знали о нашей экспертизе, поддерживали наши мероприятия, технические специалисты Redefine выступали на них с докладами. Фронтендом же занялась собственная команда.

Новая платформа должна работать на актуальных технологиях, учитывать удачные решения прошлой версии, а также выполнять внутренние бизнес-задачи. Нужно сделать так, чтобы её можно было быстро обновлять и подключать разные функциональности в разных франшизах.
Коммерческий отдел при обновлении не должен пострадать — если мы обновляем список рекламных возможностей, то их должно стать больше. Читатели должны получить сайт, который загружается быстро и не падает при нагрузках.

Решение — бэкенд, который дружит с любым фронтендом и готов к высоким нагрузкам

Решением стал мощный и надёжный бэкенд для новостного сайта на Ruby on Rails, который учитывает текущий и будущий трафик на издание. Он может работать с любым фронтендом, а значит изменять внешний вид теперь можно без переделывания сайта целиком.

Команда Redefine разработала для него интерфейсы и фронтенд на React + Node.js. За серверный рендеринг страниц отвечает Next.js. Для создания и редактирования статей используется WYSIWYG-редактор Setka Editor.

Отказываемся от монолитной архитектуры

Раньше сайт представлял собой классическое монолитное приложение. Весь код исполнялся на сервере, а пользователь только видел результат его работы. Чтобы внести даже небольшие изменения, приходилось копаться в массиве кода. Теперь сервисы существуют отдельно: бэкенд, админка, API и фронтенд.

Бэкенд отдаёт данные по API, а отрисовка страницы реализована как SPA на React. Виртуальный браузер на стороне сервера рисует страницу и отправляет пользователю. Благодаря этому сам сайт загружается быстрее, переходы между материалами и разделами происходят легче. Вместо обновления страницы целиком мы передаём только данные, которые изменились.

Использование технологии Single Page Application для онлайн СМИ даёт больше возможностей для интерактивных взаимодействий с сайтом. Весь сайт становится единственной страницей,  поэтому легко можно сделать анимацию переходов между страницами, использовать интерактивные рекламные баннеры.

Улучшаем производительность сайта с помощью многоуровневого кэширования

Одна и та же статья может отображаться в разных местах: в общем разделе, в «сохранённом» у пользователей, на главной странице. В классическом подходе любое изменение этой статьи потребует сброса кэша сразу нескольких страниц. Это приведёт к повышению нагрузки, а ещё придётся постоянно следить, чтобы страница точно изменялась везде.

Совместно со специалистами Redefine мы реализовали схему многоуровневого агрессивного кэширования. Она обновляет только изменённые фрагменты и делает это автоматически и везде. Отдельно кэшируются страницы на сервере, API. Время жизни кэша при этом — пара минут.

Например, на главной отображаются превью статей. Если редакция что-то изменит в заголовке или загрузит другую картинку — нужный кусок мгновенно перерисуется.

Если бы кэш приходилось сбрасывать полностью для всего сайта, то страницы грузились бы дольше, серверу требовалось бы железо мощнее. Наш подход экономит место в памяти и уменьшает проблемы с обновлением контента. Это уменьшает нагрузку на сайт.

Миграция картинок

При переезде на новый бэкенд нужно было перенести весь материал со старого сайта. Чтобы сэкономить на инфраструктуре и не тратить силы на миграцию 10 терабайт картинок, мы автоматизировали ресайз изображений на сервере. А чтобы не нагружать хранилище дубликатами разных размеров, делаем это «на лету».

Вот как это работает: если пришёл запрос на картинку, сервис ImgProxy отправляет её оригинал на специальный сервер, где она обрезается в нужный формат и получает правильный размер.

Чтобы не делать это много раз, картинка кэшируется. Так картинки для любого устройства и экрана получаются почти мгновенно. Если нам потребуются специальные размеры, мы просто пропишем нужные параметры на сервере и они добавятся в материалы сами.

Какие результаты получились?

Перезапуск The Village состоялся, на новой версии уже работают все российские редакции. На очереди — франшизы в других странах. Автоматизация миграции контента сэкономила время и силы. Настройка многоуровневого кэширования помогла добиться хорошей скорости загрузки.

В итоге получилось достаточно универсальное ядро. Этого удалось добиться за счёт встроенных возможностей последних версий Rails — была сделана гибкая система разделения модулей и расширения логики. Любая новая фича добавляется сразу в ядро, а если она нужна на другом проекте или франшизном сайте, то она просто включается на бэке, и остаётся только нарисовать кусочек интерфейса. Например, во время разработки так были подключены пользовательские закладки, а уже после — RSS.

Наша работа поможет редакции сконцентрироваться на качестве контента, что конвертируется в удержание пользователя. Бесконечный скролл и система рекомендаций помогают донести ценный материал до подходящей аудитории. Это увеличивает глубину просмотра и время на сайте, делает пользовательский опыт безбарьерным.

Конечно, любые результаты в виде метрик здесь будут видны в долгосрочной перспективе. Базово мы выполнили все технические задачи в нужный срок. Коммерческий отдел получил то, что хотел — сайт в лучшую сторону отличается от старого по рекламным возможностям. Их стало больше, мы упростили работу со многими форматами. А читатели получили классный, быстрый и красивый сайт.