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
Основні директиви
| Директива | Призначення | Приклад використання |
|---|---|---|
x-data |
Реактивний стан | x-data="{ count: 0 }" |
x-bind / : |
Прив'язка атрибутів | :class="{ active: isActive }" |
x-on / @ |
Обробка подій | @click="count++" |
x-show |
Управління видимістю | x-show="open" |
x-if |
Умовний рендер | x-if="items.length" |
x-for |
Ітерація | x-for="item in items" |
x-model |
Двостороння прив'язка | x-model="query" |
x-transition |
Анімації | x-transition:enter="..." |
x-ref |
Доступ до DOM | x-ref="input" |
$store |
Глобальне сховище | $store.cart.count |
Глобальний стан з 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 | React |
|---|---|---|
| Розмір бандлу (min+gzip) | ~15 КБ | ~150 КБ |
| Час до першої інтерактивності (TTI) | <500ms | >1.5s |
| Необхідність збірки | Ні | Так |
| Підходить для | Віджети, серверні шаблони | SPA, складний UI |
Як інтегрувати Alpine.js з Laravel?
Інтеграція з Laravel будується на зв'язці Blade + Alpine.js. Серверний HTML рендериться як зазвичай, а Alpine.js додає реактивність через директиви. Важливо: не використовуйте x-data на одному елементі з Blade-циклами — обгортайте компоненти в окремий div. Приклад вище з випадним меню працює без конфліктів. Для складніших форм можна підключати AJAX-запити через fetch, як показано в розділі «Робота з формами та AJAX».
Процес роботи
- Аналітика: вивчаємо ТЗ, визначаємо обсяг інтерактивних компонентів та їхню складність.
- Проєктування: обираємо конфігурацію (CDN або збірка), прототипуємо стан.
- Розробка: пишемо компоненти, інтегруємо з backend, підключаємо анімації.
- Тестування: перевіряємо в Chrome, Firefox, Safari, Edge та мобільних браузерах.
- Деплой: віддаємо білди, налаштовуємо кешування, передаємо доступ.
Строки орієнтовно
| Етап | Тривалість |
|---|---|
| Налаштування збірки та інтеграція | 1 тиждень |
| Розробка форм, корзини, анімацій | 2–3 тижні |
| Оптимізація, тестування, документація | 1 тиждень |
Підсумковий 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. Гарантуємо строки та якість. Замовте консультацію вашого проекту — обговоримо рішення.