Веб-программа: что это такое, как работает и чем отличается от сайта

Веб-программа (веб-приложение, веб-ПО) — это программа, с которой пользователь работает через браузер: интерфейс загружается с сервера по сети, а данные и основная логика обычно живут на сервере. Устанавливать ничего не нужно, кроме браузера, а обновление выкатывается один раз на сервере и доходит до пользователя при следующей загрузке страницы.

Слово «обычно» здесь важно: бывают веб-приложения, которые почти всю работу делают в браузере и даже открываются без сети (PWA). Ниже — как устроено веб-ПО, чем оно отличается от сайта, десктопной и мобильной программы, какие бывают виды и на чем их пишут. Пример кода проверен на Node.js 24 (сентябрь 2026).

Мини-словарь

Граница между сайтом и приложением размыта: у интернет-магазина есть и читаемый каталог, и корзина с оплатой. Практический признак — есть ли у пользователя свое состояние (аккаунт, корзина, документы), которое программа хранит и меняет.

Как работает веб-приложение

В основе — модель клиент-сервер и протокол HTTP. Упрощенно один цикл выглядит так:

1. Пользователь открывает адрес. Браузер через DNS узнает IP-адрес сервера и устанавливает соединение (для HTTPS — еще и шифрованное, TLS).
2. Браузер отправляет HTTP-запрос: метод (GET, POST), путь, заголовки.
3. Сервер выполняет логику: проверяет права, читает или меняет данные в базе.
4. Сервер возвращает ответ: код статуса (200, 404, 500), заголовки и тело — HTML-страницу или JSON.
5. Браузер отрисовывает HTML и выполняет JavaScript. Дальше скрипт может сам отправлять запросы к API и менять часть страницы без перезагрузки.

Это модель для типичного случая. В реальном проекте между браузером и сервером бывают CDN, балансировщик и кеш, а часть логики может работать прямо в браузере.

Про протоколы и порты коротко. По умолчанию HTTP работает на порту 80, HTTPS — на 443; другие порты (3000, 8080) обычно используют при разработке. HTTP/1.1 и HTTP/2 передаются поверх TCP, а HTTP/3 — поверх QUIC, который работает на UDP. Для программиста интерфейс почти одинаков: те же методы, статусы и заголовки.

Минимальная веб-программа на Node.js

Пример ниже — полноценное веб-приложение из одного файла, без библиотек: сервер отдает HTML-страницу и API, а страница по кнопке запрашивает время у сервера и показывает его без перезагрузки.

// server.mjs - минимальное веб-приложение без библиотек (Node.js 24)
import { createServer } from 'node:http';

const page = `<!doctype html>
<html lang="ru">
<meta charset="utf-8">
<title>Мини веб-приложение</title>
<button id="btn">Узнать время сервера</button>
<p id="out">Нажмите кнопку</p>
<script>
  document.getElementById('btn').addEventListener('click', async () => {
    const out = document.getElementById('out');
    const res = await fetch('/api/time');   // запрос без перезагрузки страницы
    if (!res.ok) { out.textContent = 'Ошибка ' + res.status; return; }
    const data = await res.json();
    out.textContent = 'Сервер: ' + data.time;  // textContent, не innerHTML
  });
</script>
</html>`;

const server = createServer((req, res) => {
  if (req.method === 'GET' && req.url === '/') {
    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    res.end(page);
  } else if (req.method === 'GET' && req.url === '/api/time') {
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({ time: new Date().toISOString() }));
  } else {
    res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' });
    res.end('<h1>404: страница не найдена</h1>');
  }
});

server.listen(3000, '127.0.0.1', () => {
  console.log('Откройте http://127.0.0.1:3000');
});

Запуск: node server.mjs. В консоли появится строка Откройте http://127.0.0.1:3000. В браузере по этому адресу будет кнопка; после нажатия под ней появится время сервера в формате ISO, например Сервер: 2026-09-24T12:36:37.369Z. Ответ API можно посмотреть и без браузера:

$ curl -i http://127.0.0.1:3000/api/time
HTTP/1.1 200 OK
Content-Type: application/json
...
{"time":"2026-09-24T12:36:37.369Z"}

Что здесь от веб-программы:

• Сервер (createServer) разбирает метод и путь запроса и решает, что вернуть. Это бэкенд.
• Страница (page) — HTML и JavaScript, которые выполняются в браузере. Это фронтенд.
• API /api/time отдает данные в JSON, а не готовую страницу. Так устроены SPA: страница загружается один раз, дальше идут только запросы за данными.
• Сервер слушает 127.0.0.1, то есть доступен только с этого компьютера. Чтобы открыть его в сети, нужны HTTPS, авторизация и настроенный фаервол — учебный пример к этому не готов.

Типичная ошибка: ответ не JSON

Клиент ждет JSON, но в адресе опечатка:

// bad.mjs - клиент с опечаткой в адресе
const res = await fetch('http://127.0.0.1:3000/api/tme');
const data = await res.json();
console.log(data.time);

Сервер честно отвечает 404 с HTML-страницей, а res.json() пытается разобрать ее как JSON. Фактический результат (Node.js 24.21):

SyntaxError: Unexpected token '<', "<h1>404: с"... is not valid JSON
    at JSON.parse (<anonymous>)

Сообщение говорит про символ <, хотя настоящая причина — неверный адрес. Исправление — проверять статус и тип ответа до разбора:

// good.mjs - сначала проверяем статус и тип ответа
async function getJson(url) {
  const res = await fetch(url);
  const type = res.headers.get('content-type') ?? '';
  if (!res.ok || !type.includes('application/json')) {
    throw new Error(`HTTP ${res.status}, тип ${type || 'не указан'}: ${url}`);
  }
  return res.json();
}

try {
  console.log((await getJson('http://127.0.0.1:3000/api/time')).time);
  console.log((await getJson('http://127.0.0.1:3000/api/tme')).time);
} catch (err) {
  console.error('Ошибка:', err.message);
}

2026-09-24T12:36:37.448Z
Ошибка: HTTP 404, тип text/html; charset=utf-8: http://127.0.0.1:3000/api/tme

Теперь ошибка называет причину: код 404 и адрес.

Если не получилось

• Error: listen EADDRINUSE: address already in use 127.0.0.1:3000 — порт уже занят, чаще всего второй копией сервера. Остановите ее (Ctrl+C в том терминале) или смените порт в server.listen.
• Кнопка не работает, если HTML открыт как файл (file://), а не по адресу сервера: запрос /api/time некуда отправить. Открывайте страницу через http://127.0.0.1:3000.

Чем веб-приложение отличается от сайта, десктопной и мобильной программы

От сайта веб-приложение отличается не технологией — они собираются из тех же HTML, CSS, JavaScript и серверного кода, — а задачей: сайт в основном показывает информацию, приложение дает выполнять действия с данными.

Граница с десктопом тоже не абсолютна. Программы на Electron (например, VS Code) — это веб-технологии, упакованные в десктопное приложение со своим браузерным движком.

Виды веб-приложений

Единой классификации нет. На практике выбирают прежде всего способ, которым страницы попадают к пользователю:

PWA — не отдельная технология, а набор возможностей поверх SPA или MPA. Насколько полно они доступны, зависит от браузера и ОС: на iOS часть функций появилась позже и работает с ограничениями.

Примеры веб-программ

• Почта в браузере и онлайн-документы — классические SPA: вы работаете в одном окне, а данные сохраняются на сервере.
• Интернет-банк — веб-приложение с повышенными требованиями к безопасности: вход с подтверждением, короткие сессии.
• Онлайн-редакторы графики и интерфейсов — пример того, как много вычислений можно перенести в браузер.
• Интернет-магазин — гибрид: каталог работает как сайт, корзина и личный кабинет — как приложение.

На чем пишут веб-программы

Основа фронтенда — HTML, CSS и JavaScript (часто TypeScript, который компилируется в JavaScript). Исключение — код, скомпилированный в WebAssembly (например, C# в Blazor или Rust): он тоже выполняется в браузере, но и такому приложению нужна HTML-страница и связка с JavaScript для доступа к DOM. Бэкенд можно писать почти на любом языке:

Язык сервера выбирают по задаче и команде, а не по «скорости вообще». Для учебного проекта разумно взять один язык на фронтенде и бэкенде (JavaScript/TypeScript) — меньше переключений.

Минимальная безопасность любой веб-программы: HTTPS в рабочей среде, проверка всех входных данных на сервере (проверка в браузере обходится одним запросом через curl), параметризованные SQL-запросы, вывод пользовательского текста через textContent или экранирование, а не через innerHTML. Эти меры закрывают разные угрозы и друг друга не заменяют. Как спланировать собственный проект до первой строки кода, разобрано в статье «Как написать веб-приложение: что нужно помнить перед созданием».

Выводы

• Веб-программа (веб-ПО) — приложение, с которым работают через браузер; интерфейс приходит с сервера, данные и логика обычно на сервере.
• Основа — клиент-сервер и HTTP: запрос с методом и путем, ответ со статусом и телом в виде HTML или JSON.
• От сайта веб-приложение отличается задачей (действия с данными), а не технологией; от десктопа и мобильного ПО — отсутствием установки и обновлением на сервере.
• Главные виды — MPA, SPA, гибрид с SSR и PWA; выбирают по объему контента, требованиям к индексации и интерактивности.
• Фронтенд пишут на HTML, CSS и JavaScript/TypeScript, бэкенд — на Node.js, Python, PHP, Java, C#, Go и других языках.

Где применяется / связь с практикой

FAQ

Веб-ПО и облачное ПО — одно и то же?
Не совсем. Облачное ПО (SaaS) — модель поставки, когда программа работает на серверах поставщика по подписке; чаще всего интерфейс у нее веб, но бывает и клиент для ПК или телефона.

Можно ли сделать веб-приложение без сервера?
Да, если данные хранятся в браузере (например, в localStorage или IndexedDB): так работают простые калькуляторы и редакторы. Но синхронизации между устройствами и общих данных для разных пользователей без сервера не будет.

Нужен ли фреймворк, чтобы написать веб-программу?
Нет, пример выше обходится без библиотек. Фреймворки берут, когда растет число экранов и маршрутов: они решают маршрутизацию, работу с формами и состоянием.