Когда тебе нужен фронтенд с динамикой, но Vue/React — это перебор, а jQuery уже попахивает дедовщиной, выручает Alpine.js. Он примитивный, но как раз в этом и кайф. Написал пару строчек — и у тебя «реактивность». Никаких webpack’ов, package.json и прочего балагана.

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="taskApp()" x-init="init()">
    <input type="text" x-model="newTask" @keydown.enter="addTask()" placeholder="Добавить задачу">
    <ul>
      <template x-for="task in tasks" :key="task.id">
        <li>
          <input type="checkbox" x-model="task.completed">
          <span x-text="task.text"></span>
          <button @click="removeTask(task.id)">Удалить</button>
        </li>
      </template>
    </ul>
  </div>
</body>
</html>

JS-логика

А вот и мозги всего этого:

<script>
function taskApp() {
  return {
    tasks: [],
    newTask: '',
    init() {
      // Если хочешь — подключи localStorage
    },
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({ id: Date.now(), text: this.newTask, completed: false });
        this.newTask = '';
      }
    },
    removeTask(id) {
      this.tasks = this.tasks.filter(task => task.id !== id);
    }
  }
}
</script>

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

  1. Пишешь задачу → жмёшь Enter.
  2. Она падает в список.
  3. Жмёшь чекбокс — ставится «выполнено».
  4. Жмёшь «Удалить» — задача улетает.

Код умещается на одном экране, никакой магии.

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

  • localStorage руками. Alpine сам за тебя ничего не сохранит, так что если хочешь помнить задачи после перезагрузки — пиши пару строк.
  • Сложные кейсы? Забудь. Alpine — это для мелочёвки: модалки, аккордеоны, формы, вот такие списки. Не строй на нём CRM.
  • Версии. Alpine 2 и 3 отличаются, так что проверяй доки, если что-то не работает.

Итог

Alpine.js — это когда тебе лень тащить тяжёлый фреймворк, но хочется хоть какой-то реактивности. Todo-лист на нём собирается быстрее, чем чайник закипает. А дальше ты сам решаешь: либо оставляешь всё так, либо переходишь на «взрослые» решения.