Reactivity without Virtual DOM on the example of cample.js beta versions

Hello! In this short article, I would like to share my thoughts on reactivity without a virtual DOM.

I think that this is a very promising technology that will allow you to redraw the UI as quickly as possible without comparing node elements. At its core, the virtual DOM involves a comparison process, which helps JS understand when to update a node and when not.

This is a good technology and in the first beta versions of cample.js it was specifically implemented, but during development I came to understand that the virtual DOM has a collective effect that slows down the redrawing work, because you need to store large objects that describe the DOM or the nodes themselves.

if(isDeepEqualNode(this._dynamic.oldNode, e)){
 ...redraw
}

sample code version 2.0.0-beta.2

I may not have much experience, but I think it is in my opinion, this is so.

I think it's possible to compress an element's node object as much as possible so that the Virtual DOM runs faster, but still leaves the basis of object comparison. And this basis has a speed limit.

But, nevertheless, the virtual DOM is very convenient, especially when working with string interpolation. This will keep track of the newly added interpolation in the DOM, which will allow the UI to be redrawn, thus making development easier.

<div>{{dynamicData}}</div>

string interpolation example

Also, there is a big problem and opportunity in reactivity without virtual DOM, because in essence, the render happens once.

class Component{

render(){
 render();
 ...do a render once and work with the first nodes
}

}

sample code version 2.0.0-beta.3

Thus, that possibility of reRender with string interpolation disappears, which is not cool.

Therefore, there is a big plus in working with the Virtual DOM, and given that the Virtual DOM can still be really, if not faster, then almost equal in speed, then there is already a selection process when developing a framework.

Yes, you can try to add new elements to the nodes array of the first render, but then it becomes necessary to monitor changes in the DOM, which, again, mainly leads to the creation of the Virtual DOM.

And this, I think, is a big minus of the technology of redrawing without the Virtual DOM.

Summing up, I think that each technology has its pros and cons. Yes, processing without Virtual DOM is faster, but it has its drawbacks, which I described above. Here a big role is played by the project under which the work with this or that tool is going on.

P.S. Thank you all for reading! Perhaps I do not know much, but I think that these thoughts may have a place to be. And what do you think?