Что такое 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, но как мне показалось — код сильно избыточен, поэтому я сделал свое:
Мой ToDo (DiffHTML, Babel DiffHTML tag transformer, Redux)
Вывод
Библиотека сырая, но она мне нравится так как проста и не требует радикальных изменений в давно привычном подходе обновлять все внутри контейнера. Для продакшена брать уж точно не стоит, но попробовать можно. Даже просто для того чтобы проверить как оно работает, и может быть помочь с поиском багов.
Будет очень кстати, если кто то возьмется померять производительность.
» Github: github.com/tbranyen/diffhtml
» Issues: github.com/tbranyen/diffhtml/issues
Спасибо за чтение!
Update: в комментариях подсказали, что еще есть аналог — morphdom (и форк).
Update 2: в одном из комментариев продолжил идею об уходе от работы напрямую с DOM к работе исключительно с шаблонами. Пересобрать HTML-строку всего приложения из шаблонов не так дорого, и пусть DiffHTML посчитает разницу и внесет изменения в DOM.