Что такое DiffHTML.js?
DiffHTML — эта утилита для патчинга (частичного изменения) DOM-дерева. Она умеет находить разницу между существующим DOM-деревом и HTML-строкой, между двумя деревьями. В результате будут произведены только те изменения, которые реально имеют место быть. Те элементы которых не было — вставятся, атрибуты которые были реально изменены — изменятся, и только они. Остальные элементы останутся без изменений.
Зачем это?
Просто чтобы не трогать те элементы в которых не было изменений. Это в теории дешевле, чем ре-рендерить полностью все дерево.
Как же React.JS?
React делает почти тоже самое, но у DiffHTML есть существенный козырь — эта библиотека по-умолчанию не требует практически никакой инфраструктуры вокруг себя. Ни сборки, ни специальных трансформаций в реакт-объекты. Вы просто можете сделать следующее:
diff.innerHTML(document.body, '<h1>Hello world!</h1>');
и объект появится в DOM-дереве. Далее…
diff.innerHTML(document.body, '<h1 class=”title”>Hello world!</h1>');
и только атрибут class будет добавлен. Просто добавим параграф:
diff.innerHTML(document.body, '<h1 class=”title”>Hello world!</h1><p>Dear, World!</p>');
В общем идея очень простая и в то же время достаточно мощная.
Минусы (готовность для продакшена)
- Проект молодой, поэтому здесь баги — это нормально
- Проблемы с навешиванием событий (старые события автоматически не удаляются)
- Нет большого количества информации вокруг этой библиотеки
Плюсы
- В теории, быстрей простой перерисовки всех элементов внутри контейнера
- Есть middleware, можно контролировать проецес патчинга
- Есть подобие Virtual DOM, можно писать React-like шаблоны
- Меньше проводить времени с точечными модификациями DOM-дерева вручную
- Отзывчивый разработчик
Где применять?
Лично я вижу сферы применения:
- В старом коде, работающем на базе традиционных шаблонов и
el.innerHTMLвставки, можно добиться ускорения производительности - Для сложных SaaS виджетов, где важен размер подключаемых библиотек
- Для pet-проектов, где React избыточен, но на Vanilla.JS уже не хочется
А ToDo?
Есть ToDo: github.com/tbranyen/todomvc, но как мне показалось — код сильно избыточен, поэтому я сделал свое:
Мое ToDo: github.com/jmas/htmldiff-todo (DiffHTML, Babel DiffHTML tag transformer, Redux)
Вывод
Библиотека сырая, но тем не менее она мне нравится потому что простая и не требует радикальных изменений для старого (для кого то давно ставшего привычным) подхода обновлять все внутри контейнера. Для продакшена брать уж точно не стоит, но попробовать можно. Даже просто для того чтобы проверить как оно работает, и может быть помочь с поиском багов.
Будет очень кстати, если кто то возьмется померять производительность.
Github: github.com/tbranyen/diffhtml
Issues: github.com/tbranyen/diffhtml/issues
Спасибо за чтение!
Update
В комментариях подсказали, что еще есть аналог — morphdom (и форк).
Автор: jMas
