Где точно не будешь работать?

Где точно не будешь работать?

Frontend разработчик не работает с бэкенд-логикой, серверными технологиями и инфраструктурой, которые находятся вне браузера и вне контроля клиента. Вот что ТОЧНО выходит за границы работы фронтенда.

Что НЕ делает frontend разработчик

1. Управление сервером и базой данных

• Разворачивание серверов (Linux, Docker, Kubernetes)
• Конфигурация базы данных (PostgreSQL, MongoDB)
• Оптимизация SQL запросов
• Резервное копирование и восстановление данных
• Система логирования на сервере

Frontend не может: Фронтенд не имеет доступа к серверу и не может напрямую взаимодействовать с БД. Это делает backend.

// НЕПРАВИЛЬНО: backend-код, не frontend
const users = db.query("SELECT * FROM users");

2. Аутентификация на сервере

• Хеширование паролей (bcrypt, argon2) — делает backend
• Проверка учётных данных в БД
• Генерация JWT/session токенов
• Управление правами доступа на сервере

Frontend может: Только передать данные на сервер и получить токен. Проверка — серверная ответственность.

// Фронтенд может только отправить
async function login(email, password) {
  const response = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ email, password })
  });
  // Сервер проверит и вернёт токен
  const { token } = await response.json();
  localStorage.setItem('token', token);
}

3. Валидация на клиенте vs сервере

• Frontend: UX-валидация (формат email, длина пароля)
• Backend: Бизнес-валидация (уникальность email, разрешение операции)

Frontend разработчик НЕ может полагаться на клиентскую валидацию как на единственную защиту. Хакер может обойти любую клиентскую проверку.

// Frontend: быстрая UX проверка
function validateEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

// Backend ОБЯЗАТЕЛЬНО: перепроверит в базе
const userExists = await User.findOne({ email });
if (userExists) throw new Error('Email уже зарегистрирован');

4. Обработка платежей и приватных ключей

• PCI DSS соответствие (secure payments)
• Обработка credit card данных
• Хранение API ключей и secrets
• Криптографические операции с приватными ключами

Frontend разработчик НЕ должен: Никогда не хранить карточные данные или API ключи в браузере!

// ОПАСНО: никогда так не делай!
const apiKey = 'sk-abcd1234'; // Не хранить в коде!
const creditCard = '4111-1111-1111-1111'; // Не в браузере!

// ПРАВИЛЬНО: только на сервере
async function chargeCard(token) {
  // token из безопасного платёжного сервиса (Stripe)
  const response = await fetch('/api/charge', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${serverToken}` },
    body: JSON.stringify({ token, amount: 9999 })
  });
}

5. Системное администрирование

• Управление сетью (firewall, VPN, DNS)
• Мониторинг серверов (Prometheus, Grafana)
• CI/CD pipeline (Jenkins, GitHub Actions)
• Система логирования и ошибок (ELK Stack)
• Документирование инфраструктуры (DevOps)

Frontend может знать: как использовать эти инструменты, но не администрирует их.

6. Тестирование backend логики

Frontend разработчик может писать интеграционные тесты API, но unit тесты backend логики (бизнес-правила, алгоритмы) — это не его зона.

// Frontend тест: проверяем интеграцию с API
test('POST /api/users создаёт пользователя', async () => {
  const response = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify({ email: 'test@example.com' })
  });
  expect(response.status).toBe(201);
});

// Это НЕ frontend работа: unit тест backend логики
// (пусть пишет backend разработчик)
test('validatePassword должна проверить длину пароля', () => {
  expect(validatePassword('short')).toBe(false);
});

Граница ответственности: Frontend vs Backend

Практический пример: регистрация пользователя

// === FRONTEND ===
async function handleRegister(formData) {
  // 1. UX валидация (быстрая обратная связь пользователю)
  const errors = {};
  if (formData.email.length === 0) errors.email = 'Email обязателен';
  if (formData.password.length < 6) errors.password = 'Минимум 6 символов';
  if (errors) return setErrors(errors);

  // 2. Отправляем на сервер
  const response = await fetch('/api/register', {
    method: 'POST',
    body: JSON.stringify(formData)
  });

  // 3. Получаем токен и сохраняем (но не храним пароль!)
  if (response.ok) {
    const { token } = await response.json();
    localStorage.setItem('token', token);
    navigate('/dashboard');
  }
}

// === BACKEND (Python, Node.js, etc.) ===
@app.post('/api/register')
async def register(data):
  # 1. Бизнес-валидация
  if await User.findOne(email=data.email):
    raise BadRequest('Email уже зарегистрирован')
  
  if not is_valid_email(data.email):
    raise BadRequest('Невалидный email')
  
  # 2. Хеширование пароля (НИКОГДА не на фронте!)
  hashed = bcrypt.hash(data.password, rounds=10)
  
  # 3. Сохранение в БД
  user = User(email=data.email, password_hash=hashed)
  db.session.add(user)
  
  # 4. Генерация токена
  token = create_jwt_token(user.id)
  
  return {'token': token}

Ключевые выводы

• Frontend: Интерфейс, UX, взаимодействие с пользователем
• Backend: Бизнес-логика, безопасность, данные
• Граница: API — это контракт между ними
• Не полагайся на клиент: Все критичные проверки на сервере
• Никаких секретов в браузере: API ключи, пароли, карточные данные

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