Архитектура современных веб-приложений на примере adopt.com.ua

Я разработчик сервиса по пристройству животных — https://www.adopt.com.ua/ Там вы можете найти себе друга—котика или собачку. Хотя сайт простой, я применяю те же подходы для разработки своих коммерческих проектов. Если бы у меня стояла задача делать стартап, то я всё делал бы так же. Расскажу о том, как всё устроено внутри.

Сайт сделан на Ruby on Rails. Это веб-фреймворк который предоставляет всё, что нужно: слой доступа к базе данных, собственно веб, упаковщик статики, кеширование, бэкграунд джобы, письма и многое другое. Если бы я был питонистом то взял бы Django, если пыхером—Laravel.

Приложение разделено на три логических части: пользовательская, админка и API. Пользовательскую вы видите когда заходите на сайт, админка нужна для модераторов которые публикуют объявления, API используется для синхронизации с внешней CMS.

Всё что вы видите, рисуется на сервере. JS почти не используется и сайт по идее даже может работать без него. JS нужен для отображения результатов поиска, галереи фоток, клиентской валидации форм и кроппера фоток в админке. У такого подхода есть большое количество преимуществ—изоморфность, быстрая отрисовка, нет проблем с SEO, сайт быстро работает везде, не нужно держать отдельного фронтенд-разработчика. Я не фанат современного фронтенда и считаю что если вы не делаете Фигму, то все надо рисовать на сервере, оставляя клиенту минимум. Проект был написан до релиза HotWire, поэтому тут больше JS, чем могло бы быть. Для работы с JS используется библиотека Stimulus.

Верстка главной сделана на Bulma. Сейчас я бы смотрел в сторону TailwindCSS. Bulma тащит довольно много стилей и увеличивает размер конечного бандла.

Для админки я использую шаблон AdminLTE.

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

Каждому проекту нужна обработка очередей и бэкграунд джобы. Это код, который выполняется в фоне чтобы не задерживать пользователя. У нас в фоне делаются следующие вещи: отравляются письма о регистрации, ресайзятся картинки, постятся обновления в телеграм-чат для админов.

Для этого используется стандарт в мире Ruby — Sidekiq. Ему нужен Redis, поэтому у меня есть еще и Redis.

Всё это хостится на Heroku: 1 инстанс для веб-сервера, 1 инстанс для Sidekiq-воркера, 1 постгрес, 1 редис. Heroku предоставляет https для платных аккаунтов, тут не нужно дополнительно возиться с подъемом certbot.

Сорцы проекта находятся на GitLab и он же используется для CI/CD. По коммиту в мастер бегут линтеры и статические анализаторы кода JS—ESLint и Ruby—Rubocop, а дальше всё деплоится одной строкой в Heroku. Тестов на этом проекте нет, потому что я фактически единственный разработчик. Rubocop проверяет не только форматирование кода, но еще следит за потенциальными багами, например неоптимальным использованием Rails.

В следующей части я расскажу о внешних сервисах, которые используются для рассылки писем, ресайза картинок, хостинга файлов и CMS.


Сподобалось? Долучайтеся до мого телеграм каналу: https://t.me/full_of_hatred