Знакомимся с легкой и мощной Alpine.js

Сегодня мы познакомимся с Alpine.js. У многих разработчиков существует плохая тенденция чрезмерно усложнять рабочий процесс, особенно если на горизонте появилось что-то новое. Зачем использовать CSS, когда вы можете использовать CSS-in-JS? Зачем использовать Grunt, если вы можете использовать Gulp? Зачем использовать Gulp, когда вы можете использовать Webpack? Зачем использовать традиционную CMS, когда вы можете сделать все с нуля? Время от времени, однако, новая горячность делает жизнь проще.

В последнее время рост числа утилитарных инструментов, таких как Tailwind CSS, сделал это для CSS, а теперь Alpine.js обещает нечто подобное для JavaScript.

В этой статье мы подробнее рассмотрим Alpine.js (Github) и то, как он может заменить JQuery или более крупные библиотеки JavaScript для создания интерактивных веб-сайтов. Если вы регулярно создаете сайты, которые требуют добавления Javascript для изменения пользовательского интерфейса в зависимости от взаимодействия с пользователем, то эта статья для вас.

На протяжении всей статьи мы будем ссылаться на Vue.js, но не стоит переживать, если у вас нет опыта работы с Vue — он не потребуется. Фактически, часть того, что делает Alpine.js таким впечатляющим, заключается в том, что вам вообще не нужно знать JavaScript.

Теперь давайте начнем.

Что Такое Alpine.Js?

По словам автора проекта Caleb Porzio:

«Alpine.js предлагает вам реактивный и декларативный характер больших фреймворков, таких как Vue или React, за гораздо меньшую «стоимость».

Давайте рассмотрим базовый шаблон пользовательского интерфейса, такой как вкладки. Наша конечная цель заключается в том, чтобы, когда пользователь нажимает на вкладку, отображается ее содержимое. В PHP такое легко реализуется, но тогда придется перезагружать всю страницу, что, согласитесь, не очень хорошо.

Со течением времени появились такие замечательные вещи, как jQuery и Bootstrap. В этой ситуации мы создаем прослушиватель событий на вкладке, и когда пользователь щелкает, происходит событие, а мы сообщаем браузеру, что делать.

See the Pen VwvQNPq by Anton (@federro) on CodePen.

Это превосходно работает. Но этот стиль кодирования, когда мы точно сообщаем браузеру, что делать (императивное кодирование), может быть ограничен. Разработчики решили эту проблему, обратившись к таким фреймворкам, как Vue, Angular и React. Они позволяют нам писать более чистый код, используя виртуальный DOM: своего рода зеркало пользовательского интерфейса, хранящегося в памяти браузера. В результате вы «скрываете» элемент DOM (например, вкладку) в одной из этих структур; он не добавляет display:none; атрибут стиля, а вместо этого последний буквально исчезает из «реального» DOM.

Это позволяет нам писать более декларативный код, который будет чище и проще для чтения. Но это может быть ресурсозатратно. Как правило, размер пакета этих фреймворков велик, и для тех, кто пришел из jQuery, кривая обучения кажется невероятно крутой. Особенно, когда все, что вы хотите сделать, это переключать вкладки. И здесь вступает Alpine.js.

Как и Vue и React, Alpine.js позволяет нам писать декларативный код, но использует «реальный» DOM. И весит он всего лишь 6Кб.

Когда стоит использовать Alpine.js?

Мощь Alpine.js заключается в простоте манипулирования DOM. Вспомните о тех вещах, которые вы использовали из коробки с Bootstrap – Alpine.js отлично подходит для них. Примерами здесь могут быть:

• Отображение и скрытие DOM-узлов при определенных условиях,
• Обязательный пользовательский ввод,
• Прослушивание событий и изменение пользовательского интерфейса,
• Добавление классов.

Вы также можете использовать Alpine.js для шаблонов, если ваши данные доступны в JSON, но это тема для отдельной статьи.

Если же ваш проект гораздо масштабнее, то стоит присмотреться к Vue, React и Angular.

Синтаксис Alpine.js почти полностью перенят у Vue.js. Всего существует 13 директив. Мы рассмотрим большинство из них в следующих примерах.

Начнем знакомство

Как во Vue и jQuery, процесс сборки не совершенно необязателен. В отличие от Vue, Alpine.js инициализируется сам, поэтому нет необходимости создавать новый экземпляр. Просто загрузите Alpine, и все готово.

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

Область действия любого данного компонента объявляется с использованием x-data директивы:

<div x-data="{ foo: 'bar' }">...</div>

Захват входных данных пользователя

x-model позволяет нам синхронизировать любой входной элемент со значениями, установленными с помощью x-data. В следующем примере мы устанавливаем значение имени в пустую строку (внутри form тега). Используя x-model, мы привязываем это значение к полю ввода. Используя x-text, мы вводим значение в innerText элемент абзаца.

See the Pen GRpQLNb by Anton (@federro) on CodePen.

Это подчеркивает ключевые различия Alpine.js от jQuery и Vue.js.

Обновление тега абзаца в jQuery потребует от нас прослушивания определенных событий (keyup?), явного определения узла, который мы хотим обновить, и изменений, которые мы хотим внести. Синтаксис Alpine, с другой стороны, просто указывает, что должно произойти. Это то, что подразумевается под декларативным программированием.

Обновление абзаца в Vue, хотя и простое, потребует нового тега script:

new Vue({ el: '#app', data: { name: '' } });

Хотя это может не показаться существенным, однако подчеркивает первую крупную выгоду от Alpine. Здесь нет переключения контекста. Все сделано прямо в HTML — не нужно никакого дополнительного JavaScript.

События по нажатию, логические атрибуты и переключение классов

Как и в случае с Vue, : служит сокращением для x-bind (которое связывает атрибуты) и @ сокращением для x-on (которое указывает, что Alpine должен прослушивать события).

В следующем примере мы создаем экземпляр нового компонента с помощью x-data и устанавливаем значение по умолчанию, равное show false. Когда кнопка нажата, мы переключаем значение show. Когда это значение равно true, мы даем команду Alpine добавить aria-expanded атрибут.

x-bind работает по-разному для классов: мы передаем объект, где ключом является имя класса (active в нашем случае), а значением является логическое выражение (show).

See the Pen gOavywV by Anton (@federro) on CodePen.

Скрытие и показ

Синтаксис показа и скрытия практически идентичен Vue.

See the Pen vYNdMKb by Anton (@federro) on CodePen.

Он установит для данного узла DOM значение display:none. Если вам нужно полностью удалить элемент DOM, то можно использовать x-if. Однако, поскольку Alpine.js не использует Virtual DOM, его x-if можно использовать только для <template></template> тега, который оборачивает скрываемый элемент.

Другие свойства

В дополнение к указанным выше директивам Alpine предоставляет дополнительные функции. Все это будет знакомо тем, кто работает с Vue.js.

• $el извлекает корневой компонент;
• $refs позволяет вам получить элемент DOM;
• $nextTick обеспечивает выполнение выражений только после того, как Alpine.js выполнит свою задачу;
• $event может использоваться для захвата события браузера.

See the Pen qBOxwZK by Anton (@federro) on CodePen.

Давайте создадим что-то полезное с Alpine.js

Пришло время создать что-то для реального проекта. В интересах краткости мы будем использовать стили Bootstrap, но для всего JavaScript использовать Alpine.js. Страница, которую мы создаем, представляет собой простую целевую страницу с контактной формой, отображаемой внутри модального окна, которая отправляется некоторому обработчику формы и отображает приятное сообщение об успехе.

Чтобы это работало, мы могли бы добавить jQuery и Bootstrap.js, но это немного накладные расходы из-за небольшой функциональности. Мы могли бы написать это в Vanilla JS, но для чего? Давайте сделаем так, чтобы это работало с Alpine.js.

Сначала давайте установим область и некоторые начальные значения:

<body class="text-center text-white bg-dark h-100 d-flex flex-column" x-data="{ showModal: false, name: '', email: '', success: false }">

Теперь давайте заставим нашу кнопку устанавливать showModal значение true:

<button class="btn btn-lg btn-secondary" @click="showModal = true" >Get in touch</button>

Когда showModal true, нам нужно отобразить модальный компонент и добавить несколько классов:

<div class="modal  fade text-dark" :class="{ 'show d-block': showModal }" x-show="showModal" role="dialog">

Давайте свяжем входные значения с Alpine:

<input type="text" class="form-control" name="name" x-model="name" >
<input type="email" class="form-control" name="email" x-model="email" >

И отключим кнопку «Отправить», пока эти значения не будут заполнены:

<button type="button" class="btn btn-primary" :disabled="!name || !email">Submit</button>

Наконец, давайте отправим данные в какую-то асинхронную функцию и скроем модальный элемент, когда закончим:

<button type="button" class="btn btn-primary" :disabled="!name || !email" @click="submitForm({name: name, email: email}).then(() => {showModal = false; success= true;})">Submit</button>

И получаем результат.

See the Pen BaoYbJM by Anton (@federro) on CodePen.

Выводы

Если вы создаете настоящий большой проект, то без серьезного фреймворка (Vue, React, Angular), вам вряд ли обойтись. Но если обширный функционал не требуется, то стоит обратить свой взор на Alpine.js. Легковесность и мощь этой библиотеки станут вашими хорошими друзьями.

Еще больше статей в нашем блоге

За главное изображение благодарность Varun