Что такое Alpine.js
Alpine.js — маленькая библиотека, которая добавляет интерактивность прямо в HTML. Поведение описывается атрибутами тегов: x-data хранит данные, x-on реагирует на события, x-show прячет и показывает элементы. Отдельного файла со сборкой и компонентами не нужно — достаточно подключить один скрипт. Курс написан для Alpine.js 3.
Первый пример
Вот счётчик целиком. Скрипт Alpine подключается тегом <script> с атрибутом defer:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{ count: 0 }">
<button x-on:click="count++">Нажать</button>
<span x-text="count"></span>
</div>Под примером видна кнопка и число. Каждое нажатие увеличивает count, и Alpine сам обновляет текст в <span>. Ни одного вызова querySelector или addEventListener писать не пришлось.
Директивы
Атрибуты, которые начинаются с x-, называются директивами. Каждая директива — одна задача:
| Директива | Что делает |
|---|---|
x-data | Объявляет компонент и его данные |
x-text | Выводит значение как текст |
x-on | Подписывается на событие |
x-show | Показывает или прячет элемент |
x-for | Повторяет элемент для каждого элемента массива |
x-model | Связывает поле формы с данными |
Значение директивы — обычное выражение JavaScript, которое видит данные своего компонента.
Когда выбирать Alpine
React и Vue строят всю страницу из компонентов и обычно требуют сборки проекта. Alpine работает поверх готового HTML, который пришёл с сервера. Поэтому он хорош там, где страницы рисует бэкенд — Laravel, Symfony, Django, Rails, — а на странице нужны выпадающие меню, вкладки, модальные окна, фильтры.
Alpine особенно популярен у разработчиков на Laravel: на нём построены интерактивные элементы Livewire, и Livewire 3 подключает Alpine автоматически.
Для большого одностраничного приложения с маршрутизацией на клиенте лучше взять React или Vue.
Что будет в курсе
Сквозной пример курса — список дел: добавление задач, отметка выполненных, фильтр, сохранение. В уроках о готовых элементах интерфейса появятся выпадающее меню, вкладки и модальное окно. Все примеры с тегом <script> работают прямо на странице урока — нажимайте кнопки и меняйте код в песочнице.
Частая ошибка
Писать директиву вне компонента. Директивы работают только внутри элемента с x-data или в нём самом:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{ name: 'Анна' }"></div>
<p x-text="name"></p>Здесь <p> стоит рядом с компонентом, а не внутри, поэтому остаётся пустым: Alpine обрабатывает только элементы внутри компонентов, а остальные просто пропускает, даже без ошибки в консоли. Переместите <p> внутрь <div>.