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

JavaScriptHTML


Что такое 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.
Tags:javascriptdom
Hubs: JavaScript HTML
+24
9.8k 69
Comments 25

Popular right now

Top of the last 24 hours