Improving update granularity

[thipages]

Hi,
Currently and if I understand well, updates thanks to DOM method of Dominus

1. happen at the territory level (ie as a child of an existing Dom element, ultimately at the body level : DOM.add ("element", "body"); )
2. Only those elements are considered for update and the update is a full HTML replacement through innerHTML Dom property.
3. Also the underscore convention (eg element_input) allows to get the right root element (element) and update from that root if exists.

I have thought about another (complementary) way of updating DOM with more granularity but this requires additional concept. The idea is to use the HTML key (HTML[html_key]) as the id of the tag. This could be

• either chosen as an attribute (not ideal)
• or calculated as a UID (better)
• or both

The usage could be like this (if calculated)

var DOM = new Dominus();
// UID is generated behind the scene creating HTML[generatedUID] corresponding to myElement
var myElement = DOM.element ({tag:'div',class:'myClass'}); 
DOM.class.add(myElement.id, 'myClass2'); // or simplier DOM.class.add(myElement, 'myClass2');

In the proxy process, update could then be managed by the function replaceChild
replacedNode = parentNode.replaceChild(newChild, oldChild); with parentNode=oldChild

What do you think? (hope I was clear)

[Gurigraphics]

Change only the "element that change" I think that is the "react.js" approach:

<div id="parent">
  <div id="child">10</div>  // change html to 11
</div>

-----------------------

<div id="parent">
  <div id="child">11</div> // updated only this child
</div>

Dominus is you who decides the granularity of the update.

<div id="parent"></div>

HTML.child ={
  id="child"
  html="10"
}
DOM.add("child", "#parent")

-----------------------

HTML.child.html = 11

<div id="parent">
  <div id="child">11</div> // updated only this child
</div>

In project design you decide what needs to change or not:

<div id="parent-area-imutable">
<div id="parent-area-mutable">
    <div id="child" class="child-mutable">10</div>  
</div>
<div class="child-imutable">11</div>  
<div class="child-imutable">12</div>  
<div class="child-imutable">13</div>  
</div>

To do this create different group modules for separate update:

HTML.header ={}
HTML.footer ={}
Etc

• Treating everything as "mutable" generates unnecessary processing, when there are elements that never change.

• Similarly, treating an entire group as "mutable" generates unnecessary redraw, when only one element in the group changes.

So they really are different approaches.
It takes a very specific project to know when the advantage is greater.
In most cases are milliseconds of difference.

[thipages]

Dominus is you who decides the granularity of the update.

Clear this is the territory concept.
And currently the code needs to wrap a territory with "hard" html, correct?

If this is correct, why not doing it dynamically in order to avoid writing "hard" wrapper just saying reload yourself without hard wrapper?
It seems to me that this is complementary and keep Dominus philosophy.

I may be wrong...

[thipages]

I start to understand if

Treating everything as "mutable" generates unnecessary processing, when there are elements that never change.

is linked with the processing of replaceChild method. Is this correct?

[Gurigraphics]

replaceChild is not the problem. The problem is to create a "real virtual DOM" with hierarchy of trees childs inside childs, to know who's child or parent, and where this element is located.

Imagine the object:
HTML.level1.level2.level3 = {}
Now change:
HTML.level1.level2.level3 = 90
Check the contents of "target":
PROXY.set( target, key, value ) {
console.log( target )
}

How would you know the parent of this key?
And after get ID, get element content and append by id or class?

I did not understand this: "avoid writing" hard "wrapper" .

I just use JSON.stringify. I transform the object into a string, compare it to the previous string and know which object it has changed or not to update or no.

[thipages]

I am going to sleep on it. Lets see

[thipages]

I have so much to say. I try to catch one item

How would you know the parent of this key?

Currently, I understand that Dominus needs the parent in order to update all levels (1, 2 and 3)
-> But only level 3 is concerned by the update in the above example

I think we dont need the parent because we need to update only what has changed, ie level3
-> Knowing the key, we have the id and with replaceChild, we can update level3 only
-> But we loose the hierarchical real virtual Dom, correct

Example (playcode here)

var DOM=new Dominus();
var HTML = DOM.HTML();
var count=0;

HTML.l1={html:"l1_l2"};
HTML.l1_l2={html:"l1_l2_l3"};
HTML.l1_l2_l3={html:"Start", onclick:"update()"};

DOM.add("l1", "#app");

function update() {
  console.log(count)
  count++;
  HTML.l1_l2_l3.html="update"+count;
}

Every time you click, logs show

Changed path: l1_l2_l3
Updated path: l1

so eveything is updated l1 : parent replaces its innerhtml property and recreates l1, l2, l3 html code

[Gurigraphics]

Other Example:

HTML.header_level2 = [
 { tag:"li", id: "header_level2", html: "content_2" }, 
]

HTML.header_level1 = [
 { tag:"ul", id: "header_level1", html: "header_level2" }, 
]

HTML.header = {
  tag: "div",
  id: "header", 
  class: "header",
  html: "header_level1"
};

DOM.add("header", "#app");

The HTML

<div id="app">
  <div id="header" class="header">
    <ul id="header_level1">
   	<li id="header_level2">content_2</li>
    </ul>
  </div>
</div>

The change

HTML.header.tag = "ul"

The proxy change

set( target, key, value ) {
      this.keys = {};
      target[ key ] = value   
      
 console.log( target.id ) // header

Then, "HTML.header" has changed

Then, now need replace "HTML.header" and "HTML.header_level1" and "HTML.header_level2",
because this all is inside "HTML.header".
This is the original approach.

The other change

HTML.header_level2.tag = "div"

The proxy change

set( target, key, value ) {
      this.keys = {};
      target[ key ] = value   
      
 console.log( target.id ) // header_level2

Then, "HTML.header_level2" has changed

Now, need replace only "HTML.header_level2" inside "HTML.header_level1"

DOM.get( "#header_level1" ).innerHTML = MOD.mount("header_level2")

Is that the idea?

[thipages]

Yes !
But Thats only ONE point that I propose to change.
The other one is to update independently of Dom hierarchy

[Gurigraphics]

As independently ?

<div id="app">
  <div id="header" class="header">
    <ul id="header_level1">
   	<li id="header_level2">content_2</li>
    </ul>
  </div>
</div>

header_level2 is inside header_level1
And this information needs to be found somewhere to append in this local.

[thipages]

no matter with the ID equals to the HTML_key

var DOM = new Dominus();
// UID is generated behind the scene creating HTML[generatedUID] corresponding to myElement
var myElement = DOM.element ({tag:'div',class:'myClass'}); 
DOM.class.add(myElement.id, 'myClass2'); // or simplier DOM.class.add(myElement, 'myClass2');

[Gurigraphics]

When an element changes, it changes inside a local: body, #app, div, etc.

<div id="1">
<div id="2"></div>
</div>

And you need to know that "2" is inside of "1" and no inside in "#app".

AddClass is like this:

Time 1 get parent

<div id="1">
<div id="2"></div>
</div>

Time 2 delete old child

<div id="1">
</div>

Time 3 add new child

<div id="1">
<div id="2" class="myClass2"></div>
</div>

So, change 2, also change 1. Because this is inside and is not independent.

[thipages]

This is exactly what I propose to improve
I propose you that you code the first point

DOM.get( "#header_level1" ).innerHTML = MOD.mount("header_level2")

Then I will propose you a pull request for the second for review

[Gurigraphics]

Other example:

<div id="a0">
  <div id="a1"></div>
  <div id="a2"></div>
  <div id="a3"></div>
</div>

Replace class is simple. Is native:

document.getElementById("a2").classList.add('MyClass');

Is like:

DOM.get("#a2").classList.add('MyClass');

However, this only changes in the DOM.
So you do not have control of the state of the application.
Because this information does not save on any object.

And changing "tag" is different.

If change element "a2" for tag "ul", you no can simply inner or append or prepend in "a0".
Because you need to know the other childs.
Otherwise it will append in the wrong place or will delete them.
And you do not have this information in this object "a2" .

[thipages]

ok, I see the point. Next step, so?

[Gurigraphics]

My conclusion is that the two extremes are wrong.

• Can not update everything
• Can not update only the element.

Then, always that "child" change -> re-render "parent" and all "childs".

And you can know that by name.

header_element
header_element_child1
header_element_child1_child2
header_element_child1_child2_child3

If change:
"header_element_child1_child2_child3"
Then, re-render:
"header_element_child1_child2"
And no all group like before.