- Заказчик
- The Village — это городская интернет-газета, которая принадлежит бренду Redefine. Она рассказывает о важных событиях дня, культуре и развлечениях в Москве и Санкт-Петербурге.
- Задача
- Для обновления The Village искали команду, которая поможет разработать новый универсальный бэкенд на Ruby. Работа предстояла большая, а времени на детальную проработку ТЗ не было.
Редакция старается делать 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 отправляет её оригинал на специальный сервер, где она обрезается в нужный формат и получает правильный размер.
Чтобы не делать это много раз, картинка кэшируется. Так картинки для любого устройства и экрана получаются почти мгновенно. Если нам потребуются специальные размеры, мы просто пропишем нужные параметры на сервере и они добавятся в материалы сами.
Тестируем новый функционал
От нас на проекте также работали два QA-инженера, задача которых состояла в организации процесса тестирования с нуля. Поскольку фактически вся система была переписана, требовалось обеспечить полное покрытие тестами всех её частей.
В целом, наша QA-команда реализовала следующие задачи:
- подбор девайсов (телефоны и планшеты на iOS, Android) для тестирования проекта;
- написание и согласование Workflow по работе QA;
- формирование и поддержка тест-кейсов в TestRail;
- создание Acceptance criteria для серии задач;
- регулярное обучение QA и апдейты QA-процессов по мере расширения проекта.
Особенностью дизайна стало обилие динамических визуальных эффектов: каруселей с картинками, бегущих строк, всплывающего текста. Это усложняет работу и дизайнеров, и разработчиков, поскольку все движущиеся части макета нужно синхронизировать, не нарушив верстку страницы. Тестирование анимированных интерфейсов требует особенных навыков, поскольку такой контент в современных проектах используется редко в силу специфики журнала и из-за сложности в реализации. Наши специалисты разработали для проекта собственные тесты, которые помогли команде поддержки контролировать качество анимации.
Какие результаты получились?
Перезапуск The Village состоялся, на новой версии уже работают все российские редакции. На очереди — франшизы в других странах. Автоматизация миграции контента сэкономила время и силы. Настройка многоуровневого кэширования помогла добиться хорошей скорости загрузки.
В итоге получилось достаточно универсальное ядро. Этого удалось добиться за счёт встроенных возможностей последних версий Rails — была сделана гибкая система разделения модулей и расширения логики. Любая новая фича добавляется сразу в ядро, а если она нужна на другом проекте или франшизном сайте, то она просто включается на бэке, и остаётся только нарисовать кусочек интерфейса. Например, во время разработки так были подключены пользовательские закладки, а уже после — RSS.
Наша работа поможет редакции сконцентрироваться на качестве контента, что конвертируется в удержание пользователя. Бесконечный скролл и система рекомендаций помогают донести ценный материал до подходящей аудитории. Это увеличивает глубину просмотра и время на сайте, делает пользовательский опыт безбарьерным.
Результат
Конечно, любые результаты в виде метрик здесь будут видны в долгосрочной перспективе. Базово мы выполнили все технические задачи в нужный срок. Коммерческий отдел получил то, что хотел — сайт в лучшую сторону отличается от старого по рекламным возможностям. Их стало больше, мы упростили работу со многими форматами. А читатели получили классный, быстрый и красивый сайт.