Ландшафт JavaScript похож на нескончаемый музыкальный фестиваль: каждый год на главную сцену выходит новый хедлайнер, а вчерашние рок-звёзды уходят в ностальгию. Но в 2025 году происходит удивительное возвращение — триумфальное возрождение чистого JavaScript. Забудьте о свалке фреймворков; мы наблюдаем полномасштабный бунт, когда разработчики заново открывают для себя грубую силу нативных возможностей браузера. Пристегните ремни, потому что мы срываем стену абстракции и перестраиваем всё на чистом, неискажённом JS.

🎸 Почему разработчики бунтуют против перегрузки фреймворками

Помните, когда jQuery был кульминационным гитарным соло? Затем хедлайнерами стали Angular, React и Vue. Но в последнее время я заметил кое-что за кулисами: разработчики устали от бесконечного танца с инструментарием. Один аудит npm от экзистенциального кризиса заставляет нас задуматься, действительно ли нам нужны 200 МБ node_modules для отрисовки кнопки.

Современные браузеры превратились в способных зверей. API, такие как fetch(), IntersectionObserver и Web Components, не разогрев — они готовые к использованию звёзды. Нужно управление состоянием? Объекты Proxy обрабатывают реактивность нативно. Маршрутизация? API навигации удивительно надёжное. Когда браузеры наконец-то согласовали стандарты, они не просто прошептали — они прокричали: «Вам не нужен фреймворк для всего!».

Мош-пит производительности

Давайте поговорим о цифрах. React «Hello World» весит около 150 КБ в gzip. Чистый аналог? Меньше 1 КБ. Когда ваш пользователь подключён к нестабильному Wi-Fi в поезде или использует телефон за 20 долларов, эта разница не академическая — это разрыв между вовлечением и отказом. Фреймворки — это как стопки усилителей: круто для стадионов, перебор для кафе. Не каждому проекту нужны пиротехнические эффекты.

// Управление состоянием в чистом виде в 2025 году — фреймворки не нужны!
const state = new Proxy({ count: 0 }, {
  set(target, key, value) {
    target[key] = value;
    document.getElementById("counter").textContent = value;
    return true;
  }
});
document.querySelector("button").addEventListener("click", () => {
  state.count++;
});

🔧 Создание компонента без фреймворка: «Бунтарский переключатель»

Достаточно теории — давайте создадим что-нибудь опасно простое. Мы создадим доступный переключатель тем. Без JSX, без виртуального DOM, без экзистенциального страха.

Шаг 1: Структура HTML

<button id="theme-toggle" aria-pressed="false">
  🌙 Тёмный режим
</button>

Шаг 2: CSS для управления состоянием

:root {
  --bg: white;
  --text: black;
}
[data-theme="dark"] {
  --bg: #1a1a1a;
  --text: #f0f0f0;
}
body {
  background: var(--bg);
  color: var(--text);
  transition: all 0.3s ease;
}

Шаг 3: Чистый JavaScript, который впечатляет

const toggle = document.getElementById("theme-toggle");
toggle.addEventListener("click", () => {
  const isPressed = toggle.getAttribute("aria-pressed") === "true";
  // Переключение состояния и UI
  toggle.setAttribute("aria-pressed", String(!isPressed));
  document.documentElement.dataset.theme = isPressed ? "light" : "dark";
  // Обновление текста (потому что эмодзи — это серьёзное дело)
  toggle.textContent = isPressed ? "🌙 Тёмный режим" : "☀️ Светлый режим";
});

Почему это круто: Никаких зависимостей, 500 байт, и это работает до того, как ваш скрипт гидратации React закончит зевать. Браузер всё обрабатывает — без алгоритмов сравнения.

🗺️ Когда использовать чистый подход: ваша матрица решений по фреймворку

Не каждый проект нуждается в бунте. Используйте эту шпаргалку:

graph TD A[Начать проект] --> B{Сложность} B -->|SPA с 50+ маршрутами| C[React/Vue] B -->|Маркетинговый сайт| D[Чистый JS] B -->|Админ-панель| E[Фреймворк] A --> F{Размер команды} F -->|Одинокий волк| D F -->|10+ разработчиков| E A --> G{Бюджет производительности} G -->|Критический| D G -->|Щедрый| E

🛠️ Продвинутые тактики бунта

Думаете, чистый JS означает спагетти-код? Переосмыслите. Современные шаблоны сохраняют чистоту: Веб-компоненты для инкапсуляции:

class RebelToast extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
      <style>/* Локальные стили */</style>
      <div class="toast">${this.getAttribute("message")}</div>
    `;
  }
}
customElements.define("rebel-toast", RebelToast);

Управление состоянием с помощью пользовательских событий:

// Отправка событий вместо передачи пропсов
document.dispatchEvent(
  new CustomEvent("user-updated", { detail: { id: 42 } })
);
// Слушаем где угодно
document.addEventListener("user-updated", (e) => {
  console.log("Пользователь обновлен:", e.detail.id);
});

🎤 Энкор: Это просто ностальгия?

Вовсе нет. Это не «возвращение назад» — это движение вперёд с целью. Фреймворки по-прежнему доминируют в сложных SPA, но чистый JS вернул себе территорию для:

  • Быстрых микросайтов
  • Встроенных виджетов (хватит загружать React для кнопки!)
  • Постепенного улучшения
  • Инструментов, где размер бандла = доход.

По мере роста возможностей браузеров (привет, API переходов просмотра) разрыв между чистым JS и фреймворками сокращается. Бунт не о том, чтобы сжечь React — он о выборе правильного инструмента без давления со стороны сверстников. Так что в следующий раз, когда вы будете запускать npx create-react-app, спросите себя: «Подойдёт ли здесь чистый JS?» Иногда ответ «да» — и это нормально.

Сцена ваша: Вы присоединяетесь к бунту или остаётесь в зоне комфорта фреймворков? Пишите свои горячие мысли в комментариях — давайте начнём мозговой штурм идей! 🤘