BFF быстрее на 20% и экономит 55% трафика! Реальный тест

# 🔥 BFF vs Direct — реальный бенчмарк на NestJS + Angular **BFF или Direct — что быстрее? Реальный бенчмарк с 4 микросервисами!** В этом видео мы на практике разбираем паттерн **BFF (Backend for Frontend)** и сравниваем два подхода к получению данных в микросервисной архитектуре: - 🚀 **BFF Mode** — фронтенд делает 1 запрос к BFF, BFF агрегирует данные из 4 микросервисов через gRPC - 🔗 **Direct Mode** — фронтенд делает 4 запроса напрямую к каждому микросервису через REST Мы построили полноценное приложение на **NestJS + Angular** с 4 микросервисами (User, Order, Notification, Product), запущенными в Docker, и замерили реальную производительность обоих подходов. --- ## 📊 Результаты бенчмарка | Характеристика | 🚀 BFF Mode | 🔗 Direct Mode | |----------------|-------------|----------------| | Запросов с фронта | **1** | 4 | | Время загрузки | **28 мс** | 35 мс | | Размер данных | **102.8 КБ** | 229.88 КБ | | Сложность фронта | **Низкая** | Высокая | **BFF быстрее на 20% и экономит 55% трафика!** --- ## 📌 Тайм-коды - `0:00` – Интро - `1:30` – Проблема без BFF (запросный водопад) - `3:30` – Что такое BFF и зачем он нужен - `5:30` – Архитектура проекта (4 микросервиса + BFF + Angular) - `7:30` – Код микросервисов (NestJS + gRPC) - `10:00` – Код BFF (агрегация данных через gRPC) - `13:00` – Код фронтенда (Angular + переключатель режимов) - `15:30` – Демонстрация и реальные цифры - `20:00` – Сводная таблица и выводы - `22:00` – Когда использовать BFF? - `23:30` – Заключение и ссылки --- ## 🔗 Полезные ссылки - 📂 **Исходный код проекта:** [https://github.com/bizyukov/bff-nest-js](https://github.com/bizyukov/bff-nest-js) - 💬 **Telegram-канал SkillUp:** [https://t.me/skillup_code](https://t.me/skillup_code) — обсуждение кода, ранний доступ к новым видео, ответы на вопросы --- ## 🛠️ Стек технологий в проекте - **Backend:** NestJS, gRPC, TypeScript - **Frontend:** Angular 19, TypeScript - **Микросервисы:** User Service, Order Service, Notification Service, Product Service (все на NestJS + gRPC) - **Инфраструктура:** Docker, Docker Compose - **Протоколы:** gRPC (внутреннее общение), REST (для Direct Mode) --- ## 🎯 Ключевые выводы из видео 1. **BFF упрощает фронтенд** — один запрос вместо четырёх 2. **BFF экономит трафик** — до 55% в нашем эксперименте 3. **BFF быстрее** — за счёт агрегации внутри Docker-сети через gRPC 4. **BFF — это не API Gateway** — это слой для конкретного UI, принадлежащий фронтенд-команде 5. **BFF окупается** при наличии нескольких клиентов (web, mobile) и 4+ микросервисов --- ## 📢 Подпишись на SkillUp! - 🔔 Новые видео про архитектуру, микросервисы и Full Stack разработку - 💻 Разборы реальных проектов и бенчмарков - 📚 Полезные материалы и код в каждом видео **Подписывайся, чтобы не пропустить следующее видео про аутентификацию в микросервисах (JWT + BFF)!** --- ## 🏷️ Хештеги `#BFF` `#BackendForFrontend` `#NestJS` `#Angular` `#gRPC` `#микросервисы` `#бенчмарк` `#skillup` `#typescript` `#docker` `#архитектура` --- ## 📝 Примечание Исходный код полностью открыт и доступен в репозитории. Вы можете скачать, запустить проект через Docker Compose и повторить эксперимент на своей машине. Все инструкции по запуску — в README.md репозитория.