Руководство по установке и настройке Alpine.js

Alpine.js — это не Vue, не React и даже не jQuery. Это маленькая библиотека, которая позволяет оживить HTML без того, чтобы тянуть в проект 200 килобайт зависимости и полжизни на конфиги. Если нужно просто — берёшь Alpine. Все мы знаем этот ад: хочется добавить пару интерактивных мелочей в проект, а в итоге полдня уходит на webpack, сборку и борьбу с зависимостями. В итоге счётчик лайков в блоге жрёт больше памяти, чем сам блог. Alpine.js решает проблему тупо: подключил один скрипт и сразу работаешь прямо в HTML. Без «npm run build», без «babel», без лишней головной боли. Шаг 1. Подключаем Alpine.js Берём CDN и кидаем в . Всё. Атрибут defer нужен, чтобы браузер не тупил и не блокировал загрузку страницы. Если хочешь, можешь скачать и хранить локально, но для прототипов и боевых мелочей — CDN хватает. Шаг 2. Первый живой кусок Простейший пример — счётчик. x-data — заводим состояние. @click — обрабатываем событие. x-text — выводим данные. Это не фреймворк, тут нет тонны магии. HTML остаётся HTML, просто с приправой. Шаг 3. Немного логики Alpine позволяет не только хранить переменные, но и пихать методы прямо внутрь x-data. Это всё. Не надо городить отдельный .js, импорты и классы. Если задача простая — этого достаточно. Шаг 4. Сочетаемость Alpine не мешает другим библиотекам. Хочешь — используй с jQuery, хочешь — прикрути рядом с Vue. Он лёгкий и тупо делает свою работу: оживляет HTML. Вместо вывода Alpine.js — это инструмент для тех случаев, когда надо быстро оживить верстку без того, чтобы тащить в проект весь React-цирк с конями. Подключил скрипт, написал пару атрибутов, и всё работает. Хочешь сложные интерфейсы с роутингом, стейтом и бог знает чем? Иди в Vue или React. Хочешь добавить кнопку, модалку, выпадашку или простой интерактив без геморроя? Alpine — твоё спасение.