От компонентов до своего REST API в Docker: путь фронтенд-разработчика

Привет!
Это пост о том, как развивался мой стек — от UI-библиотек до собственного бэкенда на Node.js.

Коротко о позиции: Middle Frontend-разработчик (Vue.js / TypeScript), который сейчас плотно закапывается в Node.js и Fullstack.

---

Чем занимался последние 4 года

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

Стек в проекте: Vue 3, TypeScript, Pinia, Vue Router, Vite, SCSS, Vitest.

Что делали командой:

✈️ Основной продукт — система бронирования авиабилетов. Многошаговые формы, динамическая валидация, сложные цепочки запросов.

🎫 Постпродажка — личный кабинет клиента с обменом и возвратом билетов, докупкой дополнительных услуг (багаж, страховка, выбор мест).

⭐ Программа поощрения — лояльность для постоянных клиентов, начисление и списание бонусов.

Как распределялись роли:

• UI-часть. Кто-то занимался компонентной базой: календари с выбором дат туда-обратно, автокомплиты аэропортов, таблицы с вариантами перелетов, модалки для возврата. Важно было заложить поддержку доступности (a11y) с самого начала — ARIA, полная навигация с клавиатуры, работа скринридеров.

• Архитектура и состояние. Постепенно пришло понимание, как проектировать сторы на Pinia, чтобы они не превращались в кашу. Модели данных, управление сложными состояниями, динамическая валидация — это то, с чем приходилось работать постоянно.

• Интеграции. Бэкенд на Bitrix (PHP) — история про интерсепторы, глобальную обработку ошибок, ретраи запросов и синхронизацию данных между SPA и CMS.

Что в итоге получилось сделать командой:

✅ Модульная архитектура. Система спроектирована так, что новые фичи (например, страховки или программа лояльности) подключались как изолированные плагины — без конфликтов с ядром бронирования и друг с другом.

✅ UI-библиотека для нескольких проектов. Типобезопасные компоненты на Vue 3 + TypeScript разъехались по смежным проектам компании. Разработка типовых экранов ускорилась примерно на 30%.

✅ Оптимизация без фанатизма. Система кэширования запросов на уровне Pinia срезала повторные вызовы API на 40%. Виртуализация списков перелетов, ленивая загрузка маршрутов — это уже база.

---

Личный Research & Development

Последнее время захотелось копнуть глубже. Фронтенд — круто, но понимание всей вертикали продукта дает совсем другую насмотренность.

Что сделано в рамках личной практики:

📦 Развернул свой REST API на Node.js
Взял Express, поднял в облаке, упаковал в Docker. Простая история, но именно она дает понимание, как живут бэкенд-приложения вне браузера: порты, контейнеризация, окружения, логи.

🛢 Отдельная PostgreSQL с умным кэшированием
Завел отдельную БД в том же облаке. Но просто подключить драйвер — скучно. Написал свой слой работы с базой, где:

• кэшируются часто повторяющиеся запросы;
• инвалидация кэша происходит по уму;
• можно посмотреть, что реально летит в БД, а что отдается из памяти.

Полезно хотя бы для того, чтобы на собеседованиях не отвевать "ну, там бэкендеры это делают", а понимать механику.

📚 Плотно изучаю Nuxt
Vue классный, но SSR открывает дорогу в проекты, где важен SEO и скорость первого экрана. Сейчас разбираюсь с Nuxt-модулями, серверными роутами и гидратацией.

---

Что в сухом остатке

Если по-человечески, то могу:

✅ Помочь с архитектурой фронтенда. Чтобы через год проект не хотелось переписать с нуля, а новые фичи залетали без боли.

✅ Сделать UI-систему, которой будет удобно пользоваться. Компоненты, доступность, производительность — это не просто слова из вакансии.

✅ Понимать бэкенд. Не просто дергать API, а видеть картину целиком. Могу и на Node.js набросать прототип, и с БД помочь советом, и с бэкенд-командой говорить на одном языке.

✅ Разобраться с легаси. Чужой код не пугает. Рефакторинг, оптимизация, поддержка зоопарка из фич — проходили.

---

Открыт к интересным предложениям и диалогам. Буду рад пообщаться!