DiffHTML.js — утилита для патчинга DOM

Что такое 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.