Mador: крошечная реактивная DOM-библиотека на 855 байт
На Show HN опубликовали Mador, небольшую библиотеку, которая делает обычный DOM реактивным без фреймворка, компонентов, шаблонов и виртуального DOM. Состояние создаётся вызовом mador() с объектом начальных значений и возвращает пару функций read и write на основе Proxy: через них читают и меняют данные.
Чтобы связать состояние с элементами страницы, используется функция read(selector, update, read): первый аргумент, CSS-селектор нужных элементов, второй, функция, которая обновляет каждый найденный элемент, третий, функция, которая указывает, какое именно свойство состояния читать. Mador сам отслеживает, какие свойства состояния использует привязка, и пересчитывает её только тогда, когда именно эти свойства изменились, то есть одну и ту же переменную состояния можно независимо привязать сразу к нескольким элементам с разной логикой отображения.
Менять состояние можно только через write(): все изменения, сделанные внутри одного вызова write, объединяются и обрабатываются вместе (батчинг), а не по одному. Привязки жёстко связаны с конкретными DOM-элементами: если элементы, к которым была сделана привязка, исчезают со страницы, Mador сам убирает соответствующий реактивный обработчик, управлять жизненным циклом компонентов вручную не нужно, потому что самих компонентов в этой модели нет.
Автор описывает Mador как инструмент для страниц, где уже есть готовая HTML-разметка и немного JavaScript и не хватает только точечной реактивности, то есть не как замену полноценным фреймворкам, а как более лёгкую альтернативу для случаев, когда фреймворк избыточен. Библиотека распространяется как нативный ES-модуль: её можно поставить через npm или подключить напрямую с CDN по прямой ссылке, без сборки и без глобального рантайма на странице. В минифицированном виде рантайм весит около 855 байт. Лицензия, MIT.
Ключевые факты
- Mador даёт реактивное состояние через Proxy-пару [read, write] и привязывает его напрямую к существующим DOM-элементам, без виртуального DOM
- Привязка read(selector, update, read) сама отслеживает, какие свойства состояния использует функция, и пересчитывает элемент только при изменении именно этих свойств
- Менять состояние можно только через write(); несколько изменений внутри одного вызова write объединяются и обрабатываются вместе (батчинг)
- Когда привязанные элементы исчезают из DOM, Mador сам убирает соответствующий реактивный обработчик, управлять жизненным циклом компонентов не нужно
- Минифицированный рантайм весит около 855 байт, распространяется как ES-модуль через npm или CDN и не требует шага сборки
Почему это важно
Большинство современных инструментов реактивности приходят вместе с целым фреймворком, компонентами, виртуальным DOM, системой сборки. Mador предлагает противоположный подход: взять готовую HTML-страницу с обычным JavaScript и добавить к ней только реактивные привязки, не переписывая структуру страницы под чужую модель компонентов. Это заметно в самой философии проекта: автор прямо говорит, что не всякой странице нужен фреймворк, иногда нужна лишь немного реактивности поверх того, что уже есть.
Кому это важно
В первую очередь, разработчикам, которые ведут страницы на простом HTML и JavaScript без сборки (лендинги, виджеты, небольшие интерфейсы, постепенно дополняемые интерактивностью) и не хотят тянуть в такой проект React, Vue или другой фреймворк ради пары динамических счётчиков или переключателей. Библиотека также интересна тем, кто оценивает вес фронтенд-зависимостей: 855 байт в минифицированном виде, это на порядки меньше типичного фреймворка.
Как это применить
Библиотеку ставят через npm или подключают прямо в браузере как ES-модуль по CDN-ссылке, сборка и отдельный рантайм на странице не нужны. Состояние создаётся вызовом mador() с объектом начальных значений, который возвращает пару функций read и write. Функцией read(selector, update, read) элементы страницы, найденные по селектору, привязываются к нужному кусочку состояния и функции его отображения; изменения вносятся только через write(), и несколько правок внутри одного вызова write обрабатываются как одна пакетная операция.
Можно ли доверять
Материал, это описание проекта его же автором на Show HN, и источник не даёт возможности проверить сторонние оценки: в тексте нет номера версии, даты выпуска, имени автора, организации за проектом, а также сравнений с другими библиотеками, бенчмарков производительности или заявлений о поддержке браузеров. Технически описание внутренне последовательно и совпадает с тем, что видно в самом коде примеров, но независимой проверки заявленных 855 байт или зрелости проекта источник не содержит.
Риски и подводные камни
Проект свежий и, судя по формату публикации, поддерживается силами одного автора, источник не сообщает ни о команде, ни о процессе сопровождения, ни о том, насколько стабилен API. Без сравнения с похожими решениями и без данных о совместимости с браузерами по тексту трудно судить, какие компромиссы стоят за компактным размером, например, как библиотека ведёт себя на больших объёмах состояния или в сложных сценариях привязки.
«Нет ни компонентов, ни шаблонов, ни виртуального DOM. Mador работает с тем DOM, который уже есть.»
— из описания проекта Mador