Фронтенд, архитектура и всё, что вокруг сборки

Frontend-инженер. Работаю с React , Next.js и TypeScript : клиентская архитектура, производительность, CI/CD и инструменты разработки. Здесь — проекты, опыт и разборы задач, с которыми пришлось разбираться.

Смотреть проекты Блог
ЧЕМ ЗАНИМАЮСЬ

Подход к работе

Посмотреть опыт работы

Не разделяю фронтенд на «верстку» и «логику» — для меня это одна система, от которой зависит, насколько быстро потом можно вносить изменения. Стараюсь держать кодовую базу стандартизированной , а сборку и локальную разработку — быстрыми .

Работаю как с классическими SPA/CSR-приложениями ( Vite , React ), так и с SSR на Next.js : слежу за производительностью, ускоряю CI/CD и, если нужно, переезжаю со старых решений на новые.

Отдельно слежу за границей фронтенда и бэкенда: контракты API, стейт-менеджмент, работа с сетевыми запросами.

ИНЖЕНЕРНЫЕ СТАНДАРТЫ

Принципы, на которых я строю архитектуру приложений

01
Modules

Модульность

Делю код на изолированные слои, чтобы импорты не превращались в кашу.

02
Type Safety

Безопасность типов

Включаю строгий режим TypeScript и не использую any, чтобы ловить ошибки на этапе компиляции, а не в проде.

03
State

Разделение стейта

Разделяю клиентский стейт и кэш сервера, минимизируя сетевую нагрузку и ререндеры.

04
Performance

Производительный UX

Создаю плавные интерфейсы с аппаратным ускорением для стабильных 60 FPS.

05
Automation

Автоматизация CI/CD

Автоматизирую проверку кода, сборку и деплой веб-приложений через GitHub Actions.

06
Clean Code

Чистота кодовой базы

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

Избранные проекты

Все проекты
Web-платформы

Миграция и разработка Frontend-платформы

Спроектировал и реализовал миграцию интерфейса корпоративного портала с PHP-плагинов на Next.js без остановки работы. Старый портал выключен, от него остался только API.

Next.jsApp RouterTypeScriptTanstack QueryTailwind CSSFeature-Sliced Design (FSD)TurboPack

Ключевые решения & Результаты:

  • — Спроектировал поэтапную миграцию с PHP на Next.js через редиректы Nginx и BFF-прокси: обе системы работали параллельно.
  • — Внедрил архитектуру Feature-Sliced Design (FSD) и CLI-скрипты для быстрой генерации слайсов.
  • — Виртуализировал тяжёлые списки (доска «Сегодня», табель) через TanStack Virtual и собрал проект на Turbopack.
  • — Организовал слой данных на TanStack Query и NextAuth: токен хранится в сессии и подставляется серверными прокси.
  • — Создал единый API-клиент и перевёл тесты с Jest на Vitest (42 тестовых файла).
Читать подробный кейс
Web-платформы

Разработка продуктовых модулей платформы

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

React FlowELK.jsQuill EditorWebSocketsTanStack VirtualYandex.Metrika

Ключевые решения & Результаты:

  • — Разработал оргструктуру на React Flow с движком ELK.js для автоматической раскладки связей.
  • — Интегрировал Quill Editor для регламентов с версионированием документов и процессом согласования.
  • — Создал табель рабочего времени с виртуализацией: в DOM только видимые строки, данные подгружаются порциями.
  • — Реализовал Kanban-доску с WebSocket-чатом, системными уведомлениями и вставкой файлов из буфера.
  • — Настроил светлую/темную тему и интеграцию с Яндекс.Метрикой для продуктовой аналитики.
Читать подробный кейс
Мобильная разработка

Рефакторинг и переход на Expo (React Native)

Модернизировал мобильное приложение, переведя его на Expo. Автоматизировал генерацию нативного кода и релизы в сторы, заменил Redux на Zustand + React Query.

React NativeExpo PrebuildExpo RouterTypeScriptReact Native Reanimatedexpo-notificationsAppMetrica

Ключевые решения & Результаты:

  • — Внедрил Expo Prebuild для декларативного управления нативной конфигурацией iOS/Android.
  • — Перевел проект на файловый роутинг Expo Router, сблизив архитектуру веба и mobile.
  • — Настроил автоматические релизы в TestFlight и Google Play через Fastlane и Semantic Release.
  • — Упростил онбординг: не нужны ручной pod install и настройка Gradle, нативные папки генерирует Expo Prebuild.
  • — Сократил кодовую базу на 16 810 строк (аудит Knip), UI-кит ужат с 64 до 22 компонентов.
  • — Развил ядро приложения: чат задач на WebSockets, push-уведомления, AppMetrica и обработка deep links.
Читать подробный кейс

Последние записи

Все записи