DEV Community

Discussion on: Why Virtual DOM?

 
woojoo666 profile image
woojoo666

but you wouldn't need MillionJS if you used a framework like Svelte. So what advantages do runtime-based frameworks (like VDOM frameworks) have over compile-time frameworks (like Svelte)?

Thread Thread
 
aidenybai profile image
Aiden Bai

VDOM is not a framework. Generally speaking VDOM is not used by the average user, rather it's a engine to build frameworks off of.

Thread Thread
 
woojoo666 profile image
woojoo666

I understand that, but by VDOM i meant virtual-dom frameworks like React and Vue. There are also frameworks like Angular which don't use virtual dom but are still runtime frameworks.

The reason why I asked is because it looks like MillionJS is an engine that people can use to build more virtual-dom frameworks. But if compile-time frameworks like Svelte are the future, why would one want to build another runtime framework?

Thread Thread
 
aidenybai profile image
Aiden Bai • Edited

It's very difficult to broadly claim that Svelte is the future, but I 100% agree that compile-time frameworks are the future. Million.js is like the intersection between VDOM + compile-time, as it can be further optimized through compile time and is aware of the compiler. Virtual DOM is super, super powerful in terms of declarative programming, and combining the two can achieve the best of both worlds.

Thread Thread
 
woojoo666 profile image
woojoo666 • Edited

well I guess the way I see it, virtual doms wont be needed when we move to compile time frameworks. The name "virtual dom" comes from the fact that it's an in-memory representation of the DOM. But this just adds unnecessary overhead, since compile-time frameworks compile the code such that operations are done on the DOM directly.

Ultimately, the new mindset is that the programmer writes their declarative code, and the framework/compiler decides everything between the code and the output. If direct DOM manipulations are optimal, the framework will do that. If a virtual dom is optimal, then the framework will output a virtual dom. Right now MillionJS feels like it's working with outdated technology. I think if MillionJS wants to be ready for the future, it needs to provide a more general framework for static analysis.

Thread Thread
 
aidenybai profile image
Aiden Bai

Generating straight imperative code has many downsides. For example, there would be an increase in the generated to source ratio, increasing bundle size, vs. just generating a data structure which would save a lot on bundle size. Even then, Million proves than in the benchmarks, it's able to match up against imperative DOM manipulations, thanks for shortcutting. Virtual DOM is here to stay, but it needs to evolve to mesh with the new paradigms.

Static analysis is great, but there are already so, so many SSG/SSR frameworks/integrations out there, namely 11ty, Astro, etc. These libraries have found it's very hard to achieve zero runtime (unless your page literally has zero interactivity). Million.js attempts to address this outdated technology and shift the VDOM paradigm to the modern age.

Thread Thread
 
woojoo666 profile image
woojoo666 • Edited

Svelte has already calculated the inflection point where the bundle size becomes larger than react, and it's much larger than most applications will reach, see here. Even so, as I said a smart static analysis framework would be able to generate a virtual dom if it were optimal (but I guess Svelte is not there yet).

but for now, I think virtual doms are starting to fall out of use. They may prove useful again in the future but right now it seems like frameworks like Svelte are just all-around better than virtual dom frameworks (aside from the maturity of React and Vue I guess). Though I am curious to see the benchmarks of Svelte vs MillionJS in some real life application.

Also note that SSR and SSG are not really static analysis technologies. They don't analyze the code, they just runs the code and generate the initial DOM tree. Static program analysis is in pretty early stages for web dev and Svelte is the first framework to utilize it and take off, at least from what I've seen (though I guess bundlers like Webpack sort of count as well, though the analysis is not as complex as Svelte's)

Anyways, I don't mean to disparage your work, I think it's an impressive and interesting project (otherwise I wouldn't have looked into it). I just think it has a few directions it needs to go if it wants to keep pace with modern developments.

Thread Thread
 
aidenybai profile image
Aiden Bai

The inflection point project you referenced looks really interesting - but it only compares React 16 and Svelte, which could differ from application to application. I could be misinterpreting the readme, but in my opinion I am doubtful of the results when applied to different scenarios, as there is just so much variablity possible that could change the inflection point(s).

It's very difficult to claim that Virtual DOM is falling out of use. While some popular + successful libraries like Svelte/Solid have outright rejected the Virtual DOM, a significant portion of libraries and newly created libraries will continue to use Virtual DOM. It's just so difficult to compare libraries because of subjectivity, and claiming that certain libraries are "all around better" than others is an overgeneralization in my opinion. I think a MillionJS and Svelte benchmark could be interesting, but they are so different that it would only be accurate for an indirect comparison (through a compiler library built to optimize for Million).

I think SSR and SSG do some static analysis. For example, astro removes any unnecessary code, some SSR/SSG do static prop, component and vnode hoisting (might be bundlers, I'm not sure), but I agree it's not to the extent of the application of static analysis in other programming langs. I think a possibile difficulty Svelte devs might be facing is just that flow analysis is hard (e.g. prepack), and it'll take time for this technology to develop.

Thread Thread
 
woojoo666 profile image
woojoo666

a lot of the stuff you mentioned is either runtime optimizations or bundling (which is static analysis, but it's really just tracing import statements to find which code is used and which isn't). And SSR just runs the code to generate a DOM tree, it's not analyzing the code or generating code . Real static analysis is difficult, as you pointed out. But that's why Svelte is making such big waves. And prepack looks to be going that direction too. It's a huge field with a lot of opportunity.

But yeah ultimately it seems we disagree on what role VDOMs will have in the future, I guess we'll just have to see :)

Thread Thread
 
aidenybai profile image
Aiden Bai

Ah yeah, I was so hyped for the prepack project but I'm kinda bummed out facebook basically just dropped the project