Фронтенд на чистом JavaScript: быстрые виджеты и анимации

Отметим: когда бандл вашего приложения весит более 2 МБ, а LCP уходит за 3 секунды, причина часто кроется в избыточности фреймворка. Для embed-виджетов, анимаций или расширений браузера Vanilla JavaScript становится единственным адекватным выбором. Мы реализовали более 30 проектов без единого фреймворка, обеспечив LCP менее 1 секунды и бандл размером 20–40 КБ. Отсутствие виртуального DOM и прямой доступ к браузерным API дают максимальную производительность, а экономия бюджета на разработку достигает 40% (до $450–650 на типовом виджете). Наша команда использует современные возможности языка: Web Components, IntersectionObserver, Proxy и ESModules, чтобы создавать быстрые и надежные решения. Каждый проект начинается с аудита метрик и подбора оптимальной архитектуры. Свяжитесь с нами для аудита вашего проекта.

Когда Vanilla JS становится единственным верным выбором

Vanilla JS оправдан в сценариях, где фреймворки добавляют излишнюю сложность. Embed-виджеты встраиваются на чужие сайты — нельзя конфликтовать с их фреймворками. Библиотеки для npm с нулевыми зависимостями не утяжеляют проект пользователей с другим стеком. Высоконагруженные анимации используют Canvas API, WebGL и Web Animations API напрямую, без прослойки virtual DOM. Расширения браузера работают в изолированной среде Content Scripts, где фреймворки увеличивают риски. Статические сайты с минимальной интерактивностью не требуют 50 КБ ради одного дропдауна. Типовой виджет на Vanilla JS обойдётся на 30-50% дешевле, чем на React.

В одном из проектов мы заменили React-виджет корзины на Vanilla JS. Бандл сократился с 120 КБ до 28 КБ (снижение на 77%), LCP упал с 2,4 с до 0,8 с (на 67% быстрее). Нагрузка на CPU снизилась на 40%. Vanilla JS загружается в 2 раза быстрее React на медленных соединениях, а экономия на разработке составила около $360–520.

Почему Vanilla JS превосходит фреймворки по производительности

Отсутствие virtual DOM исключает накладные расходы на сравнение и перерисовку. Прямая работа с document.createElement и appendChild позволяет управлять каждым обновлением вручную. В сочетании с IntersectionObserver для ленивой загрузки и requestAnimationFrame для анимаций вы получаете LCP менее 1 секунды даже на мобильных устройствах. Мы также используем preload для критических ресурсов и prefetch для следующих страниц. Сокращение бандла на 77% и экономия бюджета на разработку до 40% — не редкость при миграции на чистый JS.

Какие современные возможности Vanilla JS доступны

Браузерные API значительно расширились: теперь доступны Custom Elements, Shadow DOM, AbortController, Proxy, Service Workers. Пример Fetch с таймаутом:

async function fetchWithTimeout(url, options = {}, timeoutMs = 5000) {
  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), timeoutMs);
  try {
    const response = await fetch(url, { ...options, signal: controller.signal });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } finally {
    clearTimeout(timeout);
  }
}

Web Components — компонентная модель без фреймворка

class ProductCard extends HTMLElement {
  static get observedAttributes() {
    return ['product-id'];
  }

  connectedCallback() {
    this.#render();
    this.#attachEvents();
  }

  attributeChangedCallback(name, oldVal, newVal) {
    if (name === 'product-id' && oldVal !== newVal) {
      this.#fetchProduct(newVal);
    }
  }

  async #fetchProduct(id) {
    const data = await fetchWithTimeout(`/api/products/${id}`);
    this.#update(data);
  }

  #render() {
    this.innerHTML = `
      <article class="product-card">
        <img class="product-card__img" alt="">
        <h3 class="product-card__name"></h3>
        <span class="product-card__price"></span>
        <button class="product-card__btn">В корзину</button>
      </article>
    `;
  }

  #update({ name, price, image }) {
    this.querySelector('.product-card__img').src = image;
    this.querySelector('.product-card__name').textContent = name;
    this.querySelector('.product-card__price').textContent = `${price} $`;
  }

  #attachEvents() {
    this.querySelector('.product-card__btn').addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('add-to-cart', {
        bubbles: true,
        detail: { productId: this.getAttribute('product-id') }
      }));
    });
  }
}

customElements.define('product-card', ProductCard);

MDN: Web ComponentsИспользование в HTML: <product-card product-id="42"></product-card>. Работает в любом фреймворке или без него.

Управление состоянием с Proxy: реактивный store без Redux

function createStore(initialState) {
  const listeners = new Set();
  const state = new Proxy(structuredClone(initialState), {
    set(target, key, value) {
      target[key] = value;
      listeners.forEach(fn => fn(structuredClone(target)));
      return true;
    }
  });
  return {
    state,
    subscribe: (fn) => {
      listeners.add(fn);
      return () => listeners.delete(fn);
    },
    getSnapshot: () => structuredClone(state),
  };
}

const cartStore = createStore({ items: [], total: 0 });
cartStore.subscribe(state => {
  document.getElementById('cart-count').textContent = state.items.length;
});

Структура проекта с ESModules

src/ components/ product-card.js modal.js lib/ store.js api.js utils.js pages/ catalog.js product.js app.js 

{
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Нулевых runtime-зависимостей. Vite только для разработки и сборки.

Как мы работаем над проектами на Vanilla JS

1. Аналитика — определяем критичные сценарии, замеряем метрики (LCP, TTFB).
2. Проектирование — архитектура модулей, карта компонентов, API-контракты.
3. Реализация — итеративная разработка с код-ревью и тестами (Vitest + jsdom).
4. Оптимизация — bundle splitting, prefetch, lazy loading, tree-shake.
5. Деплой — сборка через Vite, выкладка на CDN или хостинг.

Что входит в работу

• Исходный код на ESModules с комментариями.
• Документация по компонентам и инструкция по развертыванию.
• Гарантия поддержки 3 месяца после сдачи.
• Метрики производительности до и после.

Сроки ориентировочно

• Простой виджет (до 5 компонентов) — от 2 до 5 дней.
• Средний проект (до 20 компонентов) — от 1 до 3 недель.
• Комплексное приложение (до 50 компонентов) — от 4 до 8 недель.

Стоимость рассчитывается индивидуально. Оценим ваш проект — напишите нам. Обсудим ваш проект — закажите консультацию. Дополнительная экономия бюджета до $450–650 возможна при миграции с фреймворков.