Разработка фронтенда сайта на Alpine.js

Разработка фронтенда сайта на Alpine.js

Alpine.js — минималистичный фреймворк для добавления реактивности прямо в HTML-разметку. Никакой сборки, никакого виртуального DOM, никаких компонентных деревьев. Атрибуты x-data, x-bind, x-on — и у вас работающий интерфейс. Это осознанный выбор для проектов, где jQuery уже избыточен, а React — явный overkill.

Типичные кандидаты: Laravel Blade + Alpine.js, PHP-сайты с серверным рендером, WordPress с кастомными блоками, статические сайты с небольшой интерактивностью.

Что Alpine.js умеет из коробки

Директивы покрывают 90% задач обычного интерфейса:

Архитектура без сборки

Для небольших проектов Alpine.js подключается через 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();

Пример: модальное окно с анимацией

<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>

Глобальное состояние через $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 между сессиями.

Интеграция с серверным рендером

Alpine.js идеально ложится на Laravel Blade:

{{-- resources/views/components/dropdown.blade.php --}}
<div x-data="dropdown()" class="relative">
  <button @click="toggle" :aria-expanded="open">
    {{ $label }}
    <svg :class="{ 'rotate-180': open }" .../>
  </button>
  <ul x-show="open" @click.outside="close" x-transition>
    @foreach($items as $item)
      <li><a href="{{ $item['url'] }}">{{ $item['label'] }}</a></li>
    @endforeach
  </ul>
</div>

<script>
function dropdown() {
  return {
    open: false,
    toggle() { this.open = !this.open; },
    close() { this.open = false; }
  }
}
</script>

Работа с AJAX и HTMX-паттернами

Alpine.js не имеет встроенного HTTP-клиента, но интегрируется с 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>

Сроки и состав работ

• Неделя 1: настройка сборки (Vite/CDN), интеграция с backend-шаблонизатором, базовые интерактивные компоненты
• Недели 2–3: формы с валидацией, корзина/избранное через $store, анимации, AJAX-запросы
• Неделя 4: оптимизация, тестирование в браузерах, документация компонентов

Итоговый JS-бандл для среднего сайта — 15–30 KB (Alpine core + плагины). Сравните с 150+ KB для React-приложения той же функциональности.