В последнее время фреймворки и библиотеки, которые все знают в веб-разработке, такие как React, Angular и Vue, имеют общий дизайн компонентов, структуры папок и шаблоны проектирования, которые полезны при программировании веб-приложений или веб-сайтов. Знаете, типичные, которые просят компании на вакансии с опытом работы 5+10+20% лет 😉.

Но что, если я хочу приложить дополнительные усилия и получить «простое, но нерушимое заклинание»?

Для этого нам просто нужно немного познакомиться с AlpineJS.

На мой взгляд, эта библиотека замечательна, поскольку она предлагает большую часть функций, которые есть в популярных фреймворках и библиотеках, но с более простым и удобным для пользователя подходом — знаете, потому что меньше значит лучше (подмигивает, подмигивает)😉.

По моему мнению, это похоже на мини-Vue, только в меньшем масштабе, и его можно включить, как классический JQuery (жестко закодированный, не опасаясь успеха XD), что делает эту библиотеку универсальной и позволяет сэкономить много строк кода при их реализации.

Примеры того, где AlpineJS блистает своей простотой, включают в себя: реактивные формы, сохранение состояний компонентов, повторное использование кода, реализацию функций, повышение интерактивности вашей страницы и т. д.

Давайте рассмотрим пример, чтобы вы мне поверили 😎. Вот реализация традиционной формы:

Мы видим, что эта реализация работает для традиционной отправки формы, когда вы нажимаете кнопку, и она отправляется в PHP-скрипт или типичную конечную точку. Но что, если я захочу отправить его в API с помощью JavaScript?

Для этого нам нужно будет добавить идентификатор в каждое поле формы, а затем в событии onsubmit вызвать функцию enviar(), которая отправит данные в API в формате JSON, и дождаться ответа, как мы видим ниже:

Благодаря этому у нас будет функциональный код для отправки регистрационных форм через API.

Однако в нем отсутствуют реактивные поля 📉, которые обновляются по мере ввода. Если мы хотим реализовать это, нам нужно будет добавить прослушиватель событий для каждого изменения, а затем запросить входные данные, чтобы узнать, есть ли новые значения для отправки в наш API.

Но что, если я скажу вам, что есть более короткий способ сделать это?

Именно здесь в игру вступают AlpineJS и его магия 🪄🪄. Все, что вам нужно, это следующее: у вас будет форма с привязкой данных, которая обновляется по мере ввода и передает состояние функциям. 👇

В AlpineJS есть определенные директивы, которые упрощают хранение данных в переменных и использование ярлыков, упрощающих обработку событий. (Для получения дополнительной информации посетите https://alpinejs.dev/start-here)

В примере мы видим директиву x-data. Здесь мы инициализируем объект JSON, содержащий переменные и функции, которые мы будем использовать в нашей реализации.

Мы также используем директиву x-model, которая позволяет нам привязывать переменную к значению поля ввода, обеспечивая привязку данных.

Наконец, мы используем директиву x-on:<event>, которая является одной из моих любимых. Он позволяет вам назначить функцию событию, вызванному элементом, к которому она применена. Это обеспечивает чистый, лаконичный и практичный способ создания современной реализации, которая выглядит свежей и актуальной.

Это всего лишь очень простой пример того, насколько мощным может быть AlpineJS и почему я использую его в проектах, где мне не нужна полноценная платформа для быстрого достижения функциональности с минимальным количеством строк кода.👌 Я приглашаю вас попробовать.

Это моя первая статья, и я надеюсь, что она окажется вам полезной 🧙‍♂️🪄⭐.