DEV Community

Discussion on: DOM performance case study

Collapse
 
areknawo profile image
Arek Nawo

Skipping the virtual DOM indeed gives you a performance boost. But there are complex cases in which it needs to be really well executed in order to do so. Aside from that, Svelte is on the rise, and I really like the lit-html template string approach. I somewhat even implemented it in my own framework. 👍

View(() => {
    return Node(({ classes, state, styles, on }) => {
        state({ color: "red" }, true)
        on("created", () => {
            setTimeout(() => {
                state.set("color", "green");
            }, 1000);
        });

        return `<h4 ${styles({
            color: state.get("color")
        })}${classes([
            "hello"
        ])}>Hello World!</h4>`;
    });
}).render();
Collapse
 
mateiadrielrafael profile image
Matei Adriel

Maybe you'd want to create a function which does nothing called html to allow the lit-html vscode extensions to highlight the html

Thread Thread
 
areknawo profile image
Arek Nawo

I considered that, but by doing this I lose access to the arguments, (like style and classes), which can be used in pretty interesting ways.