Voodoo.js: реактивность и map/filter прямо в обычном HTML

HTML-первый каркас без сборщика: один script, реактивная разметка и JSX-стиль внутри обычной страницы.

Опубликовано: 4 сентября 2026 г.

Теги

Содержание

Коротко

Автор Voodoo.js на Dev.to предлагает писать реактивные интерфейсы, списки через map / filter / sort, компоненты и даже синтаксис в духе JSX прямо в обычном HTML-файле. Каркас заточен под разработчиков, которым нужны современные возможности клиентской части без тяжёлой цепочки инструментов: один тег script, без сборщика, компилятора, конфигов и каркаса проекта. HTML остаётся центром приложения; реактивный слой наращивается вокруг уже существующей разметки, а не наоборот.

Что произошло

Идея звучит просто: открыть .html, подключить Voodoo.js и сразу работать с реактивными данными, событиями, выражениями, формами, HTTP-утилитами и шаблонами в стиле JSX. В примере на складе товары фильтруют по остатку, сортируют и рисуют список через знакомые методы массива — при этом файл остаётся обычной HTML-страницей, а не отдельным «приложением на сборке».

Для тех, кто пришёл из React, Vue, Alpine или «ванильного» JavaScript, синтаксис узнаваем. Философия другая: не вытаскивать разметку в чужую структуру приложения, а оставить HTML первичным. Автор явно целится в прототипы, небольшие продукты, внутренние панели, статические сайты и эксперименты — туда, где цена настройки Vite/Webpack уже больше пользы от каркаса.

Отдельно сделана интерактивная площадка в браузере: правите HTML, запускаете пример и сразу видите живой предварительный просмотр. Есть демонстрация с JSX-map, сайт проекта и репозиторий на GitHub. Проект с открытым кодом и ещё развивается; автор просит отзывы и звёзды, а в тексте задаёт вопрос сообществу: готовы ли вы к JSX/TSX-стилю внутри HTML, если взамен исчезает шаг сборки.

Почему это важно

За последние годы «минимальная клиентская часть» часто означала всё равно старт с шаблона, зависимостей и конфигов. Для учебного стенда, посадочной страницы с лёгкой динамикой или внутренней формы это раздувает цикл «открыл файл — увидел результат». Voodoo.js напоминает о другом полюсе: браузер как среда, HTML как источник истины, реактивность как надстройка.

Это не заявка заменить React в большой команде с дизайн-системой и серверным рендерингом. Скорее это проверка гипотезы: можно ли вернуть привычные map/filter и компонентный стиль без обязательного пакета сборки. Для наставников, независимых разработчиков и команд с кучей мелких HTML-страниц такой подход снижает порог входа. Риск обратный — размытая граница «просто страница» / «уже приложение» и зависимость от молодого API, которое ещё меняется.

На практике

Для прототипа или внутреннего инструмента сначала оцените, хватит ли одного HTML + Voodoo.js вместо нового репозитория со сборкой.
Держите разметку читаемой: реактивные выражения и цепочки filter → sort → map удобны, но длинные блоки в HTML быстро теряют обзорность — выносите повторы в компоненты каркаса.
Если команда уже на React/Vue с единой цепочкой выкладки — не тащите Voodoo.js «ради простоты» в ту же рабочую среду; оставляйте его для изолированных страниц.
Перед выкладкой в бой проверьте площадку автора и репозиторий: версию API, поддержку форм/HTTP и то, как обрабатываются ошибки в выражениях.
Для статического хостинга модель «один файл + CDN-скрипт» упрощает выкладку; заранее решите, где живут данные (встроенный JSON, отдельный API) и как обновлять страницу без сборки.
Сравнивайте с Alpine и «ванильным» JavaScript: если хватает точечных директив — возможно, новый каркас не нужен; если хочется ощущения JSX без сборки — имеет смысл попробовать песочницу.

Итог

Voodoo.js — ставка на HTML-первый реактивный клиентский слой без обязательной сборки. Для прототипов и маленьких приложений это может ускорить старт; для крупных продуктовых стеков это скорее эксперимент, чем замена зрелых каркасов. Смотрите демонстрации, решайте по размеру задачи — и не путайте простоту старта с готовностью к долгой поддержке.