Alpine.js — это не Vue, не React и даже не jQuery. Это маленькая библиотека, которая позволяет оживить HTML без того, чтобы тянуть в проект 200 килобайт зависимости и полжизни на конфиги. Если нужно просто — берёшь Alpine.

Все мы знаем этот ад: хочется добавить пару интерактивных мелочей в проект, а в итоге полдня уходит на webpack, сборку и борьбу с зависимостями. В итоге счётчик лайков в блоге жрёт больше памяти, чем сам блог.

Alpine.js решает проблему тупо: подключил один скрипт и сразу работаешь прямо в HTML. Без «npm run build», без «babel», без лишней головной боли.

Шаг 1. Подключаем Alpine.js

Берём CDN и кидаем в <body>. Всё.

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

Атрибут defer нужен, чтобы браузер не тупил и не блокировал загрузку страницы.

Если хочешь, можешь скачать и хранить локально, но для прототипов и боевых мелочей — CDN хватает.

Шаг 2. Первый живой кусок

Простейший пример — счётчик.

<div x-data="{ count: 0 }">
    <button @click="count++">+</button>
    <span x-text="count"></span>
</div>
  • x-data — заводим состояние.
  • @click — обрабатываем событие.
  • x-text — выводим данные.

Это не фреймворк, тут нет тонны магии. HTML остаётся HTML, просто с приправой.

Шаг 3. Немного логики

Alpine позволяет не только хранить переменные, но и пихать методы прямо внутрь x-data.

<div x-data="{ count: 0, inc() { this.count++ } }">
    <button @click="inc()">+</button>
    <span x-text="count"></span>
</div>

Это всё. Не надо городить отдельный .js, импорты и классы. Если задача простая — этого достаточно.

Шаг 4. Сочетаемость

Alpine не мешает другим библиотекам. Хочешь — используй с jQuery, хочешь — прикрути рядом с Vue. Он лёгкий и тупо делает свою работу: оживляет HTML.

Вместо вывода

Alpine.js — это инструмент для тех случаев, когда надо быстро оживить верстку без того, чтобы тащить в проект весь React-цирк с конями. Подключил скрипт, написал пару атрибутов, и всё работает.

Хочешь сложные интерфейсы с роутингом, стейтом и бог знает чем? Иди в Vue или React.

Хочешь добавить кнопку, модалку, выпадашку или простой интерактив без геморроя? Alpine — твоё спасение.