Live data from Hacker News

Virtual DOM is pure overhead (2018)

svelte.dev

131–140 of 293 posts

Re: Virtual DOM is pure overhead (2018)

#131

Earlier quoted context omitted.

For me, trying to make sense of how React's reconciler matches hook invocations to component instances is pure cognitive overhead. Other people don't seem to have this problem. But trying to accomplish anything in React is arduous for me, particularly with function components and hooks. Class components seem a little more obvious.

Is it possible to just not think about it? Or is that easier said than done?

I think it's perfectly possible if you just don't place hooks in a loop or if, which you shouldn't do and are warned against.

Re: Virtual DOM is pure overhead (2018)

#132

I will probably get downvoted as I am in minority who still believe Server Side Rendering is the best approach for most of the web with exceptions to some websites that require Single Page App functionality. I still think web would be best if you do SSR and then replace HTML DOM elements using frameworks like Stimulus Reflex or Hotwire. For millisecond interactivity you may want to write JS in a framework like Stimul…

The SPA movement has always seemed like a cargo cult to me. Yes, AJAX is handy and it was exciting when it came out. We used it to update search results when you changed a filter. For 90-95% of applications, a single page app architecture with a front-end JavaScript framework running a bunch of application code and rendering output is overkill and you could write the same app in half the time using server side render…

A (the?) primary argument for SPAs is state preservation/management. If you're actually building a web "application" (as opposed to web pages), then the default state model that a web browser provides is pretty bizarre when you think about it.

Re: Virtual DOM is pure overhead (2018)

#133

The most important part of Svelte, to me, is that it allows me to write web applications in the most elegant possible way. The compiler first approach means we get to choose whatever syntax we want to make the whole process as enjoyable as possible. The most brilliant part of Svelte was the decision to stay as close to JavaScript as possible, so anyone who knows JS, HTML, and CSS knows svelte. Importing any vanilla J…

> Importing any vanilla JS library is plug-and-play, meaning the community and ecosystem span the entire JS ecosystem. No more x-for-react or y-for-vue. This makes me feel conflicted. With React/Angular/Vue you're given a stable base upon which to build new components and logic, so most of the libraries end up being vaguely consistent with the underlying tech. With JS libraries it's the wild west once again and befor…

> With React/Angular/Vue you're given a stable base upon which to build new components and logic

Oh you sweet summer child. Wait until you see the multilayered horror of devs insisting on styled components because they never spent the time to learn the specificity rules of CSS; their grabbing at lowdash debounce or react-virtual because they don't have the confidence to build a leaner version themselves; suggesting that core concepts of the web are outdated because they came up in the Age of React.

React/Vue/Angular will not protect you from bloated, poorly written apps. I would argue they encourage bad practices.

Re: Virtual DOM is pure overhead (2018)

#134

Earlier quoted context omitted.

>The virtual DOM overhead is a problem. However, saying it’s pure overhead and then not qualifying how much is a catastrophic failure of reasoning. Svelte's main point is that the performance claims of frameworks like React are just bullshit marketing-speak. That I agree with it. The value of JS UI frameworks in general, isn't in performance, but rather to provide a "declarative, state-driven UI development" because…

I seem to remember that when React was first introduced, DOM mutations _were_ very expensive. I was under the impression that a lot of optimization was done in reaction to, err, React and similar frameworks?

There's some nuance. DOM mutations are still expensive if you interpolate reading and writing operations. The declarative paradigm allows frameworks to batch same-type operations to prevent double repaints. This is the upsell of virtual DOM vs jQuery, but it's not a benefit that is exclusive to virtual DOM.

Virtual DOM comes with a different set of trade-offs in terms of needles and haystacks. If you have lots of mutations relative to the size of the DOM, then virtual DOM overhead per mutation is relatively low. But if you're only updating a single element in a very large tree, then you are incurring a lot of overhead per mutation.

Another modern confounding factor to be aware of is that some browsers (notably Chrome) have made it so that mutations through the DOM API no longer cause a repaint to block the main thread (which is how every UI system ever should work, really). What this means is that any performance benchmark that uses JS APIs to measure UI responsiveness is going to be problematic (either by not measuring repaints correctly, or by adding a ton of confounding factors by shoving the macrotime queue of setTimeout/friends into the measurement)

Also, qualitatively, there's different levels of overhead. A repaint takes in the order of hundreds of milliseconds (i.e. it can be noticeably expensive). DOM API calls are also "expensive", but only in the order of a millisecond or so; you do want to touching the DOM unnecessarily if possible and virtual dom helps avoid silly mistakes like re-querying the DOM on every event like in the `$('.foo').on('mousemove', () => $('.bar'))` anti-pattern. Virtual DOM is "overhead" in the sense that allocating memory for a virtual DOM node is "expensive" (compared to not allocating any memory). But we're in microsecond-per-instance territory at this point. You need large haystacks with very small needles at high frequencies in a slow device to experience human-noticeable performance degradation from virtual DOM object allocation overhead.

Re: Virtual DOM is pure overhead (2018)

#135

Time and again it has been proven that the number one metric for success of a language or framework is developer experience. Javascript was a meme language, but it was easy to use and highly accessible. Now its everywhere, in everything, including places it has no business being. React has become that for frontend development. React is easier to use than Svelte. I got excited when I first learned of it, but its awkwa…

I think it's ubiquitousness, not developer experience, but perhaps that's what you meant. Both PHP and Javascript are examples of that. PHP wasn't nicer to use than other languages, it was just available to everyone. They're also both unencumbered by the aspirations of software engineering. The language doesn't care that you're writing untyped, procedural spaghetti code, they're very forgiving and so are the community and ecosystem.

Re: Virtual DOM is pure overhead (2018)

#136

Earlier quoted context omitted.

>The virtual DOM overhead is a problem. However, saying it’s pure overhead and then not qualifying how much is a catastrophic failure of reasoning. Svelte's main point is that the performance claims of frameworks like React are just bullshit marketing-speak. That I agree with it. The value of JS UI frameworks in general, isn't in performance, but rather to provide a "declarative, state-driven UI development" because…

I seem to remember that when React was first introduced, DOM mutations _were_ very expensive. I was under the impression that a lot of optimization was done in reaction to, err, React and similar frameworks?

>I seem to remember that when React was first introduced, DOM mutations _were_ very expensive.

Not really. Rendering was always a heavily optimized area. The DOM, by the way, is also an in-memory data-structure, and can also be clever on how it batches draw commands to the hardware (GPU or otherwise). I was always skeptical of the performance benefits of frameworks like React for that reason.

The big benefit of UI frameworks (React or Angular) is that it organizes your code into a defined, maintainable pattern. Traditionally JavaScript has been a mess of a programming language so with raw JS/HTML development it was easy to shoot yourself in the face and do the wrong thing.

>I was under the impression that a lot of optimization was done in reaction to, err, React and similar frameworks?

That's not true. There is an enormous amount of investment being poured into the entire HTML/JS/CSS stack.

Re: Virtual DOM is pure overhead (2018)

#137

The most important part of Svelte, to me, is that it allows me to write web applications in the most elegant possible way. The compiler first approach means we get to choose whatever syntax we want to make the whole process as enjoyable as possible. The most brilliant part of Svelte was the decision to stay as close to JavaScript as possible, so anyone who knows JS, HTML, and CSS knows svelte. Importing any vanilla J…

> Importing any vanilla JS library is plug-and-play, meaning the community and ecosystem span the entire JS ecosystem. No more x-for-react or y-for-vue. This makes me feel conflicted. With React/Angular/Vue you're given a stable base upon which to build new components and logic, so most of the libraries end up being vaguely consistent with the underlying tech. With JS libraries it's the wild west once again and befor…

This is certainly not my experience. I’ve never had to touch a library with jQuery, and the vast majority of libraries with framework wrappers also have vanilla implementations. The difference being the wrappers need to be updated to keep up with the frameworks, and often have more ways to fail considering they’re often just vanilla libraries + wrapper code.

If a library is maintained, the existence of a framework wrapper doesn’t make it any more reliable in my experience.

Re: Virtual DOM is pure overhead (2018)

#138

When I learned frontend web work and React years ago, I fell for the same "VDOM is fast!" hype, and assumed there was non-JS magic under the hood. I eventually built a VDOM-based frontend WASM framework in Rust (Seed). I now built frontends in HTML and CS, with no frameworks, and minimal, targeted JS code to manipulate the DOM directly; it's liberating, and much faster than both React and WASM/Rust.

It's crazy how quickly frontend UI frameworks became the standard approach. They're not necessary in so many instances where they are used.

I also found it pretty comical when server side rendering became a hot topic, like duh guys, that's what we were doing first! Did you forget?

Anyway, it's not that frontend UI frameworks are bad, it's more that pragmatism gets thrown out the window so quickly.

Re: Virtual DOM is pure overhead (2018)

#139

Time and again it has been proven that the number one metric for success of a language or framework is developer experience. Javascript was a meme language, but it was easy to use and highly accessible. Now its everywhere, in everything, including places it has no business being. React has become that for frontend development. React is easier to use than Svelte. I got excited when I first learned of it, but its awkwa…

That’s surprising, because the overwhelming consensus among anyone I’ve spoken to with significant experience in both seems to emphasize the vastly improved DX of Svelte over its predecessors. State management is trivial, and the amount of code needed to accomplish anything is significantly less in Svelte.

I’m curious- how much experience do you have with Svelte and what in particular do you find it makes more difficult or convoluted than React?

Re: Virtual DOM is pure overhead (2018)

#140
post #11

For 95% of apps, Svelte's custom syntax is pure cognitive overhead making little difference to the performance of the app.

What custom syntax? You don’t even need to use it, but 100% of the time I do, the custom syntax implementation is vastly simpler than any alternative. I would love an example that contradicts my experience.
Post reply on HN