В последнее время фреймворки и библиотеки, которые все знают в веб-разработке, такие как 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 и почему я использую его в проектах, где мне не нужна полноценная платформа для быстрого достижения функциональности с минимальным количеством строк кода.👌 Я приглашаю вас попробовать.
Это моя первая статья, и я надеюсь, что она окажется вам полезной 🧙♂️🪄⭐.