В чем разница между браузерной и серверной средой?

Разница между браузерной и серверной средой

Браузерная среда (frontend) и серверная среда (backend) — это два разных окружения, в которых выполняется JavaScript код. Они имеют принципиальные различия в доступных API, возможностях и назначении.

Браузерная среда

Браузерная среда — это среда выполнения JavaScript в браузере пользователя. Здесь запускается весь код, отвечающий за интерфейс и взаимодействие с пользователем.

Доступные API браузера:

// DOM (работа с элементами страницы)
document.querySelector(".button")
document.getElementById("header")
element.addEventListener("click", handler)

// LocalStorage и SessionStorage
localStorage.setItem("key", "value")
const value = localStorage.getItem("key")

// Fetch API и AJAX
fetch("/api/users").then(r => r.json())

// WebSocket
const ws = new WebSocket("ws://server.com")

// Cookies
document.cookie = "name=value"

// Геолокация
navigator.geolocation.getCurrentPosition(callback)

// Canvas и WebGL
const canvas = document.getElementById("myCanvas")
const ctx = canvas.getContext("2d")

Ограничения браузера:

• Нет прямого доступа к файловой системе
• Нет доступа к переменным окружения
• Все данные видны в исходном коде (не хранить секреты)
• Same-Origin Policy — нельзя запрашивать данные с других доменов без CORS
• Нет доступа к системным ресурсам (камера, микрофон доступны только через API)
• Ограничения по памяти и производительности

Серверная среда (Node.js)

Серверная среда — это среда выполнения JavaScript на сервере (например, Node.js). Здесь запускается бизнес-логика, работа с БД, аутентификация и т.д.

Доступные API сервера:

// Файловая система
const fs = require("fs")
fs.readFileSync("file.txt", "utf-8")
fs.writeFileSync("file.txt", "content")

// Переменные окружения
const dbPassword = process.env.DB_PASSWORD

// HTTP сервер
const http = require("http")
const server = http.createServer((req, res) => {
  res.writeHead(200, {"Content-Type": "text/html"})
  res.end("Hello World")
})

// Работа с БД напрямую
const db = require("./db")
db.query("SELECT * FROM users")

// Процессы и потоки
const child_process = require("child_process")
child_process.exec("echo hello")

// Работа с путями и системой
const path = require("path")
const os = require("os")
const platform = os.platform()

// Crypto для хеширования и шифрования
const crypto = require("crypto")
const hash = crypto.createHash("sha256").update("data").digest("hex")

Таблица сравнения

Практические примеры

Браузер — только для UI:

// ✅ Правильно — в браузере
function handleFormSubmit(event) {
  const formData = new FormData(event.target)
  fetch("/api/submit", {
    method: "POST",
    body: formData
  })
}

// ❌ Неправильно — в браузере
const password = "secret123" // Видно в исходном коде!

Сервер — для логики:

// ✅ Правильно — на сервере
app.post("/api/submit", (req, res) => {
  const dbPassword = process.env.DB_PASSWORD
  const hash = crypto.createHash("sha256").update(req.body.password).digest()
  // Безопасная логика
})

Резюме

Браузер — среда для создания интерфейса и взаимодействия с пользователем. Имеет доступ к DOM, событиям, storage, но ограничена в доступе к системе и безопасности.

Сервер (Node.js) — среда для обработки данных, работы с БД, аутентификации и бизнес-логики. Имеет полный доступ к системе, но не имеет доступа к DOM.

Для полноценного приложения нужны обе среды: браузер для UI, сервер для логики и безопасности.