Frontend-разработчик

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

Ключевые задачи и достижения:

1. Проектирование систем видеоаналитики и управления:

- Разработал интерфейс настройки и управления 40+ типами интеллектуальных
детекторов (включая распознавание лиц, номеров авто/вагонов, детекторов
огня/дыма, СИЗ, контроля опасных зон и нейросетевых детекторов).
- Реализовал логику настройки каналов и серверов, обеспечив гибкое
конфигурирование параметров видеоаналитики в реальном времени.

2. Архитектура микрофронтендов и кросс-фреймворк интеграция:

- Спроектировал архитектуру встраивания обособленного React/Electron модуля
(конфигуратора) внутрь основного десктоп-клиента на Vue 3.
- Разработал унифицированный интерфейс взаимодействия (IPC Contract /
ContextBridge) между хост-приложением и модулем, абстрагировав логику
авторизации и сетевые зависимости.
- Настроил синхронизацию распределенного состояния между Pinia (Vue) и MobX
(React) через шину событий IPC и BroadcastChannel.

3. Оптимизация производительности и многопоточность:

- Внедрил отказоустойчивую мультиоконную архитектуру на базе SharedWorker с
алгоритмом Leader Election (выбор Master-окна), что позволило
централизовать подписки на данные и значительно снизить нагрузку
на CPU.
- Реализовал механизм прямого обмена данными между фоновыми процессами через
MessageChannel для передачи тяжелых видеокадров (Transferable objects),
минуя основной поток Renderer, что обеспечило стабильный FPS
интерфейса.
- Разработал асинхронный retry-механизм для встраивания видеопотока в DOM,
устранив race conditions при быстром переключении каналов.

4. Рефакторинг и миграция:

- Успешно перевел проект с устаревшего PHP-бэкенда на современный стек на базе
JS/TS Web SDK (@domination/netvideo-sdk), полностью устранив зависимость от
legacy-кода.
- Реализовал парсинг сложных XML-конфигураций видеосерверов с помощью
fast-xml-parser, нормализовав данные в типизированные фронтенд-модели.
- Написал адаптеры для обратной совместимости новых исключений SDK со старой
системой обработки ошибок (эмуляция AxiosError).

5. Сетевые протоколы и стабильность:

- Спроектировал сервисы подключения в Electron (Main/Renderer процессы) с
поддержкой TCP Sockets и WebSockets, внедрив автоматический контроль
утечек ресурсов и управление жизненным циклом соединений.

Технологический стек:

- Frameworks: Vue 3 (Pinia), React (MobX).
- Desktop: Electron (IPC, ContextBridge, Multi-window management).
- Storage & State: Pinia, MobX, SharedWorkers, BroadcastChannel.
- Video & Network: Web SDK (TCP/WS), MessageChannel, Transferable Objects,
fast-xml-parser.
- Languages: TypeScript, JavaScript.

Разрабатывал и поддерживал фронтенд-приложения на React.js в архитектуре монорепозитория, используя Nx.

Использовал @emotion/react и @emotion/styled для компонентной стилизации.

Работал с инструментами сборки Webpack и esbuild.

Применял Zustand для эффективного управления состоянием приложений.

Участвовал в разработке и поддержке различных модулей проекта, таких как global-registry, account-widget и tmik-catalog.

Писал модульные и интеграционные тесты с использованием Jest и Cypress.

Поддерживал высокий стандарт качества кода, используя Prettier и Eslint, настроенные через Git-хуки.

Проект FPC UI: Разрабатывал и поддерживал фронтенд-приложения в рамках проекта для Российских железных дорог (РЖД). Представляет собой монорепозиторий, созданный для помощи инспекторам в проведении проверок.

Функциональность: Основной задачей было создание системы, которая помогает инспекторам РЖД документировать и контролировать различные аспекты работы поездов. Это включало в себя инспекции поведения сотрудников (вежливость, не вежливость), качества поставляемой еды, обслуживания пассажиров, а также состояния вагонов и самих составов.

Стек технологий: Использовал React.js в архитектуре монорепозитория, применял Nx для управления проектом. Для стилизации использовал @emotion/react и @emotion/styled. Управление состоянием осуществлялось с помощью Zustand.

Качество кода и тестирование: Работал с инструментами сборки Webpack и esbuild, писал модульные и интеграционные тесты с использованием Jest и Cypress. Поддерживал высокие стандарты качества кода с помощью Eslint и Prettier, интегрированных через Git-хуки.

Работал над смарт тв и веб приложением Movix

Стек веб приложения: Next, Typescript, React, Redux Toolkit, SCSS, HTML, Docker
Стек смарт тв приложения: Mautilus Smart TV SDK, JavaScript, jQuery, HTML, CSS, Grid, Storybook
Так же работал над новым смарт тв приложением стек: Svelte, Typescript, HTML, SCSS

- Оптимизация работы приложения
- Исправление программных ошибок в приложении
- Доработка и отладка функционала приложения
- Написание юнит-тестов и e2e
- Обеспечение кроссплатформенности и повышение совместимости
с известными моделями ТВ
- Участие в накатах, обновление приложения
- Поддержка и разработка приложения в соответствии с задачами
по потребностям бизнеса
- Проведение code review y других разработчиков, создание тест ранов, в целом выполнение Definition of Done по задачам
- Разбор задач совместно с командой и Product Owner
- Рефакторинг legacy кода

Работал над смарт тв и веб приложением Movix

Стек веб приложения: Next, Typescript, React, Redux Toolkit, SCSS, HTML, Docker
Стек: Mautilus Smart TV SDK, JavaScript, jQuery, HTML, CSS, Grid, Storybook, Docker

- Оптимизация работы приложения
- Исправление программных ошибок в приложении
- Доработка и отладка функционала приложения
- Написание юнит-тестов и e2e
- Обеспечение кроссплатформенности и повышение совместимости
с известными моделями ТВ
- Участие в накатах, обновление приложения
- Поддержка и разработка приложения в соответствии с задачами
по потребностям бизнеса
- Проведение code review y других разработчиков, создание тест ранов, в целом выполнение Definition of Done по задачам
- Разбор задач совместно с командой и Product Owner
- Рефакторинг legacy кода