DiffHTML.js - DOM Patching Utility

What is DiffHTML.js?

DiffHTML is a utility for patching (partially modifying) a DOM tree. It can find the difference between an existing DOM tree and an HTML string, between two trees. As a result, only those changes that actually take place will be made. Those elements of which were not - will be inserted, the attributes that were really changed - will change, and only they. The remaining items will remain unchanged.

Why is this?

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

How is React.JS?

React does almost the same thing, but DiffHTML has a significant trump card - by default this library does not require almost any infrastructure around it. No assembly, no special transformations in the reactor objects. You can simply do the following:
')

diff.innerHTML(document.body, '<h1>Hello world!</h1>'); 

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

 diff.innerHTML(document.body, '<h1 class=”title”>Hello world!</h1>'); 

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

 diff.innerHTML(document.body, '<h1 class=”title”>Hello world!</h1><p>Dear, World!</p>'); 

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

Cons (ready for production)

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

pros

• In theory, quicker simple redrawing of all elements inside the container
• There are middleware, it is possible to control the process of patching
• There is a semblance of Virtual DOM, you can write React-like templates
• Spend less time with dot modifications of the DOM tree manually
• Responsive developer

Where to apply?

Personally, I see the scope:

• In the old code that works on the basis of traditional templates and el.innerHTML inserts, you can accelerate the performance
• For complex SaaS widgets where the size of the link libraries is important
• For pet projects where React is redundant, but you don’t want to go to Vanilla.JS

And ToDo?

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

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

Conclusion

The library is damp, but I like it because it is simple and does not require radical changes in the long-customary 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 maybe help with finding bugs.

It will be very helpful if someone takes the measure of performance.

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

Thank you for reading!

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

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