Где можно запускать JavaScript?

Где можно запускать JavaScript

JavaScript — это универсальный язык, который можно запускать в различных окружениях. Изначально JavaScript разрабатывался для браузеров, но сейчас его спектр применения намного шире.

1. В браузере (Browser)

Это оригинальное и самое распространённое место выполнения JavaScript. Браузер интерпретирует и выполняет код:

// В браузере есть доступ к DOM, Window API, LocalStorage и т.д.

// Работа с DOM
const button = document.getElementById("myBtn");
button.addEventListener("click", () => {
  console.log("Button clicked!");
});

// Доступ к объекту window
window.localStorage.setItem("key", "value");
console.log(window.location.href);

// Асинхронные операции
fetch("/api/data")
  .then(res => res.json())
  .then(data => console.log(data));

// Таймеры
setTimeout(() => {
  console.log("After 2 seconds");
}, 2000);

Поддерживаемые браузеры:

• Chrome/Chromium (V8 engine)
• Firefox (SpiderMonkey engine)
• Safari (JavaScriptCore engine)
• Edge (V8 engine)
• Opera, Brave, Vivaldi и другие

2. Node.js (серверная сторона)

Node.js позволяет запускать JavaScript вне браузера, на сервере. Это революционизировало веб-разработку:

// Node.js имеет доступ к файловой системе, системным ресурсам

const fs = require("fs");
const http = require("http");

// Работа с файлами
const data = fs.readFileSync("file.txt", "utf-8");
fs.writeFileSync("output.txt", "Some content");

// Создание сервера
const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "application/json" });
  res.end(JSON.stringify({ message: "Hello from Node.js" }));
});

server.listen(3000, () => {
  console.log("Server running on port 3000");
});

// Использование npm пакетов
const express = require("express");
const app = express();

app.get("/api/users", (req, res) => {
  res.json({ users: [] });
});

Фреймворки на Node.js:

• Express.js
• Nest.js
• Koa
• Fastify
• Hapi

3. Deno (альтернатива Node.js)

Deno — это современная runtime для JavaScript/TypeScript, созданная автором Node.js. Исправляет некоторые проблемы Node.js:

// Deno использует URL импорты вместо npm
import { serve } from "https://deno.land/std@0.140.0/http/server.ts";

const handler = (req: Request): Response => {
  return new Response("Hello from Deno");
};

await serve(handler, { port: 8000 });

// Встроенная поддержка TypeScript
const greet = (name: string): string => {
  return `Hello, ${name}`;
};

// Встроенная поддержка тестирования, форматирования

4. Bun

Bun — это быстрый JavaScript runtime (альтернатива Node.js и Deno):

// Bun совместим с Node.js API и очень быстрый

import { serve } from "bun";

serve({
  port: 3000,
  fetch(req) {
    return new Response("Hello from Bun!");
  },
});

// Встроенная поддержка пакет-менеджера
// Работает с Node.js npm пакетами

5. Electron (десктопные приложения)

Electron позволяет создавать кроссплатформенные десктопные приложения с использованием JavaScript/HTML/CSS:

// Главный процесс (Node.js)
const { app, BrowserWindow } = require("electron");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      nodeIntegration: false
    }
  });

  win.loadFile("index.html");
}

app.on("ready", createWindow);

// Рендер процесс (браузер)
// Это как обычное веб-приложение, но в десктопном окне

Популярные Electron приложения:

• Visual Studio Code
• Discord
• Slack
• Figma
• WhatsApp Desktop

6. React Native (мобильные приложения)

React Native позволяет разрабатывать мобильные приложения для iOS и Android на JavaScript:

// React Native код выглядит как React, но работает на мобилях

import React from "react";
import { View, Text, Button } from "react-native";

const App = () => {
  const [count, setCount] = React.useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button
        title="Increment"
        onPress={() => setCount(count + 1)}
      />
    </View>
  );
};

export default App;

7. Tauri (десктопные приложения с Rust бэкендом)

Tauri позволяет создавать лёгкие десктопные приложения с Rust бэкендом и JavaScript фронтендом:

// src-tauri/src/main.rs (Rust)
#[tauri::command]
fn greet(name: &str) -> String {
  format!("Hello, {}!", name)
}

// src/App.tsx (JavaScript/React)
import { invoke } from "@tauri-apps/api/tauri";

function App() {
  const [message, setMessage] = React.useState("");

  const handleGreet = async () => {
    const msg = await invoke("greet", { name: "Alice" });
    setMessage(msg);
  };

  return (
    <div>
      <button onClick={handleGreet}>Greet</button>
      <p>{message}</p>
    </div>
  );
}

8. AWS Lambda (serverless функции)

JavaScript можно запускать в облачных функциях для serverless архитектуры:

// AWS Lambda функция на Node.js
exports.handler = async (event, context) => {
  console.log("Event:", event);
  
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: "Hello from Lambda!",
      input: event
    })
  };
};

// Другие провайдеры:
// - Google Cloud Functions
// - Azure Functions
// - Vercel Functions
// - Netlify Functions

9. WebWorkers (в браузере, отдельный поток)

WebWorkers позволяют запускать JavaScript в отдельном потоке в браузере:

// main.js (основной поток)
const worker = new Worker("worker.js");

// Отправить данные worker'у
worker.postMessage({ number: 1000000 });

// Получить результат
worker.onmessage = (event) => {
  console.log("Result from worker:", event.data);
};

// worker.js (отдельный поток)
self.onmessage = (event) => {
  const number = event.data.number;
  
  // Тяжёлое вычисление не блокирует основной поток
  let result = 0;
  for (let i = 0; i < number; i++) {
    result += i;
  }
  
  // Отправить результат обратно
  self.postMessage(result);
};

10. ServiceWorker (в браузере, для PWA)

ServiceWorkers работают в отдельном контексте браузера для кеширования и работы offline:

// Регистрация в main.js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("service-worker.js");
}

// service-worker.js
self.addEventListener("install", (event) => {
  console.log("Service Worker installing");
});

self.addEventListener("fetch", (event) => {
  // Перехватить запросы
  event.respondWith(
    caches.match(event.request).then((response) => {
      // Вернуть из кеша или сделать запрос
      return response || fetch(event.request);
    })
  );
});

11. JavaScript движки

Живущие в разных местах JavaScript движки:

// V8 (Chrome, Node.js, Deno, Edge)
// SpiderMonkey (Firefox)
// JavaScriptCore (Safari)
// Chakra (исторически, сейчас Edge тоже на V8)
// QuickJS (встроенный, лёгкий)

// Каждый движок имеет оптимизации и особенности
// Но все поддерживают ECMAScript стандарт

12. IoT и встроенные системы

JavaScript используется даже в IoT устройствах и микроконтроллерах:

// Johnny-Five для управления Arduino и других платформ
const five = require("johnny-five");

const board = new five.Board();

board.on("ready", () => {
  const led = new five.Led(13);
  led.blink(500); // Мигать каждые 500ms
});

// Другие платформы:
// - MicroPython для Arduino
// - ML.js для машинного обучения
// - TensorFlow.js для ML в браузере

13. Сравнение окружений

14. Выбор окружения

Браузер используй для:

• Интеракции с пользователем
• Работы с DOM
• Клиентской валидации
• Интерактивного UI

Node.js используй для:

• REST API серверов
• Обработки данных
• Автоматизации задач
• Build tools

Electron используй для:

• Десктопных приложений
• Кроссплатформенности
• Интеграции с ОС

React Native используй для:

• Мобильных приложений
• Кроссплатформенности (iOS + Android)
• Нативных функций

AWS Lambda используй для:

• Serverless функций
• Обработки событий
• Масштабируемости без сервера

Практический стек современного разработчика

// Фронтенд (браузер)
// React.js + TypeScript + Tailwind CSS
// ESLint + Prettier
// Vitest + Playwright

// Бэкенд (Node.js)
// Express/Nest.js + TypeScript
// PostgreSQL + Prisma
// Jest + Supertest

// Десктопное приложение (Electron)
// React + TypeScript
// Electron Forge

// Мобильное приложение (React Native)
// React Native + TypeScript
// Expo или bare workflow

Заключение

JavaScript можно запускать в очень разных местах:

• Браузер — взаимодействие с пользователем
• Node.js — серверная логика
• Electron — десктопные приложения
• React Native — мобильные приложения
• Облако — serverless функции
• IoT — встроенные системы

Выбор окружения зависит от задачи и требований проекта. Современный разработчик часто работает с JavaScript в нескольких окружениях одновременно.