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-перший реактивний клієнтський шар без обов’язкової збірки. Для прототипів і маленьких застосунків це може прискорити старт; для великих продуктових стеків це радше експеримент, ніж заміна зрілих каркасів. Дивіться демонстрації, вирішуйте за розміром задачі — і не плутайте простоту старту з готовністю до довгої підтримки.