В чем разница между Backend и Frontend разработкой?

Frontend (клиентская часть) и Backend (серверная часть) — два основных слоя веб-приложения, разделяющие ответственность за представление данных и бизнес-логику.

Frontend (клиент):

• Выполняется в браузере пользователя
• Технологии: HTML, CSS, JavaScript (React, Vue, Angular)
• Ответственность:
  • Пользовательский интерфейс (UI) и опыт (UX)
  • Валидация ввода на стороне клиента
  • Адаптивная верстка для разных устройств
  • Взаимодействие с DOM

Backend (сервер):

• Выполняется на сервере
• Технологии: Node.js, Python (Django/Flask), Java (Spring), PHP, Ruby on Rails
• Ответственность:
  • Бизнес-логика и обработка данных
  • Работа с базами данных (SQL/NoSQL)
  • Аутентификация и авторизация
  • API endpoints для фронтенда
  • Безопасность и валидация данных

Пример взаимодействия (авторизация пользователя):

1. Frontend (React):

// Компонент формы входа
function LoginForm() {
  const [credentials, setCredentials] = useState({email: '', password: ''});

  const handleSubmit = async (e) => {
    e.preventDefault();

    // Отправка запроса на бэкенд
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(credentials),
      credentials: 'include'  // Для cookies/sessions
    });

    if (response.ok) {
      // Перенаправление на защищенную страницу
      window.location.href = '/dashboard';
    } else {
      // Показать ошибку пользователю
      alert('Неверные учетные данные');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" onChange={e => setCredentials({...credentials, email: e.target.value})} />
      <input type="password" onChange={e => setCredentials({...credentials, password: e.target.value})} />
      <button type="submit">Войти</button>
    </form>
  );
}

2. Backend (Node.js + Express):

const express = require('express');
const app = express();
app.use(express.json());

// Endpoint для авторизации
app.post('/api/login', async (req, res) => {
  const { email, password } = req.body;

  // 1. Валидация входных данных
  if (!email || !password) {
    return res.status(400).json({ error: 'Email и пароль обязательны' });
  }

  // 2. Проверка в базе данных
  const user = await db.users.findOne({ email });
  if (!user) {
    return res.status(401).json({ error: 'Пользователь не найден' });
  }

  // 3. Проверка пароля (хешированного)
  const isValidPassword = await bcrypt.compare(password, user.passwordHash);
  if (!isValidPassword) {
    return res.status(401).json({ error: 'Неверный пароль' });
  }

  // 4. Создание сессии/JWT токена
  const token = jwt.sign(
    { userId: user.id, email: user.email },
    process.env.JWT_SECRET,
    { expiresIn: '24h' }
  );

  // 5. Отправка успешного ответа
  res.json({ 
    success: true, 
    token,
    user: { id: user.id, name: user.name, email: user.email }
  });
});

app.listen(3000, () => console.log('Backend запущен на порту 3000'));

Full-stack разработчики работают с обеими частями, но в крупных проектах обычно есть разделение на фронтенд и бэкенд команды.