Что такое фронтенд-архитектура
Free PreviewЕсли мы возьмём уже знакомое определение архитектуры программного обеспечения —
набор значимых решений о том, как организована система для достижения качественных характеристик,
— то мы можем адаптировать его для фронтенда.
Фронтенд-архитектура — это набор значимых решений о том,
как мы организуем клиентскую часть приложения,
чтобы обеспечить требуемые качественные характеристики и свойства системы.
Если хочется короткую версию, можно вспомнить шутливую формулировку Ральфа Джонсона:
Фронтенд-архитектура — это про важные вещи на фронтенде.
Какие именно — решать вам.
Где проходит граница фронтенда
Когда-то различие между фронтендом и бэкендом было предельно простым.
Ещё 10–15 лет назад всё, что выполнялось на клиенте, относилось к фронтенду, а всё, что работало на сервере, — к бэкенду.
Сегодня же границы стерлись.
Современные приложения выполняют код и на клиенте, и на сервере одновременно. Некоторые инструменты и фреймворки вообще размывают грань между слоями — например, Next.js или Nuxt. А React Server Components и вовсе выходят за привычные рамки.
Поэтому теперь корректнее думать о фронтенде и бэкенде как о спектре, а не как о двух противоположных концах.
Спектр фронтенда и бэкенда
На одном конце спектра — классический фронтенд:
- HTML и CSS,
- клиентский JavaScript,
- работа с DOM.
На другом — мир бэкенда:
- базы данных,
- REST или GraphQL API,
- контейнеризация, оркестрация (например, Kubernetes).
А посередине — всё, что объединяет оба мира:
- SSR/SSG фреймворки (Next.js, Nuxt, Remix),
- React Server Components,
- BFF (Backend for Frontend) слои.
Именно в этой средней области спектра и лежит зона нашего курса. Мы не будем углубляться в чисто визуальные темы вроде CSS, но и не будем обсуждать базы данных или инфраструктуру.
Наш фокус — архитектура клиент-серверного фронтенда, то есть то, как устроен современный слой представления и взаимодействия в сложных веб-приложениях.
Четыре измерения архитектуры фронтенда
Мы можем рассматривать фронтенд-архитектуру через те же четыре измерения, что и архитектуру ПО в целом:
- Архитектурный стиль
- Качественные характеристики
- Архитектурные решения
- Логические компоненты
Давайте посмотрим, как эти измерения проявляются на примере двух разных архитектур.
Пример 1. Микрофронтенды
Стиль: Микро-фронтенды — архитектурный подход, при котором разные команды разрабатывают и деплоят независимые части интерфейса.
Качественные характеристики:
- Масштабируемость
- Независимая поставка (deployability)
- Поддерживаемость
Обычно такая архитектура встречается в крупных компаниях с десятками или сотнями фронтенд-разработчиков. Главная цель — чтобы каждая команда могла разрабатывать и релизить свои части приложения независимо, без конфликтов и ожидания других.
Архитектурные решения:
- Общий глобальный стейт передаётся через сигналы или event bus.
- Микрофронтенды компонуются на клиенте (client-side composition).
Логические компоненты:
- Модули, коллекции, представления, шаблоны, классы — то есть более «традиционная» MVC-структура, где каждый микрофронтенд — отдельное приложение.
Пример 2. Монолитное приложение на React Server Components
Стиль: монолитное приложение с использованием React Server Components (RSC). Хотя это React, RSC — это фактически отдельная архитектурная модель, поэтому мы рассматриваем её как самостоятельный стиль.
Качественные характеристики:
- Производительность
- Гибкость разработки (agility)
- Надёжность
Такой подход подходит небольшим командам, которым важно быстро выпускать продукт и при этом обеспечивать высокую скорость и стабильность работы приложения.
Архитектурные решения:
- Хранение состояния в централизованном сторе.
- Мутации данных выполняются через серверные экшены.
Логические компоненты:
- Клиентские и серверные компоненты,
- хуки,
- сервисы и вспомогательные функции.
Сравнение подходов
Эти два подхода могут быть применены к одному и тому же приложению — например, к онлайн-платформе заказов еды. Для пользователя оба варианта могут выглядеть абсолютно одинаково — тот же интерфейс, те же функции.
Но под капотом они совершенно разные:
- различаются способы коммуникации между модулями,
- структура проекта,
- стратегия деплоя,
- способы хранения состояния.
Как выбирают архитектуру фронтенда
Количество возможных комбинаций архитектурных стилей, характеристик и решений практически бесконечно. Именно поэтому выбор архитектуры — это и есть основная работа фронтенд-архитектора.
Он определяет:
- какие приоритеты качества важнее (скорость, надёжность, масштабируемость и т. д.);
- какой стиль архитектуры лучше соответствует продукту и команде;
- какие решения и ограничения позволят проекту оставаться устойчивым при росте и изменениях.
Все эти вопросы мы подробно разберём в следующих модулях курса.
Подытожим
- Фронтенд-архитектура — это набор решений о том, как организован фронтенд-слой системы.
- Граница между frontend и backend — это не линия, а спектр.
- Четыре измерения архитектуры одинаково применимы и к фронтенду.
- Примеры микрофронтендов и RSC показывают, насколько по-разному можно реализовать одну и ту же идею.
- Задача архитектора — выбирать и обосновывать решения, обеспечивающие нужные качества системы.