Как работают web приложения

Как работают веб-приложения: архитектура и взаимодействие компонентов

Веб-приложение — это клиент-серверное приложение, доступное через веб-браузер. Его работа основана на взаимодействии нескольких ключевых технологических слоёв и стандартных протоколов, главным из которых является HTTP/HTTPS. Рассмотрим процесс детально, разделив его на фазы.

1. Архитектурные компоненты веб-приложения

Любое современное веб-приложение, как правило, состоит из трёх основных частей:

• Клиентская часть (Frontend): Выполняется в браузере пользователя. Включает код на HTML (структура), CSS (оформление) и JavaScript (логика, интерактивность). Для сложных приложений используются фреймворки (React, Angular, Vue.js).
• Серверная часть (Backend): Выполняется на удалённом сервере. Принимает запросы от клиента, обрабатывает их, взаимодействует с базой данных и возвращает ответ. Пишется на языках вроде Python, Java, Node.js, PHP.
• База данных (Database): Хранилище для структурированных данных (пользователи, заказы, статьи). Популярны PostgreSQL, MySQL, MongoDB.

Для их взаимодействия используется архитектурный стиль REST (Representational State Transfer) или более современный GraphQL.

2. Цикл запроса-ответа (Request-Response Cycle)

Взаимодействие пользователя с приложением — это цикл запросов и ответов. Рассмотрим пример входа пользователя в систему.

Шаг 1: Пользовательское действие и формирование HTTP-запроса Пользователь вводит логин и пароль в форму на странице и нажимает "Войти". JavaScript на стороне клиента собирает данные и формирует HTTP POST-запрос. Важные части запроса:

• Метод: POST
• URL (Endpoint): https://api.example.com/login
• Заголовки (Headers): Content-Type: application/json, Authorization (для последующих запросов)
• Тело (Body): JSON-объект с данными.

{
  "username": "john_doe",
  "password": "secure_pass_123"
}

Шаг 2: Передача запроса через сеть Запрос отправляется через стек протоколов TCP/IP. Установив TCP-соединение, браузер отправляет запрос на сервер по адресу, указанному в URL. Если используется HTTPS (а так должно быть), то соединение шифруется с помощью SSL/TLS.

Шаг 3: Обработка на стороне сервера (Backend) Серверное приложение (например, на Node.js с Express.js) принимает запрос.

// Пример серверного кода (Express.js)
const express = require('express');
const app = express();
app.use(express.json()); // Middleware для разбора JSON

app.post('/login', async (req, res) => {
  const { username, password } = req.body;

  // 1. Валидация входных данных
  if (!username || !password) {
    return res.status(400).json({ error: 'Missing credentials' });
  }

  // 2. Взаимодействие с базой данных
  const user = await db.User.findOne({ where: { username } });

  // 3. Бизнес-логика: проверка пароля
  if (!user || !(await user.validPassword(password))) {
    return res.status(401).json({ error: 'Invalid credentials' });
  }

  // 4. Генерация токена для аутентификации
  const token = generateAuthToken(user.id);

  // 5. Формирование и отправка ответа
  res.status(200).json({ token, userId: user.id });
});

Шаг 4: Генерация и отправка HTTP-ответа Сервер формирует ответ, который включает:

• Статус-код: 200 OK (успех) или 4xx/5xx (ошибки клиента/сервера).
• Заголовки: Content-Type: application/json.
• Тело (Body): Чаще всего данные в формате JSON.

{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "userId": 42
}

Шаг 5: Обработка ответа на стороне клиента Браузер получает ответ, JavaScript-код (например, часть SPA - Single Page Application) обрабатывает его:

// Пример на клиенте с использованием fetch API
async function loginUser(credentials) {
  const response = await fetch('https://api.example.com/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(credentials)
  });

  if (response.ok) {
    const data = await response.json();
    localStorage.setItem('authToken', data.token); // Сохраняем токен
    window.location.href = '/dashboard'; // Перенаправляем пользователя
  } else {
    const error = await response.json();
    showErrorNotification(error.message); // Показываем ошибку
  }
}

3. Ключевые аспекты для тестирования (QA Perspective)

Понимание этого цикла критически важно для QA-инженера, так как определяет точки приложения для проверки:

• Тестирование API: Проверка всех endpoints на корректность принимаемых/возвращаемых данных, кодов состояния, валидации.
• Тестирование граничных значений и валидации: Как сервер обрабатывает пустые, неверные, огромные или вредоносные данные в запросе.
• Интеграционное тестирование: Проверка корректности взаимодействия Frontend -> Backend -> Database.
• Тестирование безопасности: Защита от SQL-инъекций, XSS (Cross-Site Scripting), правильная обработка авторизации через JWT-токены, использование HTTPS.
• Тестирование производительности: Время отклика сервера на запросы, нагрузка на базу данных, кэширование статики и динамических ответов (Cache-Control headers).

Таким образом, работа веб-приложения — это непрерывный, структурированный диалог между клиентом и сервером через прозрачные, но строго определённые интерфейсы (API). Роль QA-специалиста заключается в том, чтобы обеспечить безупречное ведение этого диалога при любых сценариях использования, данных и нагрузке.