What is diffhtml.js?

DiffHTML - this utility for patching (partial modification) of the DOM tree. She knows how to find the difference between an existing DOM tree and an HTML string, between two trees. As a result, only those changes that really take place will be made. Those elements that were not there - will be inserted, the attributes that were really changed - will change, and only they. The remaining elements will remain unchanged.

Why is this?

Just so as not to touch those elements in which there were no changes. This is in theory cheaper than re-rendering the entire tree.

What about React.JS?

React does almost the same thing, but DiffHTML has a significant trump card - this library by default does not require almost any infrastructure around it. Neither assembly, nor special transformations into react objects. You can simply do the following:

diff.innerHTML(document.body, '
Hello world!
');

And the object will appear in the DOM tree. Further…

diff.innerHTML(document.body, '
Hello world!
');

And only the class attribute will be added. Just add a paragraph:

diff.innerHTML(document.body, '
Hello world!
Dear, World!
');

In general, the idea is very simple and at the same time quite powerful.

Cons (readiness for production)

• The project is young, so bugs are normal here.
• Problems with hanging events (old events are not automatically deleted)
• There is not much information around this library.
• No benchmarks

pros

• In theory, faster than simply redrawing all the elements inside the container
• There is middleware, you can control the patch process
• There is a semblance of Virtual DOM, you can write React-like templates
• Spend less time with point modifications of the DOM tree manually
• Responsive Developer

Where to apply?

Personally, I see areas of application:

• In old code, based on traditional templates and el.innerHTMLinserts, you can achieve faster performance
• For complex SaaS widgets where the size of the connected libraries is important
• For pet projects where React is redundant, but on Vanilla.JS I don’t feel like it anymore

What about ToDo?

There is ToDo , but it seemed to me - the code is very redundant, so I did

mine : My ToDo (DiffHTML, Babel DiffHTML tag transformer, Redux)

Conclusion

The library is raw, but I like it because it is simple and does not require radical changes in the long-familiar approach to update everything inside the container. It’s definitely not worth taking for production, but you can try. Even just to check how it works, and can be of help with finding bugs.

It will be very useful if someone undertakes to measure performance.

» Github: github.com/tbranyen/diffhtml
» Issues: github.com/tbranyen/diffhtml/issues

Thanks for reading!

Update: in the comments they suggested that there is still an analogue - morphdom (and fork ).

Update 2:in one of the comments he continued the idea of ​​avoiding working directly with the DOM to work exclusively with templates. Reassembling the HTML string of the entire application from the templates is not so expensive, and let DiffHTML calculate the difference and make changes to the DOM.