> ## Content Index
> Fetch the complete content index at: https://www.rozhkov.me/llms.txt
> Use this file to discover other available public pages before exploring further.

# Архитектура современных веб-приложений на примере adopt.com.ua
- URL: https://www.rozhkov.me/modern-web-applications-architecture/
- Published: 2021-04-12T06:00:00.000Z
- Updated: 2021-04-12T16:50:28.000Z
- Author: Vova Rozhkov
- Tags: робота, інструменти, проєкти

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

Сайт сделан на [Ruby on Rails](https://rubyonrails.org/). Это веб-фреймворк который предоставляет всё, что нужно: слой доступа к базе данных, собственно веб, упаковщик статики, кеширование, бэкграунд джобы, письма и многое другое. Если бы я был питонистом то взял бы [Django](https://www.djangoproject.com/), если пыхером—[Laravel](https://laravel.com/).

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

Всё что вы видите, рисуется на сервере. JS почти не используется и сайт по идее даже может работать без него. JS нужен для отображения результатов поиска, галереи фоток, клиентской валидации форм и кроппера фоток в админке. У такого подхода есть большое количество преимуществ—изоморфность, быстрая отрисовка, нет проблем с SEO, сайт быстро работает везде, не нужно держать отдельного фронтенд-разработчика. Я не фанат современного фронтенда и считаю что если вы не делаете [Фигму](https://www.figma.com/), то все надо рисовать на сервере, оставляя клиенту минимум. Проект был написан до релиза [HotWire](https://hotwire.dev), поэтому тут больше JS, чем могло бы быть. Для работы с JS используется библиотека [Stimulus](https://stimulus.hotwire.dev/).

Верстка главной сделана на [Bulma](https://bulma.io). Сейчас я бы смотрел в сторону [TailwindCSS](https://tailwindcss.com/). Bulma тащит довольно много стилей и увеличивает размер конечного бандла.

Для админки я использую шаблон [AdminLTE](https://adminlte.io/).

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

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

Для этого используется стандарт в мире Ruby — [Sidekiq](https://sidekiq.org/). Ему нужен Redis, поэтому у меня есть еще и Redis.

Всё это хостится на [Heroku](https://www.heroku.com/home): 1 инстанс для веб-сервера, 1 инстанс для Sidekiq-воркера, 1 постгрес, 1 редис. Heroku предоставляет https для платных аккаунтов, тут не нужно дополнительно возиться с подъемом [certbot](https://certbot.eff.org/).

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

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