Ohh interesting, I did not know about Memoized DOM. I have been reading and somewhat understand how it works. Let me try to break it down a bit for you.
What they claim is, that instead of returning a tree each time render is called, and then performing the diffing against the VDOM. What they do is, depending if it's the first time rendering or subsequent calls to render, they execute one logic or another. For example the first render some mor work is needed to setup the dom and such, after that only some things need to be updated. They update the dom directly. Let see one of their examples:
For example take this Imba code:
letnumber=1letbool=falsetagApp<self.ready=bool><h1.header> "Number is {number}"
This would compile down to something resembling this pseudocode:
/*
This is handcrafted pseudocode – the real imba output is
more optimised and compact, making it a little harder to
understand.
*/letnumber=1;letbool=false;classAppextendsHTMLImbaElement{render(){var$=(this.cache||this.cache={});// toggle the class name on the App element - based on// value of bool, and cache the valua for later checksif($.val!=bool)this.classList.toggle('ready',$.val=bool)if(!$.rendered){$.h1=this.appendChild('h1')// add h1 and cache element$.h1.className="header";// only on first render$.h1.insertText("Number is ");// only on first render$.t1=h1.insertText(number);// add text and cache textnode}else{// has been rendered previously, not much to do!$.t1.textContent=number;// update the text of the textnode}$.rendered=true;// mark App as rendered// nothing is returned from render}};
If you follow the pseudocode, you can clearly see this in action. If the component is not rendered, it will build the DOM elements. After that only the textContent is updated. And if you notice, the dom is directly manipulated.
I don't know exactly where the Memoized label comes from though 🤷♂️ I have not research as much, so I might have missed something.
Ohh interesting, I did not know about Memoized DOM. I have been reading and somewhat understand how it works. Let me try to break it down a bit for you.
What they claim is, that instead of returning a tree each time render is called, and then performing the diffing against the VDOM. What they do is, depending if it's the first time rendering or subsequent calls to render, they execute one logic or another. For example the first render some mor work is needed to setup the dom and such, after that only some things need to be updated. They update the dom directly. Let see one of their examples:
For example take this Imba code:
This would compile down to something resembling this pseudocode:
If you follow the pseudocode, you can clearly see this in action. If the component is not rendered, it will build the DOM elements. After that only the textContent is updated. And if you notice, the dom is directly manipulated.
I don't know exactly where the Memoized label comes from though 🤷♂️ I have not research as much, so I might have missed something.
I found this here, worth a read!
Thanks a lot man, makes perfect sense!