ELI5 Memoized DOM

There have been many, many DOMs – Incremental DOM, Shadow DOM, Virtual DOM – But I'm not sure what the Memoized DOM is. I know what memoization is, and as far as my searches tell me that "DOM memoizing is caching the work of functions that modify the DOM". So isn't that supposed to be similar to VDOM?

Comments

[Keff]

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:

let number = 1
let bool = false

tag App
    <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.
*/
let number = 1;
let bool = false;

class App extends HTMLImbaElement {
    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 checks
        if($.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.

I found this here, worth a read!

[Siddharth]

Thanks a lot man, makes perfect sense!

[Ivan Jeremic]

I heard a few weeks ago that a framework which I can remember which one use tagged template literals for html and that the tag htm'' does something to the string which is similar what vdom does but it does it on the fly somehow and without needing a vdom maybe this is something similar.