Alpine.js: легкий реактивний фронтенд без збірки

Alpine.js: реактивний фронтенд без збірки

Типовий сценарій: ви розробляєте багатосторінковий сайт на Laravel, і для фільтрації товарів, модальних вікон, корзини потрібна інтерактивність. jQuery уже морально застарів, а React або Vue тягнуть за собою збірку, бандл 150+ КБ та архітектурні рішення. Alpine.js дає реактивність без збірки — додаємо атрибути прямо в HTML і отримуємо робочі компоненти. За 4 тижні ми реалізували інтернет-магазин з корзиною, пошуком та анімаціями; підсумковий бандл — 25 КБ. Це економить до 40% часу розробки порівняно з React. Ми — команда з 5+ роками досвіду у фронтенді, виконали 30+ проектів на Alpine.js.

Проблеми, які вирішує Alpine.js

Надлишковість важких фреймворків

Для типового сайту (корзина, фільтри, модалки) React або Vue — перебір. Alpine.js у 6 разів легший: середній бандл 25 КБ проти 150+ КБ у React. Це покращує LCP та економить трафік. Крім того, Alpine.js не потребує віртуального DOM, що знижує споживання пам'яті на 30%.

Повільна розробка без збірки

Alpine.js не потребує конфігурації webpack: вставили CDN і почали писати. Ми скоротили час розробки інтерактивних форм на 40% порівняно з React. Розробник може зосередитися на логіці, а не на налаштуванні оточення.

Інтеграція з серверним рендером

Alpine.js ідеально лягає на Blade, Twig, PHP-шаблони — компоненти пишуться прямо в HTML. Жодного hydration mismatch, як у React. Серверний HTML залишається недоторканим, а інтерактивність додається точково.

Чому Alpine.js підходить для швидких MVP?

Alpine.js орієнтований на мінімалізм: 15 обов'язкових директив покривають 90% задач. Немає віртуального DOM, немає компонентної ієрархії — тільки HTML з x-data та реактивні змінні. Це дозволяє створювати інтерактивні прототипи за години, а не дні. Наш стандартний MVP з корзиною, пошуком та формою замовлення — 4 дні розробки. Такий підхід знижує витрати на етапі перевірки гіпотез.

Ключові можливості Alpine.js

Основні директиви

Глобальний стан з persist

$store — реактивний глобальний стан, доступний з будь-якого компонента. Наприклад, корзина:

Alpine.store('cart', {
  items: Alpine.$persist([]).as('cart_items'),
  get count() {
    return this.items.length;
  },
  get total() {
    return this.items.reduce((s, i) => s + i.price * i.qty, 0);
  },
  add(product) {
    const existing = this.items.find(i => i.id === product.id);
    if (existing) existing.qty++;
    else this.items.push({ ...product, qty: 1 });
  },
  remove(id) {
    this.items = this.items.filter(i => i.id !== id);
  }
});

У шаблоні: <span x-text="$store.cart.count"></span>. Плагін @alpinejs/persist автоматично зберігає дані в localStorage.

Робота з формами та AJAX

Alpine.js чудово справляється з пошуком через fetch:

<div x-data="{ results: [], query: '', loading: false, async search() { if (this.query.length < 2) return; this.loading = true; const res = await fetch(`/api/search?q=${encodeURIComponent(this.query)}`); this.results = await res.json(); this.loading = false; } }">
  <input x-model.debounce.300ms="query" @input="search" placeholder="Пошук..." />
  <div x-show="loading">Завантаження...</div>
  <ul>
    <template x-for="item in results" :key="item.id">
      <li x-text="item.title"></li>
    </template>
  </ul>
</div>

Інтеграція з Laravel Blade

Alpine.js вбудовується в Blade-компоненти без конфліктів: достатньо обернути HTML в x-data. Наприклад, випадне меню:

<div x-data="{ open: false }" class="relative">
    <button @click="open = !open" :aria-expanded="open">
        Меню
    </button>
    <ul x-show="open" @click.outside="open = false" x-transition>
        @foreach($items as $item)
        <li><a href="{{ $item['url'] }}">{{ $item['label'] }}</a></li>
        @endforeach
    </ul>
</div>

Анімації та модальні вікна

Модальне вікно з анімацією:

<div x-data="{ open: false }">
  <button @click="open = true">Відкрити</button>
  <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.outside="open = false" @keydown.escape.window="open = false" class="fixed inset-0 flex items-center justify-center">
    <div class="bg-white rounded-xl p-6 shadow-xl w-full max-w-md">
      <h2 class="text-lg font-semibold">Заголовок</h2>
      <button @click="open = false">Закрити</button>
    </div>
  </div>
</div>

Архітектура: CDN vs збірка

Швидкий старт з CDN

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script> 

Production-збірка з Vite

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  build: {
    rollupOptions: {
      input: 'resources/js/app.js'
    }
  }
});

// app.js
import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
import persist from '@alpinejs/persist';

Alpine.plugin(focus);
Alpine.plugin(persist);
window.Alpine = Alpine;
Alpine.start();

Як інтегрувати Alpine.js з Laravel?

Інтеграція з Laravel будується на зв'язці Blade + Alpine.js. Серверний HTML рендериться як зазвичай, а Alpine.js додає реактивність через директиви. Важливо: не використовуйте x-data на одному елементі з Blade-циклами — обгортайте компоненти в окремий div. Приклад вище з випадним меню працює без конфліктів. Для складніших форм можна підключати AJAX-запити через fetch, як показано в розділі «Робота з формами та AJAX».

Процес роботи

1. Аналітика: вивчаємо ТЗ, визначаємо обсяг інтерактивних компонентів та їхню складність.
2. Проєктування: обираємо конфігурацію (CDN або збірка), прототипуємо стан.
3. Розробка: пишемо компоненти, інтегруємо з backend, підключаємо анімації.
4. Тестування: перевіряємо в Chrome, Firefox, Safari, Edge та мобільних браузерах.
5. Деплой: віддаємо білди, налаштовуємо кешування, передаємо доступ.

Строки орієнтовно

Підсумковий JS-бандл для середнього сайту — 15–30 КБ (Alpine core + плагіни). Порівняйте з 150+ КБ для React-додатку тієї ж функціональності.

Типові помилки та як їх уникнути

• Забули про @click.outside: без нього модалки не закриваються при кліку поза зоною. Додавайте @click.outside="open = false".
• Немає пакета @alpinejs/persist: після перезавантаження корзина втрачається. Використовуйте Alpine.$persist.
• Надмірна складність: не намагайтеся зробити SPA на Alpine.js — він для віджетів. Якщо потрібно більше 20 компонентів, краще подивитися в бік Vue.

Що входить в роботу

• Налаштування збірки (Vite або CDN) та інтеграція з вашим backend.
• Розробка всіх інтерактивних компонентів (форми, модалки, фільтри, корзина).
• Підключення плагінів @alpinejs/focus, @alpinejs/persist, @alpinejs/morph.
• Тестування в браузерах та на мобільних пристроях.
• Документація компонентів та навчання вашої команди.
• Повна передача доступів до коду та хостингу.
• Підтримка протягом 30 днів після здачі проекту.

Наш досвід: 5+ років у фронтенді, 30+ проектів на Alpine.js. Гарантуємо строки та якість. Замовте консультацію вашого проекту — обговоримо рішення.