Alpine.js — это как дешёвый нож: маленький, лёгкий, режет всё подряд, но не пытайся строгать им дуб. Для мелких штук он идеален: показать/скрыть блок, сделать модалку или вот форму с валидацией. Давай соберём простую форму: имя, email, валидация, сообщение пользователю. Всё это без Vue/React и без «SPA-архитектуры ради кнопки».

Задача уровня «студент-практикант»: есть форма, надо проверить, что поля не пустые и, если норм, показать сообщение. На Vue/React это три файла и миллион импортов. На Alpine — один HTML.

HTML-скелет

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Форма с Alpine.js</title>
  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
  <div x-data="formHandler()">
    <form @submit.prevent="submitForm">
      <input type="text" x-model="form.name" placeholder="Имя">
      <input type="email" x-model="form.email" placeholder="Email">
      <button type="submit">Отправить</button>
    </form>

    <div x-show="message" x-text="message"></div>
  </div>
</body>
</html>

JS-логика

<script>
function formHandler() {
  return {
    form: {
      name: '',
      email: ''
    },
    message: '',
    submitForm() {
      if (!this.form.name || !this.form.email) {
        this.message = 'Заполни все поля.';
        return;
      }

      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.email)) {
        this.message = 'Email кривой.';
        return;
      }

      this.message = 'Форма успешно отправлена!';
      // Тут можно бахнуть fetch() и реально отправить данные на сервер
    }
  }
}
</script>

Что получилось

  1. Не заполнил имя или email → получаешь в лицо сообщение «Заполни все поля».
  2. Вбил кривой email → получаешь «Email кривой».
  3. Всё норм → «Форма успешно отправлена!».

И всё это без отдельного JS-файла, без build-систем и без лишних библиотек.

Подводные камни

  • Валидация примитивная. Regex для email — так себе проверка, но для демо норм.
  • Сервер не обманешь. Всё это только фронт. Настоящая валидация должна быть и на бэке.
  • UI голый. Alpine не даст тебе готовых «красных рамочек», всё стилизуешь руками.

Итог

Alpine.js — это про мелкие интерактивные штуки без боли. Форма с валидацией собирается быстрее, чем ты успеешь открыть документацию по React. Но помни: это инструмент не для «порталов с миллионом полей», а для простых сценариев. Если проект растёт — не пытайся натянуть Alpine на глобальный процесс, возьми нормальный фреймворк.