Frontend Development

Типы задач

Ручные (от бизнеса/команды)

Автоматические

Workflow по типу задачи

feature — Новый функционал

Входные данные:

• API готов и задокументирован
• Макеты в Figma

Git commit: feat(module): description

change — Изменение существующего функционала

Входные данные:

• Описание новых бизнес-требований
• Макеты (если UI меняется)
• API документация (если API меняется)

Примеры:

• Изменение логики расчёта скидок
• Добавление поля в существующую форму
• Изменение flow оформления

Git commit: change(module): description

bug — Исправление ошибки

Входные данные:

• Шаги воспроизведения
• Ожидаемое поведение
• Фактическое поведение
• Скриншоты/видео (если есть)

Git commit: fix(module): description

improvement — Глобальное улучшение

Примеры:

• Внедрение аналитики
• Портирование на натив
• Портирование в mini-app
• Рефакторинг архитектуры

Git commit: refactor(scope): description или chore(scope): description

deps — Обновление зависимостей

Процесс:

1. Проверить changelog на breaking changes
2. Обновить в dev-ветке
3. Протестировать критичный функционал
4. Merge

Git commit: chore(deps): update package-name to version

security — Аудит безопасности

Процесс:

1. npm audit / Snyk report
2. Оценить severity
3. Обновить уязвимые пакеты
4. Если нет фикса — задокументировать и отслеживать

Git commit: fix(security): patch vulnerability in package-name

Этапы разработки (общие)

1. Анализ задачи

Входные данные

• Описание задачи с типом (feature, bug, improvement, deps, security)
• Макеты (Figma) — для feature
• Инструкция воспроизведения — для bug
• API документация

Действия

1. Прочитать описание задачи
2. Определить тип задачи
3. Изучить макеты (если feature)
4. Определить затрагиваемые компоненты
5. Уточнить edge cases

2. Поиск готового решения

Перед написанием кода проверь:

Приоритет решений

Чек-лист

• Есть ли в shared-модулях?
• Есть ли в Nuxt UI?
• Есть ли в Nuxt Charts?
• Есть ли Nuxt Module?

3. Реализация

Структура работы

1. Создать/обновить типы (types/)
2. Создать/обновить composable (composables/)
3. Создать/обновить компоненты (components/)
4. Создать/обновить страницу (pages/)

Правила кода

• standard-auto-imports — удалять лишние импорты
• standard-component-naming — именование компонентов
• standard-composables — бизнес-логика в composables
• Использовать Nuxt UI компоненты
• Использовать TypeScript

Git commits (по типу задачи)

# feature
feat(orders): add order filters component

# change
change(orders): update discount calculation logic

# bug
fix(auth): handle token refresh error

# improvement
refactor(users): extract validation to composable
chore(analytics): integrate posthog

# deps
chore(deps): update nuxt to 4.1.0

# security
fix(security): patch lodash vulnerability

4. Тестирование

Manual testing

• Функционал работает по макету
• Responsive (mobile/tablet/desktop)
• Edge cases обработаны
• Нет консольных ошибок
• Loading states
• Error states

5. Code Review

Перед MR

• Нет лишних импортов (auto-imports)
• Бизнес-логика в composables
• Используется Nuxt UI
• Types актуальны
• Нет console.log

MR Description

## Тип задачи
<!-- feature | change | bug | improvement | deps | security -->

## Что сделано
- Добавлен компонент фильтров
- Обновлена страница списка

## Скриншоты
[скриншоты UI]

## Тестирование
- [ ] Desktop
- [ ] Mobile

6. Merge

Критерии

• Code review пройден
• CI/CD прошёл
• Нет конфликтов

Связанные документы

• standard-project-structure
• standard-component-naming
• standard-composables
• process-code-review