Как видишь идеальный процесс разработки фичи?

Идеальный процесс разработки фичи в Frontend

Вот как я вижу идеальный процесс разработки фичи, от идеи до деплоя. Это комбинация best practices из опыта работы на больших проектах.

Фаза 1: Подготовка (1-2 дня)

1.1 Уточнение требований

Встреча: Product Manager, Designer, Tech Lead, Frontend Dev (я)

Вопросы, которые я бы задал:
1. Что нужно пользователю? (user story)
2. Когда это нужно? (deadline)
3. На каких устройствах работать? (mobile, tablet, desktop)
4. Какие браузеры поддерживать? (Chrome, Safari, Firefox, IE11?)
5. Есть ли дизайн-макеты? (Figma, Adobe XD)
6. Критичное ли это для бизнеса? (priority)
7. Есть ли A/B тест? (metrics)
8. Есть ли аналоги в коде? (что переиспользовать)

1.2 Дизайн ревью

Чек-лист дизайна:
- Все состояния компонента? (empty, loading, error, success)
- Hover/focus/active состояния?
- Темная тема поддерживается?
- Адаптивность работает? (mobile-first)
- Доступность (a11y)? (contrast, aria-labels)
- Консистентность с дизайн-системой?
- Анимации оптимальны? (не > 300ms)

1.3 Техническое планирование

Задачи, которые я определю:

1. Архитектура
   - Какие компоненты создать?
   - Какие API endpoints нужны?
   - Какие хуки/состояние?
   - Зависимости на другие фичи?

2. Сложность
   - Оценить story points
   - Выделить подзадачи
   - Риски и блокеры?

3. Тестирование
   - Какие тест-кейсы?
   - E2E тесты нужны?
   - Нужен ли QA?

4. Производительность
   - Какие метрики влияют? (LCP, FID, CLS)
   - Нужна ли оптимизация?

Фаза 2: Разработка (3-5 дней)

2.1 Структура ветки

# Создаю ветку от main
git checkout main
git pull origin main
git checkout -b feat/user-profile-card

# Имя: feature/bug-fix/refactor + описание
# Примеры:
# - feat/user-profile-card
# - fix/header-responsive-issue
# - refactor/api-client-types

2.2 Test-Driven Development (TDD)

Важно: Я пишу тесты ПЕРЕД кодом!

// Шаг 1: Пишу тест (RED)
// __tests__/UserCard.test.tsx
describe('UserCard', () => {
  it('должен отображать имя пользователя', () => {
    const { getByText } = render(
      <UserCard user={{ id: '1', name: 'Alice', email: 'alice@example.com' }} />
    );
    expect(getByText('Alice')).toBeInTheDocument();
  });

  it('должен показать loading при загрузке', () => {
    const { getByTestId } = render(<UserCard loading={true} />);
    expect(getByTestId('spinner')).toBeInTheDocument();
  });

  it('должен показать ошибку при ошибке загрузки', () => {
    const { getByText } = render(
      <UserCard error={new Error('Failed to load')} />
    );
    expect(getByText(/Failed to load/)).toBeInTheDocument();
  });
});

// Шаг 2: Пишу минимальный компонент (GREEN)
// components/UserCard.tsx
export interface UserCardProps {
  user?: { id: string; name: string; email: string };
  loading?: boolean;
  error?: Error;
}

export function UserCard({ user, loading, error }: UserCardProps) {
  if (loading) return <div data-testid="spinner">Loading...</div>;
  if (error) return <div>Failed to load: {error.message}</div>;
  return user ? (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  ) : null;
}

// Шаг 3: Рефакторю код, улучшаю стили (REFACTOR)
// Но тесты остаются зелёными!

2.3 Разработка компонента

// components/UserCard.tsx
import { memo } from 'react';
import { cn } from '@/lib/utils';

export interface UserCardProps {
  user?: {
    id: string;
    name: string;
    email: string;
    avatar?: string;
    role?: 'admin' | 'user';
  };
  loading?: boolean;
  error?: Error;
  onRetry?: () => void;
}

export const UserCard = memo(function UserCard({
  user,
  loading,
  error,
  onRetry
}: UserCardProps) {
  if (loading) {
    return (
      <div className="space-y-2">
        <div className="h-12 w-12 rounded-full bg-gray-200 animate-pulse" />
        <div className="h-4 w-32 bg-gray-200 animate-pulse" />
        <div className="h-3 w-40 bg-gray-200 animate-pulse" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="rounded-lg border border-red-200 bg-red-50 p-4">
        <p className="text-red-700">Failed to load user</p>
        {onRetry && (
          <button
            onClick={onRetry}
            className="mt-2 px-3 py-1 rounded bg-red-600 text-white text-sm hover:bg-red-700"
          >
            Retry
          </button>
        )}
      </div>
    );
  }

  if (!user) return null;

  return (
    <div className="rounded-lg border border-border-primary bg-surface-primary p-4 shadow-sm">
      <div className="flex gap-4">
        {user.avatar && (
          <img
            src={user.avatar}
            alt={user.name}
            className="h-12 w-12 rounded-full object-cover"
          />
        )}
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <h2 className="font-semibold text-content-primary">{user.name}</h2>
            {user.role === 'admin' && (
              <span className="rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700">
                Admin
              </span>
            )}
          </div>
          <p className="text-sm text-content-secondary">{user.email}</p>
        </div>
      </div>
    </div>
  );
});

2.4 Интеграция с API

// hooks/useUser.ts
import { useEffect, useState } from 'react';
import { api } from '@/lib/api';

export function useUser(userId: string) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const data = await api.get(`/users/${userId}`);
        setUser(data);
        setError(null);
      } catch (err) {
        setError(err instanceof Error ? err : new Error('Unknown error'));
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]);

  const retry = () => {
    fetchUser();
  };

  return { user, loading, error, retry };
}

// pages/user/[id].tsx
import { UserCard } from '@/components/UserCard';
import { useUser } from '@/hooks/useUser';

export default function UserPage({ params }: { params: { id: string } }) {
  const { user, loading, error, retry } = useUser(params.id);

  return (
    <div>
      <UserCard user={user} loading={loading} error={error} onRetry={retry} />
    </div>
  );
}

2.5 Стилизация

/* Используем переменные из дизайн-системы */
/* Из globals.css: @theme inline */

.user-card {
  border: 1px solid var(--border-border-primary);
  background-color: var(--bg-surface-primary);
  color: var(--text-content-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .user-card {
    padding: 12px; /* вместо 16px на desktop */
  }
}

2.6 Тестирование

# Unit тесты
npm test -- UserCard.test.tsx

# Проверяю coverage
npm run test:coverage
# Цель: >= 90%

# Lint
npm run lint
# Должны быть 0 ошибок

# Build
npm run build
# Не должны быть warnings

Фаза 3: Code Review (1 день)

3.1 Подготовка PR

# Title
feat: Add user profile card component

## Description
Имплементировал новый компонент UserCard для отображения профиля пользователя.

## Changes
- Создал компонент UserCard с поддержкой loading и error состояний
- Добавил хук useUser для загрузки данных
- Все состояния покрыты тестами (95% coverage)
- Адаптивен для мобильных устройств

## Testing
- Unit: npm test ✓
- Lint: npm run lint ✓
- Build: npm run build ✓
- Manual: Проверил на desktop, tablet, mobile

## Screenshots
[Normal state]
[Loading state]
[Error state]
[Mobile view]

## Performance Impact
- LCP: +0ms (компонент загружается вместе с другими)
- Bundle size: +2.5KB gzipped

## Checklist
- [x] Code follows style guide
- [x] Tests added/updated
- [x] Documentation updated
- [x] No console errors/warnings
- [x] Mobile responsive
- [x] Accessibility (a11y) verified

3.2 Во время review

Реверьер смотрит на:

1. Логика кода — правилен ли алгоритм?
2. Стиль и читаемость — понять код легко?
3. Тесты — все ли case'ы покрыты?
4. Производительность — нет ли утечек памяти?
5. Безопасность — нет ли уязвимостей?
6. Архитектура — соответствует ли дизайну?

Я отвечаю на комментарии:

• Объясню, почему так решил
• Исправлю, если соглашусь
• Предложу альтернативу, если есть разногласие

3.3 Approval и merge

# После approval от 2+ ревьеров
git checkout main
git pull origin main
git merge feat/user-profile-card --ff-only
# Или через GitHub: Squash and merge

Фаза 4: QA и тестирование (1-2 дня)

4.1 QA тестирование

QA инженер проверяет:

Test cases:
1. Desktop + Chrome
   - [ ] Normal state отображается правильно
   - [ ] Loading анимация работает
   - [ ] Error state показывает ошибку
   - [ ] Retry кнопка работает

2. Mobile + Safari
   - [ ] Компонент адаптирован
   - [ ] Touch жесты работают
   - [ ] Нет horizontal scroll

3. Accessibility
   - [ ] Screen reader прочитает всё
   - [ ] Keyboard navigation работает
   - [ ] Contrast >= 4.5:1

4. Performance
   - [ ] Компонент загружается < 2.5s (LCP)
   - [ ] Клик отвечает < 100ms (FID)

4.2 E2E тесты (Playwright)

// e2e/user-card.spec.ts
import { test, expect } from '@playwright/test';

test('UserCard component', async ({ page }) => {
  // Auth
  await page.post('/api/v1/dev/test-auth');
  
  // Navigate
  await page.goto('/user/123');
  
  // Check initial state
  const card = page.locator('[data-testid="user-card"]');
  await expect(card).toContainText('Alice');
  
  // Test error state
  await page.route('**/api/users/**', (route) =>
    route.abort('noconnection')
  );
  await page.reload();
  await expect(page.locator('text=Failed to load')).toBeVisible();
  
  // Test retry
  await page.route('**/api/users/**', (route) =>
    route.continue()
  );
  await page.click('button:has-text("Retry")');
  await expect(card).toContainText('Alice');
});

// Запуск
// npx playwright test

Фаза 5: Деплой (30 минут)

5.1 Deployment process

# Staging окружение
git push origin main
# Dokku автоматически деплоит
# Проверяю: https://staging.prepbro.ru

# Продакшен (через GitHub Actions или вручную)
# Пользователи видят фичу

5.2 Мониторинг

// Добавил мониторинг в продакшене

// Логирование ошибок
try {
  const user = await fetchUser(userId);
} catch (error) {
  logger.error('Failed to load user', { userId, error });
  // Отправляется в Sentry/LogRocket
}

// Метрики производительности
const start = performance.now();
const user = await fetchUser(userId);
const duration = performance.now() - start;
analytics.track('user_card_load_time', { duration });

Фаза 6: Post-launch (1 неделя)

6.1 Мониторинг

Проверяю каждый день:
- Нет ли ошибок в продакшене?
- Производительность в норме?
- Пользователи довольны? (feedback)
- Есть ли баги?

6.2 Документирование

# UserCard Component

## Usage
```jsx

import { UserCard } from '@/components/UserCard';

<UserCard
  user={{ id: '1', name: 'Alice', email: 'alice@example.com' }}
  loading={false}
  error={null}
  onRetry={() => {}}
/>

Props

• user (User): объект пользователя
• loading (boolean): показать loader
• error (Error): показать error
• onRetry (function): callback на retry

## Итоговый процесс

День 1: Подготовка (требования, дизайн) День 2: TDD + разработка компонента + API День 3: Тестирование + code review + исправление День 4: QA + E2E тесты День 5: Деплой + мониторинг Дни 6-7: Поддержка + документирование

Всё это гарантирует:

• Высокое качество кода
• Отсутствие багов
• Хорошую производительность
• Счастливых пользователей